Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / Typescript

Analyze & Fix your Angular 6 code using TSLint

5.00/5 (1 vote)
24 Sep 2018CPOL1 min read 17.8K  
Analyze and fix your Angular 6 code using TSLint

As per TSLint Official site https://palantir.github.io/tslint/, TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. It is widely supported across modern editors & build systems and can be customized with your own lint rules, configurations, and formatters.

Develop quality code is highly desired hence it's highly recommended that, before code check-in to Source Control, do TSLint check and fix the possible errors.

Angular Applications are already integrated with TSLint, tslint.json file can be found at the root of your project.

TSLint is also defined as dev dependency in package.json.

Analyze & Fix your Angular 6 code using TSLint

TSLint using CLI

Angular CLI has extended support for linting, to scan the code for issues, run the below command.

Ng lint

Analyze & Fix your Angular 6 code using TSLint

You can see a list of errors in the console windows, however, it's difficult to read and fix.

CLI also has support to auto fix the issues (most common), to scan and fix, use the below command.

Ng lint material-app --fix (here material-app is the name of the application)

Analyze & Fix your Angular 6 code using TSLint

Note: There may be few issues left which you need to fix manually.

TSLint using Visual Code

Open VS Code, click on Extensions (Ctrl + Shift + X).

Search TSLint in the search box.

Click on Install, once Installed, restart VS Code to complete the installation.

Analyze & Fix your Angular 6 code using TSLint

In the currently opened file, issues will be highlighted, bring cursor on the issue and press control + dot will prompt for the options as below image.

Fix the current issue or click on "Fix all auto fixable options" will fix all issues.

Analyze & Fix your Angular 6 code using TSLint

In case you want to fix using Command palette, then by pressing Ctrl + Shift + P will open the command palette, select or type "TSLint: Fix all auto-fixable problems" command to fix all issues.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)