How to Fix ESLint Errors Upon Save in VS Code

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:

jq for JSON

React usePrevious Hook

Set a Default Node Version with nvm

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.

fetch API
One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn’t really made for what we’ve been using it for. We’ve done well to create elegant APIs around XHR but we know we can do better. Our effort to…

Dynamic Waveform Visualizations with wavesurfer.js
Waveform images are an awesome addition to boring audio widgets. They can be functional as well as aesthetically pleasing, allowing users to navigate audio visually. I recently found wavesurfer.js, an amazing waveform image utility that uses to Web Audio API to create super customizable…