TSLint extension throwing errors in my Angular application running in Visual Studio Code

Question

I recently started seeing, what seems like, TSLint errors. They look like this:

Not using the local TSLint version found for '/Users/myname/myproject/client/src/app/likes/likee/likee.component.ts'. To enable code execution from the current workspace you must enable workspace library execution.

I'm seeing them in my .ts files when I open them and it shows a yellow squiggly line on the first line of each .ts page.

I see on the TSLint site it says it's been deprecated.

QUESTION 1 - What's the cause of these errors and why am I suddenly seeing them?

QUESTION 2 - Should I uninstall the Visual Studio Code TSLint extension and install the ESLint extension?

Solution 1

Like @Tuấn Nguyễn described, you need to:

1. Go to Command Palette by pressing Ctrl + Shift + P,

2. In the input that pops up at the top of the VS Code, start typing

   TSLint: Manage workspace library execution"
   

   and hit Enter key.

3. From the menu that replaces the input, pick enable workspace library execution and again press Enter key.

Solution 2

You should go to Command Palette in VScode to search for TSLint: Manage workspace library execution. And enable workspace library execution

Solution 3

Although the answer given by @Tuấn Nguyễn works yet it is not advisable to do so.

As per MS docs https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin, this answer will replace the global TS lint configuration defined with the local one, which one can manipulate easily and its not recommended due to security reasons as well.

Screenshot:

Recommended Approach:

As per MS Docs, https://code.visualstudio.com/api/advanced-topics/tslint-eslint-migration, updated recently (12/11/2020), you should migrate from TSLint to ESLint.

This might be the reason that everyone is looking for the fix, as needful things were done by MS recently. :)

Steps:

1. npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin (Install ESlint and TSLint)
2. npx tslint-to-eslint-config (This will install utility tool and make configuration easier. Post install a new .eslintrc.js will be created. There will be changes to .vscode/settings.json as well.)
3. Disable/Uninstall TS lint from your VS Code.
4. You can then, place a script in your package.json file as - "lint": "eslint -c .eslintrc.js --ext .ts <mySrcFolder>". (This will tell ESLint to look for TSLint)

But, you should probably look once, over steps in link more vividly, in order to follow steps correctly and accordingly.

Solution 4

Press Ctrl+Shift+P to open command pallete.

In the input that pops up at the top of the VS Code, write

TSLint: Manage workspace library execution

From the menu that replaces the input, pick

Enable Workspace Library Execution

Solution 5

Go to Command Palette by pressing Ctrl + Shift + P,

In the input that pops up at the top of the VS Code, start typing

TSLint: Manage workspace library execution" and hit Enter.

From the menu that replaces the input, pick enable workspace library execution, and again hit Enter.

View more solutions

Comments

[user1186050]

Hi Tuan. Can you please provide an example of the steps to do that? I'm not sure I understand what you're saying.

[user1186050]

Hi. Can you tell me why I'm suddenly seeing this? And wether I should uninstall TSLint and use ESLint instead, like the documentation says? It says it's been deprecated.

[Ivan Frolov]

@user1186050 ctrl + shift + p > TSLint: Manage workspace library execution > Enter > Enable workspace library execution

[BillyTom]

A properly configured Visual Studio Code should work without a global TypeScript installation.

[Gaurav Gupta]

@user1186050 Yes, you should uninstall TSLint and use ESLint as a recommended approach. While, this is visible as Microsoft may have done needful things to get rid of TSLint and mark it deprecated. Check my answer above: stackoverflow.com/a/65288426/7629107.

[Collin Barrett]

Is there any way to make this change "sticky"? Enabling workspace library execution works, but it seems when I close VS Code and re-open the same project, I have to enable it again.

[Zahema]

@CollinM.Barrett From the same menu choose "Always enable workspace library execution"

[Lauro]

Thanks! I couldn't find the TSLint Manage Workspace on the Command Palette as others suggested, but after saving the workspace it appeared and worked just fine!

[Konrad Viltersten]

Just to clarify and be overly explicit - despite the fact that Angular uses TypeScript, we no longer are supposed to use TSLint but rather ESLint, even if we code not using EcmaScript. Is that correctly understood?

[Zerotwelve]

Yes exactly. Just follow the migration guide and basically everything will work as before, but with ESLint instead of TSLint

[Ali Zareshahi]

@Lauro your welcome, i am happy for fix this

[Ali Eshghi]

when I am doing step 2 I get this error :npm ERR! code ENOLOCAL npm ERR! Could not install from "eshghi\AppData\Roaming\npm-cache_npx\16104" as it does not contain a package.json file.

[Meryan]

I already have a line "lint": "ionic-app-scripts lint", should I add your step 4. as "eslint": "eslint -c .eslintrc.js --ext .ts src", ? these script are manually invoked by user (me) via npm run eslint ? or are they keywords expected by serve and build scripts? Thank you for clarifying.

[Martin Zamora]

Yes, this solution worked fine for me by having my ecosystem (visual code, angular, etc.) up to the day.

[Frank Wang]

Thanks. You inspired me. Just reboot the editor solved my problem.

[N.Y]

waww!! Thank you a lot !! I had a problem with ngModel directive whereas i imported FormsModule but I couldn't delete this error : "There is no directive with exportAs set to ngForm". You help me by this way.

[rofrol]

After vscode restart, it shows again. Downvoting.

[rofrol]

After vscode restart, it shows again. Downvoting.

[rofrol]

After vscode restart, it shows again. Downvoting.

[rofrol]

After vscode restart, it shows again. Downvoting.