TSLint in Visual Studio Code

Suggested Videos
Part 13 - Angular cli generate class, interface and enum | Text | Slides
Part 14 - Linting TypeScript | Text | Slides
Part 15 - Angular tslint rules | Text | Slides

In this video we will discuss, How to display linting errors in Visual Studio Code


At the moment, our editor Visual Studio Code does not show linting errors. It would be nice if Visual Studio Code can display these linting errors so we can fix them as we are writing code. To achieve this install Visual Studio Code extension - TSLint.


To install this extension

1. Click on the "View" menu in "Visual Studi Code" and select "Extensions" from the context menu
2. In the "Search Extensions in Marketplace" textbox type TSLint
3. Click the "install" button
4. Once installed, restart Visual Stduio Code to activate TSLint

At this point, in Visual Studio Code we will be able to see linting errors and we have the opportunity to fix them as we are developing our application.


Once you click on the line where you see a linting error, a light bulb appears on the left margin and when you click on the light bulb you will see 1 to 3 options


You can click on the respective options

1. To have the linting errors fixed automatically depending on whether the issue supports automatic fix or not
2. To disable that specific rule
3. To get documentation of the rule

To disable linting in VS code

1. Click on the "View" menu in "Visual Studi Code" and select "Extensions" from the context menu
2. In the "EXTENSIONS" window, expand "INSTALLED" section
3. Click the "SETTINGS" icon against TSLint extension
4. Select "Disable (Always)" option
5. Restart Visual Studio Code