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
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

  • By
    Growl-Style Notifications Using MooTools Roar

    When I think of premier MooTools plugin developers, Harald "digitarald" Kirschner is usually one of the first people that come to mind. Harald has built some of MooTools' most popular plugins, including AutoCompleter, FancyUpload, and History Manager. My favorite plugin created...

  • By
    Create a Simple Dojo Accordion

    Let's be honest:  even though we all giggle about how cheap of a thrill JavaScript accordions have become on the web, they remain an effective, useful widget.  Lots of content, small amount of space.  Dojo's Dijit library provides an incredibly simply method by which you can...

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!