If you are using vs code then you can put the below two commands in your vscode user settings(settings.json) file for auto-formatting on save and fixing all the code according to your eslint rules.
You can open user settings by using (Ctrl + Shift + P) and then type User settings.
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true
},
Top answer 1 of 2
18
If you are using vs code then you can put the below two commands in your vscode user settings(settings.json) file for auto-formatting on save and fixing all the code according to your eslint rules.
You can open user settings by using (Ctrl + Shift + P) and then type User settings.
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true
},
2 of 2
0
there is problem in my vscode settings was set "Spaces: 4"
DigitalOcean
digitalocean.com › community › tutorials › linting-and-formatting-with-eslint-in-vs-code
How To Lint and Format Code with ESLint in Visual Studio Code | DigitalOcean
December 12, 2019 - Learn how to set up ESLint in Visual Studio Code to lint and format JavaScript and TypeScript code with auto-fix and best practices.
[AskJS] Autoformatting issue with prettier and vscode
It's possible the vscode formatter isn't using prettier. you can verify by letting it do "formatOnSave" - then run from CLI, prettier --write . -- if it changes the file, you'll know vscode is using a different formatter. There's an extension for prettier formatter, once installed you can specify the "defaultFormatter" option I think? It'll give you some auto complete for available ones -- once prettier extension is installed, prettier shows up in the list. More on reddit.com
6
0
March 28, 2025VS Code Format on Save Performance
this won't help you directly, but prettier has been worse and worse, as well as obsolete in the last year. ESLint does a much better job, faster, and much more reliably and consistently. Moreover, if the issue was the configuration: there are plenty of configs on npm now. Slap an "extends" in the config and you're done. a word on prettier by antfu : https://antfu.me/posts/why-not-prettier prettier was good for what it has done. but now there's no reason to use it. More on reddit.com
9
9
December 11, 2022visual studio code - Setting ESlint as formatter in VSCode settings.json - what is the proper way? - Stack Overflow
Save this question. Show activity on this post. I see 2 options to set Eslint as my default formatted and I'm not sure on the difference between these options: "editor.defaultFormatter": "esbenp.prettier-vscode" or More on stackoverflow.com
ESLint can't be used as a formatter until the ESLint server is fully initialized.
The ESLint plugin seems to have stopped formatting TypeScript files. I searched online, changelogs, and open issues. I cannot find any reference to this. I wondered if maybe we're supposed to m... More on github.com
43
Videos
10:22
Prettier & ESLint in Visual Studio Code: The Ultimate Guide - YouTube
05:37
How to run ESLINT on save (VS Code) - YouTube
21:39
Using ESLint and Prettier in Visual Studio Code - YouTube
00:50
Automate Your Coding Style: Set Up ESLint Auto-Formatting in VSCode ...
00:54
Are you using Prettier? (how to set up in VSCode to format on save) ...
08:16
VSCode and ESLint Setup - YouTube
Aleksandr Hovhannisyan
aleksandrhovhannisyan.com › blog › eslint-format-on-save
How to Format on Save with ESlint | Aleksandr Hovhannisyan
August 22, 2024 - VS Code will auto-format your code when you save the file. If that doesn’t work, try the command Developer: Reload Window instead. This reopens your VS Code workspace. I’ve gone through this process myself enough times to be reasonably confident ...
DEV Community
dev.to › muratcanyuksel › quick-eslint-guide-vscode-eslint-on-save-3ik0
Quick ESLint guide + VsCode ESLint on save - DEV Community
July 11, 2021 - Then run npm install eslint --save-dev in the terminal. Now you have npm_modules and a package.lock.json file too. Anyway, now you need to initiate ESLint in your folder. Write npx eslint --init in the terminal.
Dave Ceddia
daveceddia.com › vscode-use-eslintrc
ESLint + VSCode: How to Format Your Code Using .eslintrc
Open up VSCode’s settings. On a Mac, press Cmd+, or get there through the menus: Code > Preferences > Settings. It’ll open the fancy settings editor, but we need the raw JSON settings file instead. Click that tiny icon in the top-right that looks like a piece of paper with a little arrow. Add these 4 new lines inside the top-level settings object: { // ... "eslint.format.enable": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }
Visual Studio Marketplace
marketplace.visualstudio.com › items
ESLint - Visual Studio Marketplace
Extension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.
GitHub
github.com › zed-industries › zed › discussions › 13602
ESLint and Prettier Format on Save? · zed-industries/zed · Discussion #13602
Although it’s slightly slow, this setup successfully runs both Prettier and ESLint --fix on save for me! "languages": { "JavaScript": { "formatter": { "external": { "command": "pnpm", "arguments": ["exec", "prettier", "--stdin-filepath", "{buffer_path}"] } }, "code_actions_on_format": { "source.fixAll.eslint": true }, "format_on_save": "on" }, "TypeScript": { "formatter": { "external": { "command": "pnpm", "arguments": ["exec", "prettier", "--stdin-filepath", "{buffer_path}"] } }, "code_actions_on_format": { "source.fixAll.eslint": true }, "format_on_save": "on" }, "TSX": { "formatter": { "external": { "command": "pnpm", "arguments": ["exec", "prettier", "--stdin-filepath", "{buffer_path}"] } }, "code_actions_on_format": { "source.fixAll.eslint": true }, "format_on_save": "on" }, }
Author zed-industries
Reddit
reddit.com › r/javascript › [askjs] autoformatting issue with prettier and vscode
r/javascript on Reddit: [AskJS] Autoformatting issue with prettier and vscode
March 28, 2025 -
Hello, I am banging my head against a wall.
For long I had no autoformatting enabled in Vscode, when eslint (or prettier - I use the eslint prettier package) complained about some styling formatting I hovered over the error and clicked "Fix all problems" in Vscode.
But then I thought I finally need to setup the fix/format on save thingy… I enabled format on save in vscode settings And added this in my settings json in my project:
"editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
And it works!
But it seems I have some conflicting rules or stuff. Because I have something like this: some function => {} and when I hit save it formats to add a whitespace inside the curly braces: some function => { }
And here begins my problem. With the space I get an eslint error to remove the whitespace but when saving it adds it again. I am basically stuck lol
I tried to revert the settings in vscode but it keeps happening and I have no idea where to look for to fix this issue?
I will really appreciate any help or hints.
Top answer 1 of 2
3
It's possible the vscode formatter isn't using prettier. you can verify by letting it do "formatOnSave" - then run from CLI, prettier --write . -- if it changes the file, you'll know vscode is using a different formatter. There's an extension for prettier formatter, once installed you can specify the "defaultFormatter" option I think? It'll give you some auto complete for available ones -- once prettier extension is installed, prettier shows up in the list.
2 of 2
1
I’d disable any conflicting rules from your eslint config
IBM
developer.ibm.com › articles › auto-fix-and-format-your-javascript-with-eslint
Autofix and format your JavaScript with ESLint
Get the quick tips and tricks you need to use ESLint to autofix and format your JavaScript.
Artem Sapegin
sapegin.me › blog › vscode-autosave
Better autosave and autoformat in Visual Studio Code by Artem Sapegin
September 16, 2024 - Hide all autofixable ESLint issues so they don’t distract me while I’m writing code, since these issues don’t require any action from me and will be autofixed the next time I save the file. The Visual Studio Code config to achieve this could look like this: // settings.json { // Don’t format files on save "editor.formatOnSave": false, // Autosave files on focus change "files.autoSave": "onFocusChange", // Don’t autosave files with syntax errors "files.autoSaveWhenNoErrors": true, "editor.codeActionsOnSave": { // Trigger lint autofixing on explicit save (not on autosave) "source.fixAll": "explicit" }, "eslint.rules.customizations": [ // Change the severity of all autofixable issues to `off` { "rule": "*", "fixable": true, "severity": "off" } ] }
Scott Sauber
scottsauber.com › 2017 › 06 › 10 › prettier-format-on-save-never-worry-about-formatting-javascript-again
Prettier + Format On Save = Never worry about formatting JavaScript again – Scott Sauber
June 12, 2021 - I was using Nuxt with Prettier Eslint for my first project and I actually had to uncheck the “formatOnSave” option to make it work – if it helps someone. ... […] commit. The major benefit of this is it enforces your coding standards without someone needing to configure and install certain extensions in their IDE to enforce them on save or remembering to do anything.
Reddit
reddit.com › r/vuejs › vs code format on save performance
r/vuejs on Reddit: VS Code Format on Save Performance
December 11, 2022 -
I've recently started experiencing some massive performance problems in VS Code when formatting on save in my nuxt app with prettier.
My windows 11 pc is beefy enough and shouldn't be struggling but I don't know what to do. I've already reinstalled from scratch and disabled extensions. I rely on format on save to be snappy to feel productive.
So what do you all do? Do you use prettier? Just rely on volar for formatting without prettier? Do you not format on save?
Top answer 1 of 5
5
this won't help you directly, but prettier has been worse and worse, as well as obsolete in the last year. ESLint does a much better job, faster, and much more reliably and consistently. Moreover, if the issue was the configuration: there are plenty of configs on npm now. Slap an "extends" in the config and you're done. a word on prettier by antfu : https://antfu.me/posts/why-not-prettier prettier was good for what it has done. but now there's no reason to use it.
2 of 5
4
Win10, prettier, format file on save, crappy old low budget laptop, formats instantly, no lag or something on a small (~200 files, 50 to 200 loc/ file) vue3 project without nuxt
JavaScript in Plain English
javascript.plainenglish.io › the-complete-guide-to-prettier-and-eslint-in-vs-code-save-hours-of-code-formatting-4848cf733b4b
The Complete Guide to Prettier and ESLint in VS Code: Save Hours of Code Formatting | by Blend Visions | JavaScript in Plain English
November 20, 2024 - Enter Prettier and ESLint — your new best friends in Visual Studio Code. In this post, I am going to walk you through the setting up of these powerful tools to make a seamless development experience. No more debates about formatting in code reviews, no more hunting for missing semicolons: just clean, consistent code that lets you focus on what matters — solving problems.
DigitalOcean
digitalocean.com › community › tutorials › workflow-auto-eslinting
How To Enable Linting on Save with Visual Studio Code and ESLint | DigitalOcean
August 27, 2021 - Learn how to lint your code on every file save using ESLint rules and VS Code settings.
Sebastian Weber
doppelmutzi.github.io › 2022-10-02-vue-eslint-prettier-ts-vscode
Automatic code formatting on save with ESLint and Prettier (Vue.js, TypeScript, VS Code, and WebStorm) – 2022 Edition
October 2, 2022 - With WebStorm 2022.2.2 automatic formatting worked for me. Therefore, go to the preferences, “Code Quality Tools”, “ESLint”. Select “Automatic ESLint configuration” and make sure to tick the checkbox “Run eslint –fix on save”.
Top answer 1 of 3
10
"eslint.format.enable": true basically tells VSCode to use ESlint as a formatter for files that are validated by ESLint and to make sure it always uses your default favourite Prettier formatter, you use "editor.defaultFormatter": "esbenp.prettier-vscode" as there can be multiple formatters installed.
2 of 3
9
You can put this into .vscode/settings.json:
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.organizeImports": "explicit",
"source.fixAll": "never"
},
"eslint.format.enable": true,
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"prettier.enable": false
}
What this config does:
- ESLint is used for formatting (check out stylistic)
- You disable prettier
- The autoformat on save will not remove unreachable code, unlike the codeAction
source.fixall
Visual Studio Marketplace
marketplace.visualstudio.com › items
Prettier ESLint - Visual Studio Marketplace
Extension for Visual Studio Code - A Visual Studio Extension to format JavaScript and Typescript code using prettier-eslint package
GitHub
github.com › microsoft › vscode-eslint › issues › 1355
ESLint can't be used as a formatter until the ESLint server is fully initialized. · Issue #1355 · microsoft/vscode-eslint
September 13, 2021 - The ESLint plugin seems to have stopped formatting TypeScript files. I searched online, changelogs, and open issues. I cannot find any reference to this. I wondered if maybe we're supposed to migrate to "code actions on save"? I had no i...
Author charles-allen
Eslint
eslint.style › guide › faq
FAQ | ESLint Stylistic
Add the following settings to your ... Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint · Select the Run eslint --fix on save checkbox....
Reddit
reddit.com › r/node › why use prettier if eslint can format?
r/node on Reddit: Why use prettier if ESLint can format?
July 27, 2022 -
I've heard ESLint can format but I haven't found a clear answer why it seems prettier is used instead of the ESLint formatter. Whenever I try to look it up most comments neglect to mention that ESLint can also format so it's not obvious why prettier would be needed at all.
Top answer 1 of 21
106
Because Prettier generally does a better job of formatting than ESLint. This is for three reasons: It's really fast, particularly in comparison to ESLint. Prettier is designed to format documents and that's it, which means it can be a lot simpler than ESLint, at least architecturally, especially as there's relatively little in the way of plugins. So if you just need to format your code quickly in one chunk, Prettier is the way to go. Prettier is already preconfigured, so it's also usually quicker to get started with. ESLint has some default formatting rules IIRC, but relatively minimal ones. To ensure every detail is formatted the same way, you need to put a lot of effort into configuring ESLint, which most people don't really want to do. Related: Conceptually, Prettier formats holistically, which is to say, it takes a whole document and applies its formatting to every single syntax node - generally, this means that you get very close to having exactly one valid output, no matter how the input file is formatted. ESLint, on the other hand, not only requires each formatting rule to be configured individually, but also applies them generally individually, so it's easier to have cases where you can get inconsistent behaviour depending on the original formatting of the file.
2 of 21
11
prettier does a better job, is faster, and can format more than js