constructor parameters not being flagged as unused by no-unused-vars plugin

I have a variable in the constructor that is not being used, and only tsc seems to pick up on it. Even though I have tried various plugins and recommendations to get eslint to recognize the unused variable, it still doesn't work.

I have experimented with a number of common plugins and recommendations:

"plugin:@angular-eslint/template/process-inline-templates",
"plugin:@typescript-eslint/recommended",
"plugin:import/recommended",
"plugin:import/typescript",
"eslint:recommended"

Here is a snippet of code from my component with the error:

import { Component } from '@angular/core';

import { ApiService } from '../services/api.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {
  constructor(private apiService: ApiService) {}
}

In this case, the apiService variable is not being used. tsc prompts me with:

Property 'staffScheduleSessionService2' is declared but its value is never read.ts(6138)

Answer №1

After some extensive searching online, I stumbled upon this insightful post on Stack Overflow which perfectly explains my discoveries.

Interestingly, there currently isn't a direct replacement for detecting unused constructor parameters or private members (as indicated by TypeScript rules 6133 and 6138).

For new projects, it's recommended to enable the "noUnusedLocals" and "noUnusedParameters" rules in your TypeScript configuration to maintain clean code from the start. However, implementing these rules in established projects could pose challenges, as it may hinder proper compilation and require resolving any related errors.

The discrepancy between compiler options and ESLint rules, as explained in this GitHub thread, stems from the complexity of achieving intuitive integration and autofix capabilities.

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

Examining Angular tests for window.location.href changes

authenticate() { const url = environment.authenticationEndpoint; window.location.href = url + '/login'; } I have an Angular service file containing the above code which redirects to the login URL. In order to unit test this, I added the foll ...

How can jsPDF be used with Angular2 in Typescript?

Recently, I developed an Angular2 application that is capable of generating JSON data. My main goal was to store this JSON output into a file, specifically a PDF file. This project was built using Typescript. To achieve the functionality of writing JSON d ...

Tips for avoiding rule `@angular-eslint/template/i18n` from checking `mat-icon` tags

A strategy I implement is using the rule @angular-eslint/template/i18n to analyze template elements containing text nodes without an i18n attribute. In Angular Material, the identification of icon keys is done through the inner text of mat-icon elements, ...

Why doesn't package.json typically utilize the preset values stored in the .npmrc file?

Windows 10 x64 Based on the information found here, I created a file called C:\Users\bushm\.npmrc with the following content: author = "Andrey Bushman" However, when I run the command npm init -y in a new directory, I noticed that the pac ...

Angular 2: Implementing service functions on button click using the (click) event

Is it possible to call a function from my service when clicking on an element in the HTML returned from an HTTP call? Here is the HTML snippet: <a (click)="SellingVarietiesService.goToVarietyDetails(3)">Test</a> The function I want to call i ...

Achieving Bi-Directional Data Binding with Vue.js using the vue-property-decorator Library

Currently, I am working with Vue.js and TypeScript while also utilizing the vue-property-decorator. My goal is to establish two-way data binding between a parent and child component. Below is an example of what I have in mind: Parent Component <templa ...

Determine the date and time based on the number of days passed

Hey there! I have a dataset structured like this: let events = { "KOTH Airship": ["EVERY 19:00"], "KOTH Castle": ["EVERY 20:00"], Totem: ["EVERY 17:00", "EVERY 23:00"], Jum ...

Tips for switching between two icons within the same div by clicking on the icon

I am looking to implement a feature in angular2 that is similar to marking an email as Starred. For example, when I click on the empty star icon, it will make some service calls to check if the item should be starred. If the result is true, then a new icon ...

Issue with the text wrapping of Angular mat-list-option items

When the text of my checkboxes is too long, it doesn't wrap properly. Please see the image below for reference: Click here to view Checkbox image and check the red box Here is my HTML code: <mat-selection-list #rolesSelection ...

Add a new item to an array in Angular 2 when a click event occurs

I'm trying to add a new list item (which comes from an API) when a button is pressed, but I'm not sure how to do it. Can anyone provide some guidance? Here's the code: <ul> <li *ngFor="let joke of jokes">{{joke.value}}</li> ...

Firebase console does not show any console.log output for TypeScript cloud functions

I encountered an issue while using Typescript to write some Firebase cloud functions. Here is a snippet of my code: index.ts export * from "./Module1"; Module1.ts import * as functions from "firebase-functions"; export const test = functions.https.onR ...

Experiencing difficulties with PrimeNg installation on Angular 12.1.4 due to an npm error

I'm facing an issue while trying to integrate PrimeNG into my project. I encountered a strange error and I'm unsure about how to resolve it. Can anyone offer some assistance? The Angular version currently installed on my machine is 12.1.4. 205-18 ...

A guide to effectively utilizing a TypeScript cast in JSX/TSX components

When trying to cast TypeScript in a .tsx file, the compiler automatically interprets it as JSX. For example: (<HtmlInputElement> event.target).value You will receive an error message stating that: JSX element type 'HtmlInputElement' is ...

Component re-rendering and initializing useReducer

I made some revisions to this post. Initially, I shared the entire problem with my architecture and later updated it to focus directly on the issue at hand in order to make it easier for the community to provide assistance. You can now jump straight to the ...

What is the process for automatically initiating a service when importing a module in Angular?

I am curious about how I can automatically run a service within a module upon importing it, without the need for manual service injection and execution. This functionality is similar to how the RouterModule operates. @NgModule({ imports: [ Browser ...

Using Typescript to transform a list into function arguments

My current challenge involves a set of arguments structured like so: const args: FeatureEventArg[] = [ { name: 'username', type: 'string', }, { name: 'message', type: 'string', }, { name ...

Achieving TypeScript strictNullChecks compatibility with vanilla JavaScript functions that return undefined

In JavaScript, when an error occurs idiomatic JS code returns undefined. I converted this code to TypeScript and encountered a problem. function multiply(foo: number | undefined){ if (typeof foo !== "number"){ return; }; return 5 * foo; } ...

React Higher Order Component (HOC) encountered an ESLint issue: spreading props is not

Does eslint lack intelligence? The Higher Order Component (HOC) is quite generic, so I struggle to specify the incoming options/props as they are dynamic based on the component being wrapped by this HOC at any given time. I am encountering an error statin ...

`The dilemma of z-index in a dropdown menu nested within an animated card`

Having an issue that I have attempted to simplify in this StackBlitz example (the actual project is created with Angular components and Bootstrap, etc.): https://stackblitz.com/edit/angular-bootstrap-4-starter-njixcw When incorporating a dropdown within ...

Hold off on utilizing information from a single observable until a later time

In my Angular component, I am working with the following code: @Component({...}) export class ComponentOne implements OnDestroy, OnChanges { readonly myBehaviourSub = new BehaviorSubject<Observable<MY_CUSTOM_INTERFACE>>(NEVER); constructo ...