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
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • By
    Using MooTools For Opacity

    Although it's possible to achieve opacity using CSS, the hacks involved aren't pretty. If you're using the MooTools JavaScript library, opacity is as easy as using an element's "set" method. The following MooTools snippet takes every image with the "opacity" class and sets...

  • By
    Animated AJAX Record Deletion Using jQuery

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with jQuery JavaScript. The PHP - Content & Header The following snippet goes at the...

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!