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:
- 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.
![LightFace: Facebook Lightbox for MooTools]()
One of the web components I've always loved has been Facebook's modal dialog. This "lightbox" isn't like others: no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much." With Facebook's dialog in mind, I've created LightFace: a Facebook lightbox...
![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...
![iPhone Click Effect Using MooTools or jQuery]()
One thing I love about love about Safari on the iPhone is that Safari provides a darkened background effect when you click a link. It's the most subtle of details but just enforces than an action is taking place. So why not implement that...
![Multiple Backgrounds with CSS]()
Anyone that's been in the web development industry for 5+ years knows that there are certain features that we should have had several years ago. One of those features is the HTML5 placeholder; we used JavaScript shims for a decade before placeholder came...
This is going to save a lot of my time! Thanks a lot for this :)
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
Tnx for the info, was useful to read. I use Microsoft’s Visual Studio Code and I like how it works.