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
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

Incredible Demos

  • By
    Create a Dynamic Flickr Image Search with the Dojo Toolkit

    The Dojo Toolkit is a treasure chest of great JavaScript classes.  You can find basic JavaScript functionality classes for AJAX, node manipulation, animations, and the like within Dojo.  You can find elegant, functional UI widgets like DropDown Menus, tabbed interfaces, and form element replacements within...

  • By
    Drag & Drop Elements to the Trash with MooTools 1.2

    Everyone loves dragging garbage files from their desktop into their trash can. There's a certain amount of irony in doing something on your computer that you also do in real life. It's also a quick way to get rid of things. That's...

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!