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

AngularVisual Studio-CodeEslintVscode ExtensionsTslint

Angular Problem Overview

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?

Angular Solutions

Solution 1 - Angular

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 - Angular

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

Solution 3 - Angular

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:

> enter image description here

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 - Angular

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 - Angular

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.

Solution 6 - Angular

I fixed the issue in this easy way:

File -> Save Workspace As...

by saving the workspace, vscode detect some libraries and work better in files

Solution 7 - Angular

1- press ctrl + shift + p in windows or linux or command + shift + p in mac

2- type TSLint: Manage workspace library execution

TSLint: Manage workspace library execution

3- choose Always enable workspace library execution

Always enable workspace library execution

or you can save workspace file => Save workspace as

save workspace

Solution 8 - Angular

Answering QUESTION 2: yes you should uninstall TSLint and migrate to ESLint since TSLint has been deprecated from Microsoft. This link might help you.

Solution 9 - Angular

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

https://github.com/microsoft/vscode-eslint Here is a link with a more detailed guide. Multiple steps on how to do it (including the other answers here)

This probably is a security thing from VScode to prevent bad things from happening in your code

Solution 10 - Angular

  1. install globally typescript
  2. a;Try to configure your IDE
  3. execute: npm i typescript -g
Categories
Recommended Angular Solutions
Recommended Visual Studio-Code Solutions
Recommended Eslint Solutions

Previous Solution:

What is the difference between functions and classes to create reusable widgets?

FlutterFunctionClassDartFlutter Widget

Next Solution:

Creating rounded corners using CSS

Cross BrowserRounded CornersCss

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser1186050View Question on Stackoverflow
Solution 1 - Angularuser2442961View Answer on Stackoverflow
Solution 2 - AngularTuấn NguyễnView Answer on Stackoverflow
Solution 3 - AngularGaurav GuptaView Answer on Stackoverflow
Solution 4 - AngularBreno AllenCSView Answer on Stackoverflow
Solution 5 - AngularVikas SahuView Answer on Stackoverflow
Solution 6 - AngularAli ZareshahiView Answer on Stackoverflow
Solution 7 - AngularHussein Abd ElazizView Answer on Stackoverflow
Solution 8 - AngularZerotwelveView Answer on Stackoverflow
Solution 9 - AngularSven ElmendorpView Answer on Stackoverflow
Solution 10 - AngularDmytro DovgalView Answer on Stackoverflow