ESLint Angular now identifies unused variables in type definitions

I've been updating and refining an Angular project (to Angular 8, Electron 6, Ionic 4) and we made the decision to transition from TSLint to ESLint.

I've set up some rules and they're working fine, but I'm struggling to get rid of the no-unused-vars warning for type definitions. Whenever I run linting, I keep getting this warning for OperatorFunction and Observable, even though it's not really a problem.

import { OperatorFunction, Observable, timer } from 'rxjs';
import { tap } from 'rxjs/operators';

export function executeDelayed<T>(fn: () => void, delayTime: number): OperatorFunction<T, T> {
  return function executeDelayedOperation(source: Observable<T>): Observable<T> {
   //...
  }
}

The .eslintrc.js file contains the following configuration:

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:prettier/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
      "no-unused-vars": [
        "warn",
        {
          "vars": "local",
          "ignoreSiblings": true,
          "args": "after-used",
          "argsIgnorePattern": "res|next|^err"
        }
      ],
      "no-use-before-define": [
        "error", 
        { 
          "functions": true, 
          "classes": true 
        }
      ]
    }
};

I've looked through several similar questions here but couldn't find a solution. Any suggestions? Keep in mind that reverting back to TSLint is not an option.

Answer №1

I encountered a similar issue but managed to solve it by following the suggestions provided in the @typescript-eslint/eslint-plugin README. Essentially, I made adjustments to my code in the extends section as shown below:

"extends": [
  "eslint:recommended",
  "plugin:@typescript-eslint/eslint-recommended",
  "plugin:@typescript-eslint/recommended"
]

After implementing this change, all of the no-unused-vars errors and warnings disappeared.

It appears that the

"plugin:@typescript-eslint/recommended"
declaration supersedes the rules set by eslint:recommended which are incompatible with TypeScript, particularly the no-unused-vars rule.

Hopefully, this information proves to be useful for you!

Answer №2

In the midst of working on my angular project, I encountered a similar issue involving no-use-before-define. Eventually, I discovered that adding the prefix @typescript-eslint resolved the problem for me. Here's how it appears now:

'@typescript-eslint/no-use-before-define': 'warn'

Additionally, my parsing options have undergone some modifications:

 parserOptions: {
    ecmaVersion: 6,
    project: 'tsconfig.json',
    sourceType: 'module',
    ecmaFeatures: {
        modules: true
    }
}

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

Testing the Observable StatusChanges in Angular Forms: A Step-by-Step Guide

My Angular component has a unique feature where it takes an NgForm as an input and emits an object when the form becomes valid after modification. @Input() form!: IQuestionForm; //this type extends NgForm; @Input() question!: IQuestion; @Output() questionC ...

`Angular Model Value Bin for Arrays causing a bug`

I am attempting to link API values to HTML using *ngFor, and here is the code I have: HTML <nb-card accent="info"> <nb-card-header>Item Quantity</nb-card-header> <nb-card-body> <div *ngFor="let location of ...

What is the best way to generate a distinct identifier for every div element on a

Currently, I am working with Angular 2 and have a div element that I need to repeat in my HTML markup. This particular div contains a click event attached to it. Here is the code snippet: HTML: <div class="row"> <button class="btn btn-primar ...

What is the reason behind using angle brackets to access the initial value of an array with a variable inside?

I've been experimenting with this technique several times, but I still can't quite grasp why it works and haven't been able to find an answer. Can someone please explain? let myArray = [0, 1] let [myVar] = myArray console.log(myVar) // outpu ...

Tips on creating a Jasmine unit test scenario for a function that triggers onerror of an image tag

I am facing an issue with the code below as the test case is failing //test case it('should display default image if the image link in people finder result does not exist', fakeAsync(() => { debugger component.resultsItem = M ...

Automated user roster refresh

I have an online user list that is dynamically generated using a SQL query on a database table. How can I implement real-time updates to the webpage when a new user logs in? What specific code do I need to include for this functionality? Appreciate any g ...

