Auto fix TSLint Warnings

AngularTypescriptWarningsTslint

Angular Problem Overview


    [64, 1]: space indentation expected
    [15, 27]: Missing semicolon
    [109, 36]: missing whitespace
    [111, 24]: missing whitespace
    [70, 1]: Consecutive blank lines are forbidden

I keep getting warnings like these from TSLint. There are huge amount of warnings, and it will be very difficult to fix it manually.

I was looking for a way which can auto-fix most of the warnings.

Angular Solutions


Solution 1 - Angular

You can use the --fix option of TSLint to automatically fix most warnings. This might look something like this in a common use case:

tslint --fix -c ./config/tslint.json 'src/**/*{.ts,.tsx}'

Keep in mind that this will overwrite your source code. While this is safe 99.9% of the time, I recommend the following workflow:

  1. Commit the changes you have made to your code
  2. Run TSLint with the --fix flag like above
  3. Quickly review the changes TSLint has made
  4. Make a new commit with these changes, or simply amend them to your previous commit

This way, you'll never be taken surprise by a rogue autocorrection gone wrong.

Solution 2 - Angular

tslint --fix --project ./tsconfig.json

This is auto fix all Error is root folder

Solution 3 - Angular

With @angular/cli you can use ng lint --fix

Solution 4 - Angular

May be this could help some one looking for autoFix on save!

we can make tslint warnings to get autofixed on save. To do this, go to tslint.json file and add the below settings. [Note: This setting works with latest TSLint and not the deprecated one].

  "source.fixAll.tslint": true

After updating this, go to any file and try giving some spaces and it shows tslint warning message as "trailing whitespace" and when you save (Ctrl + S), this warning will get disappear. Though it appears manually, we usually tend to try saving the file once edited and by that time it will get fixed automatically.

Happy coding!

Solution 5 - Angular

If you using IntelliJ Idea or WebStrom, then you can create File Watcher in Settings > Tools by the following configuration:

enter image description here

On save (Ctrl + s), your current file will be fixed.

Solution 6 - Angular

If you using webpack . You can use tslint-loader:

Add this to webpack module rules:

{
    test: /\.ts$/,
    loader: 'tslint-loader',
    enforce: 'pre',
    options: {
      fix: true
    }
  }

Read more here: tslint-loader

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
QuestionANKIT HALDARView Question on Stackoverflow
Solution 1 - AngularJKillianView Answer on Stackoverflow
Solution 2 - AngularANKIT HALDARView Answer on Stackoverflow
Solution 3 - AngularsplashView Answer on Stackoverflow
Solution 4 - AngularViswaView Answer on Stackoverflow
Solution 5 - AngularGregor AlbertView Answer on Stackoverflow
Solution 6 - AngularCaal Saal VIView Answer on Stackoverflow