Is there a way to display unused imports and locals as warnings instead of errors in vscode?

When I'm writing TypeScript code in my code editor, it highlights unused imports and local variables as errors, marked with a red squiggly underline:

https://i.sstatic.net/zRJMP.png

However, I would prefer if these were shown as warnings in the editor, especially since it's common for me to not use the import/local variable immediately. The red error indication sometimes gives the impression of a more serious issue, like importing a non-existent symbol.

Previously, with tslint handling unused imports/locals, this differentiation was clearer. But now that it's part of the compiler, it's more challenging to distinguish them.

Is there a way to configure the compiler to treat these specific errors as warnings instead?

In my tsconfig.json, I have the following setup:


{
  "compilerOptions": {
    "noUnusedLocals": true
  }
}

Answer №1

Quick Summary: To address these errors as warnings by default, make sure to upgrade to version 1.19.0+ (currently only accessible as insiders build).


Exciting news! A recent pull request (you can check it out here: https://github.com/Microsoft/vscode/pull/37616) has been merged, allowing users to customize the style of displayed tsc errors. This feature is now available for VSCode version 1.19.0+ but can only be found in the VSCode insiders build (essentially the beta version of the upcoming VSCode).

The specific setting to be aware of is called

typescript.reportStyleChecksAsWarnings
. When this setting is switched to true, errors of the following types will be flagged as warnings:

--noUnusedLocals
--noUnusedParameters
--noImplicitReturns
--noFallthroughCasesInSwitch
--allowUnusedLabels
--allowUnreachableCode

To enable this setting, navigate to File -> Preferences -> Settings and filter for

typescript.reportStyleChecksAsWarnings
. From there, you can toggle this setting to true, which is now the default in the current insiders build.

https://i.sstatic.net/t0kSC.png

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

Exploring the depths of object properties with Angular, JavaScript, and TypeScript: A recursive journey

Let's consider an object that looks like this: const person = { id: 1, name: 'Emily', age: 28, family: { mother: { id: 101, name: 'Diana', age: 55 }, fathe ...

Issue with locating module in Visual Studio 2015 when using Angular5 and TypeScript version TS2307

I'm currently attempting to integrate Angular in Visual Studio 2015 update 3, but encountering the following error: TS2307 cannot find module '../node_modules/@angular/core'. The error is shown in the image linked here. Can anyone help me fi ...

Passing a variable from the second child component to its parent using Angular

Need help with passing variables between two child components Parent Component: deposit.component.html <div> <app-new-or-update-deposit [(isOpenedModal)]="isOpenedModal"></app-new-or-update-deposit> </div> Deposit Component ...

What is the significance of the exclamation mark in Vue Property Decorator?

As I continue to explore the integration of TypeScript with Vue, I have encountered a query about the declaration found in the Vue property decorator documentation. @Prop({ default: 'default value' }) readonly propB!: string ...

Dynamically altering the CSS4 variables in real time

I am facing the challenge of managing multiple CSS4 variables, including primary, for various companies. How can I dynamically change the primary CSS4 variable color based on the company? Note: My specific requirement is to update the primary variable glo ...

An error encountered while trying to utilize the npm convert-units package within an Ionic 4 application

In my Ionic 4 app, I am utilizing version 2.3.4 of the npm package called convert-units. To install this package in my Ionic 4 application, I used the CLI command: npm i convert-units --save However, upon importing the library with import { convert } fro ...

Adding elements from one array to another array of a different type while also including an additional element (JavaScript/TypeScript)

I'm having trouble manipulating arrays of different types, specifically when working with interfaces. It's a simple issue, but I could use some help. Here are the two interfaces I'm using: export interface Group { gId: number; gName: st ...

How to apply a single pipe to filter columns in Angular 2 with an array of values

I need to sort through an array of objects using multiple array string values. Here is an example of how my array of objects looks like: [{ "name": "FULLY MAINTAINED MARUTI SUZUKI SWIFT VDI 2008", "model": "Swift" }, { "name": "maruti suzuki ...

Who is responsible for the addition of this wrapper to my code?

Issue with Sourcemaps in Angular 2 TypeScript App Currently, I am working on an Angular 2 app using TypeScript, and deploying it with the help of SystemJS and Gulp. The problem arises when I try to incorporate sourcemaps. When I use inline sourcemaps, eve ...

Unable to modify an attribute due to TypeScript error: Type 'string' cannot be assigned to type 'never'

I am trying to modify an attribute of an object in TypeScript and React, but I keep encountering the following error message: Type 'string' is not assignable to type 'never'. This happens even though I have a check in place to verify th ...

Properties undefined

All of my functions are giving errors indicating that the props are not defined. The error specifically relates to the word "props" in the following functions: function PostButton(props) function PostButton2(props) function TotalVotes(props) ...

Searching and adding new elements to a sorted array of objects using binary insertion algorithm

I'm currently working on implementing a method to insert an object into a sorted array using binary search to determine the correct index for the new object. You can view the code on codesanbox The array I have is sorted using the following comparis ...

Performing unit tests in Angular 2 with karma

Trying to grasp the concept of unit testing in Angular has been quite a challenge for me, especially since I am still navigating through Angular 2 and its syntax. Understanding testing becomes even more intricate. I attempt to follow the examples provided ...

Learn how to utilize React lazy effectively in components that utilize Redux compose without any similarities to type 'IntrinsicAttributes'

Here is the structure of a component that is exported with compose from redux. This component is called TestInspector.tsx export interface TestInspectorProps { closeInspector: () => void; onExpand: () => void; isFullScreen: boolean; selected ...

Learn how to pass JSON data into an anchor tag with Angular router link and the query parameters attribute set as "<a ... [queryParams]="q=|JSON|

As an Angular user, I am trying to populate a query parameter with a JSON object. <ngx-datatable-column name="Sku" prop="product.sku" [flexGrow]="0.5"> <ng-template let-row="row" let-value="value" ...

Guide on invoking child components' functions from the parent component in Angular 6

Main Component import { Component } from '@angular/core'; import { DisplayComponent } from './display.component'; @Component({ selector: 'my-app', template: ` <button (click)="submit()">Call Child Com ...

"Using RxJS to create an observable that filters and splits a string using

I need to break down a string using commas as separators into an observable for an autocomplete feature. The string looks something like this: nom_commune = Ambarès,ambares,Ambares,ambarès My goal is to extract the first value from the string: Ambarès ...

Issues arise in Angular 4 when the "Subscribe" function is repeatedly invoked within a for/switch loop

My array of strings always changes, for example: ["consumables", "spells", "spells", "consumables", "spells", "consumables", "spells", "characters", "characters", "consumables"] I iterate through this array and based on the index, I execute different .su ...

Specializing Generic Types in Typescript

I'm interested in exploring specialization within Typescript generics, allowing for implementations to vary based on specific type criteria. Here's a simple illustration: const someFunction = <A>() => { return 0; } // something simila ...

"Would someone be able to advise me on how to correctly reference the PrimeNG AutoCompleteModule within my

I've been developing an application that relies on auto-complete functionality. To begin, I installed some available templates using the dotnet command line tool and then selected a template directory before installing the Angular template. dotnet ne ...