Problems with the zoom functionality for images on canvas within Angular

Encountering a challenge with zooming in and out of an image displayed on canvas. The goal is to enable users to draw rectangles on the image, which is currently functioning well. However, implementing zoom functionality has presented the following issue: ...

Accessing each element of an array list individually from local storage

I'm currently working on a practice todo application, where I can add and remove tasks. However, I noticed that when I refresh the page, all the data is lost. To address this issue, I decided to utilize the localStorage feature to save the task lists ...

Tips on finding a JavaScript file using Google search

After releasing my jQuery plugin, I've noticed an increase in downloads. However, I'm curious to know where exactly it is being utilized. One idea I had was to search for the .js or .css file, potentially even looking at folder names. Is there a ...

tips for formatting numbers using AngularJS

How can I format numbers in Angular? Here is the code snippet: applyIfRisk = function(slip) { _.assign(slip, { risk: slip.risk, win: Math.ceil(slip.risk * 1.67) }); }, applyIfWin = function(slip) { _.assign(slip, { risk: Math.ceil(slip. ...

Tracking the progress bar as files are being uploaded via AJAX using HTML5

Currently, I have a progress bar that increments based on the number of files and their sizes. I am looking to implement an overall progress bar to display while uploading files to the server using AJAX and HTML5. Each file is uploaded individually to th ...

Instructions for implementing a "Load More" feature on blogs using either HTML or JavaScript

When retrieving blogs from a SQL Database, some of them tend to be lengthy. To tackle this issue, I plan on trimming each blog down to around 30 words (this amount may vary) and then incorporating a Load More link at the end. This link will enable users to ...

Ways to transmit additional arguments to RxJS map function

When working with an Angular application, I utilize HttpClient along with RxJS operators to execute various API calls. One example of this is shown below: return this.httpClient.put(url, JSON.stringify(treeOptions)) .pipe( map(this.extract ...

Typescript - Troubleshooting undefined error with static variables

My node API app is developed using express and typescript. The static variable of the Configuration Class is initialized with required configuration before starting the server. However, when I try to use this static variable in a separate TypeScript class ...

What are some techniques to encourage a grandchild to utilize the grandparent <router-outlet> within Angular 6?

This link will take you to a Stack Blitz demo that illustrates what I'm trying to achieve: https://angular-czk5vj.stackblitz.io/ In essence, my goal is to have the grand child route render within the grand parent router-outlet. Example: Routes: Emp ...

PHP displays the array returned by Ajax as "[object Object],[object Object]"

When working with Jquery, I am creating two arrays - one embedded inside the other. Here is an example of what it looks like: arrayOne = [{name:'a',value:1}, {name:'b',value:2}] var arrayTwo = [{name:'foo',value:'blah&ap ...

Discover the maximum length of an element in an array using JavaScript

I am trying to determine the length of the longest string in a given array. If the array is empty, the function should return 0. Here is my attempted solution: function getLengthOfLongestElement(arr) { var longestLength = 0; for(var i=0; i< arr.le ...

"Understanding How to Utilize the Grpc Stream Variable for Extended Processes in Node.js

Utilizing Node.js for connecting to a server through gRPC in order to execute a lengthy task. The server sends a one-way stream to the client (Node.js app) while the task is ongoing. I am looking to add a Stop button and have been advised that closing the ...

Manipulating content with JavaScript in Internet Explorer using the outerHTML property is a powerful

Encountering an Issue with outerHTML in IE Browser If I try the following: txt = "Update Complete!"; msg = sub.appendChild(d.createElement("p")); msg.outerHTML = txt; It works without any problem. However, if I use: txt = "1 Error:<ul><li> ...

How can I dismiss a popup confirmation in React?

The confirmation popup should close when clicking anywhere outside of it. However, the popup does not disappear as expected when the outside area is clicked. Additionally, I am getting the error message "Line 2:8: 'Backdrop' is defined but never ...