How to Fix ESLint Errors Upon Save in VS Code

By  on  

Two of the most prominent utilities in web development today are ESLint and Microsoft's Visual Studio Code. I enjoy using both, and I love the integration between both tools, but warnings from ESLint inside Visual Studio Code aren't fulfilling -- I'd rather lint errors be fixed each time I save.

Complete the following steps to make Visual Studio Code fix any lint errors when a file is saved:

  • Open the following file path: ~/Library/Application Support/Code/User/settings.json
  • Within the JSON structure, add the following:
{
    // ... Existing JSON here ...
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    }
}

Every time you save applicable files within Visual Studio Code, ESLint will be run to fix any errors.

For me this is a massive time savings. There is some risk that this task might take a while one large files but for me it's worth it.

Recent Features

  • By
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    Detect Vendor Prefix with JavaScript

    Regardless of our position on vendor prefixes, we have to live with them and occasionally use them to make things work.  These prefixes can be used in two formats:  the CSS format (-moz-, as in -moz-element) and the JS format (navigator.mozApps).  The awesome X-Tag project has...

  • By
    Table Cell and Position Absolute

    If you follow me on Twitter, you saw me rage about trying to make position: absolute work within a TD element or display: table-cell element.  Chrome?  Check.  Internet Explorer?  Check.  Firefox?  Ugh, FML.  I tinkered in the console...and cussed.  I did some researched...and I...

Discussion

  1. This is going to save a lot of my time! Thanks a lot for this :)

  2. It would better to save this in the project root under .vscode/settings.json to ensure the config is consistent across the whole team – otherwise it kinda defeats the point of having eslint.

    https://github.com/olmesm/better-cypress-axe/blob/master/.vscode

  3. johnyysmith

    Tnx for the info, was useful to read. I use Microsoft’s Visual Studio Code and I like how it works.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!