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

Asked 10/12, 2020 at 4:8 Answered 22/9, 2021 at 10:42

angular visual-studio-code eslint tslint

272

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.

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

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

Horseleech answered 10/12, 2020 at 4:8 Comment(0)

472

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

Go to the Command Palette by pressing Ctrl + Shift + P,
In the input that pops up at the top of the Visual Studio Code, start typing
```
TSLint: Manage workspace library execution"
```
and hit the Enter key.
From the menu that replaces the input, pick enable workspace library execution and again press the Enter key.

Nord answered 10/12, 2020 at 9:23 Comment(4)

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. – Bridoon 16/12, 2020 at 15:36

@CollinM.Barrett From the same menu choose "Always enable workspace library execution" – Inapprehensible 18/12, 2020 at 21:9

Yes, this solution worked fine for me by having my ecosystem (visual code, angular, etc.) up to the day. – Mita 1/5, 2021 at 0:34

After vscode restart, it shows again. Downvoting. – Consequential 14/12, 2021 at 16:55

You should go to the Command Palette in Visual Studio Code to search for TSLint: Manage workspace library execution. And enable workspace library execution.

Steenbok answered 10/12, 2020 at 7:56 Comment(2)

@user1186050 ctrl + shift + p > TSLint: Manage workspace library execution > Enter > Enable workspace library execution – Atropos 11/12, 2020 at 10:31

After vscode restart, it shows again. Downvoting. – Consequential 14/12, 2021 at 16:55

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

As per Microsoft documentation, TSLint, this answer will replace the global TSLint configuration defined with the local one, which one can manipulate easily and it’s not recommended due to security reasons as well.

Screenshot:

Recommended Approach:

As per Microsoft documentation, Migrate from TSLint to ESLint, updated recently (2020-12-11), 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 Microsoft recently. :)

Steps:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin (Install ESLint and TSLint)
npx tslint-to-eslint-config (This will install a 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.)
Disable/Uninstall TSLint from your Visual Studio Code.
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 the steps correctly and accordingly.

Knepper answered 14/12, 2020 at 11:41 Comment(3)

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. – Subequatorial 11/3, 2021 at 22:9

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. – Outspeak 17/4, 2021 at 6:53

I will note that if you're using a framework like Angular, which provides a separate TSLint to ESLint conversion tool (like they do), you should use the framework's tool and, unless specified, do NOT use this method, as it will break your ESLint config file and you will get MASSIVE errors. If I had known this ahead of time, I would have saved countless hours. – Extravaganza 14/2, 2023 at 8:52

Press Ctrl + Shift + P to open the Command Palette.

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

TSLint: Manage workspace library execution

From the menu that replaces the input, pick

Enable Workspace Library Execution

Messily answered 22/1, 2021 at 12:15 Comment(1)

After vscode restart, it shows again. Downvoting. – Consequential 14/12, 2021 at 16:57

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

In the input that pops up at the top of Visual Studio 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.

Arlyn answered 15/12, 2020 at 18:55 Comment(1)

After vscode restart, it shows again. Downvoting. – Consequential 14/12, 2021 at 16:57

I fixed the issue in this easy way:

Menu File → Save Workspace As...

By saving the workspace, Visual Studio Code detects some libraries and works better in files.

Griseofulvin answered 12/12, 2020 at 18:39 Comment(4)

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! – Henryson 4/1, 2021 at 18:25

@Henryson your welcome, i am happy for fix this – Griseofulvin 13/1, 2021 at 19:18

Thanks. You inspired me. Just reboot the editor solved my problem. – Maybellmaybelle 2/9, 2021 at 3:16

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. – Varner 5/9, 2021 at 18:21

Press Ctrl + Shift + P in Windows or Linux or Command + Shift + P on Mac
Type TSLint: Manage workspace library execution
Choose Always enable workspace library execution

Or you can save workspace file => Save workspace as

Volumeter answered 22/9, 2021 at 10:42 Comment(0)

The second question: Yes, you should uninstall TSLint and migrate to ESLint since TSLint has been deprecated from Microsoft. This link might help you.

Main answered 14/12, 2020 at 8:3 Comment(2)

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? – Incomprehensible 11/1, 2021 at 16:5

Yes exactly. Just follow the migration guide and basically everything will work as before, but with ESLint instead of TSLint – Main 13/1, 2021 at 7:47

Jump to the error. Hover over the lightbulb and you will see the option. Click it and you must be getting the prompt to allow it.

This is how I fixed it myself recently.

VS Code ESLint extension has a more detailed guide. There are multiple steps on how to do it (including the other answers here).

This probably is a security thing from Visual Studio Code to prevent bad things from happening in your code.

Humoral answered 13/12, 2020 at 18:55 Comment(1)

Images are overused, but this is a case where it would be a benefit. – Slosh 19/8, 2022 at 18:14

-4

install TypeScript globally
Try to configure your IDE
execute: npm i typescript -g

Aforethought answered 10/12, 2020 at 21:14 Comment(1)

A properly configured Visual Studio Code should work without a global TypeScript installation. – Rhizotomy 11/12, 2020 at 16:26

Recommended topics

Hot tags