Tips for separating constructor parameters in your custom ESLint rule for TypeScript

I am currently working on a custom rule to alphabetically sort the constructor parameters using the "quick fix" feature from eslint. I want to isolate the constructor parameters in order for eslint to display squiggly lines and my custom message when hovering over them. However, I am having trouble figuring out how to achieve this just by looking at the AST of the example code provided here:

Can someone advise me on which approach to take? How can I ensure that only the identifiers within the constructor are checked?

//example code used in AST explorer      
constructor(
        private _appService: AppService,
        private _authService: AuthService,
        private _formBuilder: FormBuilder,
        private _manageScenarioService: ManageScenarioService,
      ) {}

This is what I have so far: The issue I am facing is that it highlights all identifiers rather than just those within the constructor.

 import { Rule } from 'eslint';
    export function diSortRule(context: Rule.RuleContext): Rule.RuleListener {
      return {
        Identifier(node) {
          context.report({
            node,
            message: 'this pops up here',
          });
        },
      };
    }

Any assistance or guidance on this matter would be greatly appreciated!

Answer №1

Even though it may seem like a long time has passed, I believe this information can still be useful for you or others. Recently, we introduced a new rule that automatically fixes and organizes constructor parameters in classes that are decorated with one of the following: @Component(), @Directive(), @Injectable(), @Pipe().

Here is how you can implement it:

  1. Begin by installing our plugin:

    npm install --save-dev @erento/eslint-plugin-erento-rules

  2. Add the following to your .eslintrc file

    "plugins": [
        "@erento/erento-rules"
    ],
    "rules": {
        "@erento/erento-rules/injectable-order": "error"
    }
    
  3. Run your ESLint linter

For more details on this rule, please visit: https://github.com/erento/eslint-plugin-erento-rules/blob/master/src/rules/injectable-order.md

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to incorporate StropheJs into Angular 8

Methods I have attempted: Method 1: Downloaded the strophejs-1.3.4.zip from Unzipped the folder, strophejs-1.3.4, and placed it in the src/assets directory of my Angular 8 project. Included the following in my index.html file: <!--// Stroph ...

Exploring Horizontal Grid Scrolling in Tailwind CSS

I've been attempting to create content cards within a website, and I am interested in having the grid of content cards scroll instead of transitioning to another row. Is there a method to achieve this? ssName="mt-2 text-lg text-gray-700" sty ...

Is there a way to switch the display of an icon using Font Awesome and Angular?

I'm attempting to switch between the sort-amount-asc and sort-amount-desc classes while also including another icon in the initial state, using Angular. I attempted to use a ternary operator within ngClass but am struggling to make it work with the fo ...

Properly capturing an item within a TypeScript catch statement

I am dealing with a scenario where my function might throw an object as an error in TypeScript. The challenge is that the object being thrown is not of type Error. How can I effectively handle this situation? For example: function throwsSomeError() { th ...

What is preventing a mapped type from completely resolving a lookup with a generic yet finite key?

Let's break down the issue at hand: type Animal = 'dog' | 'cat'; type AnimalSound<T extends Animal> = T extends 'dog' ? 'woof' : T extends 'cat' ? 'meow' : never; cons ...

I am encountering a TypeScript error with URLSearchParams. The object cannot be successfully converted to a string using the toString() method

During the development of my react app with postgres, express, node, and typescript, I ran into an issue while working on the backend code. The problem arises when trying to utilize URLSearchParams. index.js import express from 'express'; import ...

The React property has been mistakenly initialized as an empty object instead of the desired array

I've been working on implementing a GroupedList from the Office UI Fabric control library and referring to the demo code here. Although I'm close to the demo code, I'm facing an issue when passing the items array into the function component ...

In version 9.3.8 of Konva, when mirroring an image along the X axis and then connecting it to a transformer, the rotation anchor is positioned at the bottom instead

I have been working with Konva for several weeks now and encountering a specific issue. When attempting to mirror an image, setting scaleX works correctly, mirroring it on the vertical axis. However, I am facing another issue (possibly a bug or misunderst ...

Using axiosjs to send FormData from a Node.js environment

I am facing an issue with making the post request correctly using Flightaware's API, which requires form data. Since Node does not support form data, I decided to import form-data from this link. Here is how my code looks like with axios. import { Fl ...

Ways to retrieve the "this" keyword in a <script setup> Vue Single File Component

Currently, I am developing a basic scaffold for vite, vue, and vuetify utilizing typescript. My goal is to implement the script setup version of SFC Vue. <script setup lang="ts"> One particular challenge I am facing is how to access proper ...

Transform a string into a class in Typescript/Angular

In my application, I've created a reusable modal popup component that takes a string as input and dynamically loads other components based on that input. This approach allows me to use the same modal popup component for multiple modals in the app inst ...

How can I pass a ref to a custom component in React with TypeScript using RefForwardingComponent and forwardRef?

I'm attempting to pass a reference to a custom component in order to set focus to that component. However, I am encountering the following error: const RefComp: React.RefForwardingComponent<HTMLInputElement, Props> Type '{ value: string; ...

Exploring the capabilities of google-diff-match-patch within the Angular framework

Seeking a way to incorporate the google diff/match/patch lib into an Angular application for displaying the variance between two texts. Here's how I plan on using it: public ContentHtml: SafeHtml; compare(text1: string, text2: string):void { var ...

Name values not appearing in dropdown list

Looking for some assistance with displaying a list of names in a dropdown menu using Angular. The dropdown is present, but the names from my array are not appearing. I think it might be a simple fix that I'm overlooking. I'm new to Angular, so an ...

The historyApiFallback feature in webpack-dev-server does not seem to function properly when dealing with multi-level routing scenarios

Currently, I have set historyApiFallback: true to redirect any non-existing URLs to the index page. It works perfectly for first-level routes like localhost:8080/abc. However, when attempting localhost:8080/abc/xyz, an error appears in the browser console: ...

A guide on simulating x-date-pickers from mui using jest

I have successfully integrated a DateTimePicker into my application, but I am facing an issue with mocking it in my Jest tests. Whenever I try to mock the picker, I encounter the following error: Test suite failed to run TypeError: (0 , _material.gen ...

Utilizing TypeScript Modules for Enhanced Ambient Environments in Node.js

Currently, I am working on creating an ambient module in node.js by utilizing the Visual Studio developer tools. This is what the module code structure looks like: module "Module" { export class Class { first = "First"; second = "Second" ...

Strategies for modifying the title attribute within an <a> tag upon Angular click event

I am attempting to dynamically change the title attribute within an anchor tag upon clicking it. The goal is for the title attribute to toggle between two states each time it is clicked. Currently, I am able to change the title attribute successfully upon ...

Encountering an issue when transmitting a file from React/TypeScript to a C# API: "Error message stating 'The JSON value could not be converted to System.Byte[]'"

I'm working on transferring an image file from a frontend built in React/Typescript to a C# API. Here are the functions responsible for uploading a photo and sending the data to the C# API using Axios: const handleImageUpload = (event: React.ChangeEve ...

Why is my data not showing correctly? - Utilizing Ionic 3 and Firebase

I'm experiencing a challenge with displaying Firebase data in my Ionic 3 application. Below is the relevant snippet of code from my component where 'abcdef' represents a placeholder for a specific user key: var ref = firebase.database().ref ...