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.

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?

score 472 · Answer 1 · edited Aug 19 '22 at 18:05

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.

edited Aug 19 '22 at 18:05

Peter Mortensen

30,738
21
105
131

answered Dec 10 '20 at 09:23

user2442961

4,587
1
11
4

11

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. – Collin Barrett Dec 16 '20 at 15:36
8

@CollinM.Barrett From the same menu choose "Always enable workspace library execution" – Zahema Dec 18 '20 at 21:09
Yes, this solution worked fine for me by having my ecosystem (visual code, angular, etc.) up to the day. – Martin Zamora May 01 '21 at 00:34
2

After vscode restart, it shows again. Downvoting. – rofrol Dec 14 '21 at 16:55

score 85 · Answer 2 · edited Aug 19 '22 at 18:00

85

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

edited Aug 19 '22 at 18:00

Peter Mortensen

30,738
21
105
131

answered Dec 10 '20 at 07:56

Tuấn Nguyễn

858
3
7

10

@user1186050 ctrl + shift + p > TSLint: Manage workspace library execution > Enter > Enable workspace library execution – Ivan Frolov Dec 11 '20 at 10:31
2

After vscode restart, it shows again. Downvoting. – rofrol Dec 14 '21 at 16:55

score 51 · Answer 3 · edited Aug 19 '22 at 18:43

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.

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. — Ali Eshghi, Mar 11 '21 at 22:09
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. — Meryan, Apr 17 '21 at 06: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. — Arcsector, Feb 14 '23 at 08:52

score 44 · Answer 4 · edited Aug 19 '22 at 18:34

44

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

edited Aug 19 '22 at 18:34

Peter Mortensen

30,738
21
105
131

answered Jan 22 '21 at 12:15

Breno AllenCS

573
3
8

1

After vscode restart, it shows again. Downvoting. – rofrol Dec 14 '21 at 16:57

score 35 · Answer 5 · edited Aug 19 '22 at 18:26

35

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.

edited Aug 19 '22 at 18:26

Peter Mortensen

30,738
21
105
131

answered Dec 15 '20 at 18:55

Vikas Sahu

459
3
3

1

After vscode restart, it shows again. Downvoting. – rofrol Dec 14 '21 at 16:57

score 13 · Answer 6 · edited Aug 19 '22 at 18:13

13

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.

edited Aug 19 '22 at 18:13

Peter Mortensen

30,738
21
105
131

answered Dec 12 '20 at 18:39

Ali Zareshahi

508
5
15

3

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! – Lauro Jan 04 '21 at 18:25
@Lauro your welcome, i am happy for fix this – Ali Zareshahi Jan 13 '21 at 19:18
1

Thanks. You inspired me. Just reboot the editor solved my problem. – Frank Wang Sep 02 '21 at 03:16
1

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. – N.Y Sep 05 '21 at 18:21

score 13 · Answer 7 · edited Aug 19 '22 at 18:38

13

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

edited Aug 19 '22 at 18:38

Peter Mortensen

30,738
21
105
131

answered Sep 22 '21 at 10:42

Hussein AbdElaziz

454
4
6

score 2 · Answer 8 · edited Aug 19 '22 at 18:17

2

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

edited Aug 19 '22 at 18:17

Peter Mortensen

30,738
21
105
131

answered Dec 14 '20 at 08:03

Zerotwelve

2,087
1
9
24

Just to clarify and be overly explicit - despite the fact that Angular uses **Type**Script, we no longer are supposed to use **TS**Lint but rather **ES**Lint, even if we code not using **Ecma**Script. Is that correctly understood? – Konrad Viltersten Jan 11 '21 at 16:05
Yes exactly. Just follow the [migration guide](https://code.visualstudio.com/api/advanced-topics/tslint-eslint-migration) and basically everything will work as before, but with ESLint instead of TSLint – Zerotwelve Jan 13 '21 at 07:47

score 0 · Answer 9 · edited Aug 19 '22 at 18:16

0

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.

edited Aug 19 '22 at 18:16

Peter Mortensen

30,738
21
105
131

answered Dec 13 '20 at 18:55

Sven Elmendorp

39
1
8

Images are overused, but this is a case where it would be a benefit. – Peter Mortensen Aug 19 '22 at 18:14

score -4 · Answer 10 · edited Aug 19 '22 at 18:11

-4

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

edited Aug 19 '22 at 18:11

Peter Mortensen

30,738
21
105
131

answered Dec 10 '20 at 21:14

Dmytro Dovgal

3

2

A properly configured Visual Studio Code should work without a global TypeScript installation. – BillyTom Dec 11 '20 at 16:26

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

10 Answers10

Linked