» npm install prettier-eslint-cli
Videos
UPDATE 2023: ESLint is deprecating formatting rules and recommend you use a source code formatter instead.
tl;dr: Use eslint-config-prettier in eslint, and run prettier separately. You can ignore the rest.
From v8.53.0 onwards, you will see a deprecation warning if those formatting rules are enabled in your config. You should still use eslint-config-prettier to disable conflicting rules until the rules are removed in a new major release.
ESLint contains many rules and those that are formatting-related might conflict with Prettier, such as arrow-parens, space-before-function-paren, etc. Hence using them together will cause some issues. The following tools have been created to use ESLint and Prettier together.
prettier-eslint |
eslint-plugin-prettier |
eslint-config-prettier |
|
|---|---|---|---|
| What it is | A JavaScript module exporting a single function. | An ESLint plugin. | An ESLint configuration. |
| What it does | Runs the code (string) through prettier then eslint --fix. The output is also a string. |
Plugins usually contain implementations for additional rules that ESLint will check for. This plugin uses Prettier under the hood and will raise ESLint errors when your code differs from Prettier's expected output. | This config turns off formatting-related rules that might conflict with Prettier, allowing you to use Prettier with other ESLint configs like eslint-config-airbnb. |
| How to use it | Either calling the function in your code or via prettier-eslint-cli if you prefer the command line. |
Add it to your .eslintrc. |
Add it to your .eslintrc. |
| Is the final output Prettier compliant? | Depends on your ESLint config | Yes | Yes |
Do you need to run prettier command separately? |
No | No | Yes |
| Do you need to use anything else? | No | You may want to turn off conflicting rules using eslint-config-prettier. |
No |
For more information, refer to the official Prettier docs.
It's the recommended practice to let Prettier handle formatting and ESLint for non-formatting issues, prettier-eslint is not in the same direction as that practice, hence prettier-eslint is not recommended anymore. You can use eslint-plugin-prettier and eslint-config-prettier together.
- Use
eslint-config-prettierto turn-off eslint rules that are unnecessary or might conflict with Prettier. See 1st line in readme: eslint-config-prettier. - Use
eslint-plugin-prettierto run Prettier as an Eslint-rule. See 1st line in readme: eslint-plugin-prettier - Use both to take advantage of both tools. See recommended configuration: eslint-plugin-prettier.
This way you use
pluginto run Prettier as an Eslint-rule, andconfigto turn-off eslint rules that are unnecessary or might conflict with Prettier. - You can ignore
prettier-eslint
» npm install eslint-plugin-prettier
» npm install eslint-config-prettier
» npm install prettier-eslint
VSCode doesn't support chaining multiple formatters. More at this related question.
But chaining formatters isn't the answer to your problem. If you're using Prettier and ESLint properly then they do not overlap in their ruleset. You can use eslint-plugin-prettier to format the document with only ESLint and it will run Prettier as an ESLint rule. Adding eslint-config-prettier disables any ESLint rules that would conflict with Prettier.
Afterwards, running eslint --fix would apply both your ESLint and Prettier rules in a single format.
If you would like to use ESLint with other filetypes then you need to find ESLint plugins that work for those filetypes. They require installation and configuration unique to each plugin. An example is eslint-plugin-jsonc to add support for JSONC.
In package.json:
{
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^6.10.0",
"@typescript-eslint/parser": "^6.10.0",
"eslint": "^8.53.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.1",
"prettier": "^3.0.3",
"typescript": "^5.2.2"
}
}
In .eslintrc.json:
{
"extends": [
"plugin:prettier/recommended" // must be last element in "extends"
],
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint"
],
"settings": {
"import/parsers": {
"@typescript-eslint/parser": [
".ts"
]
},
}
}
Set your Prettier rules in .prettierrc.json, for example:
{
"printWidth": 100
}
Now eslint --fix will format the document in a single pass.
For VSCode, install both the dbaeumer.vscode-eslint and the esbenp.prettier-vscode extensions. These each require you to have the corresponding npm package installed, whether locally in your app or globally on your device. You may also need to configure VSCode so that it can find the packages, depending on how they were installed.
Then when you run Format Document With and select ESLint it will apply both your ESLint and Prettier rules with the equivalent of eslint --fix. For example, leaving a trailing space will trigger this INFO alert:
Delete `·` eslint (prettier/prettier)
Formatting the document with ESLint resolves the issue.
This bugged me ALOT as well. There are a lot of resources online about different ways. The problem is most of them are outdated, don't work, require some config adjustments, and have their own set of trade-offs.
Here was the solution I ended up going with:
I just added this to my users keybindings.json:
{
"key": "cmd+alt+f",
"command": "workbench.action.terminal.sendSequence",
"args": {
"text": "npx prettier --write '${file}' > /dev/null 2>&1 && npx eslint_d --fix '${file}' > /dev/null 2>&1 & \u000D" // The CLI command to run "\u000D" is just the return key.
},
"when": "editorTextFocus"
},
That command uses eslint_d but thats just a performance enhancement. You could just as easily use eslint instead.
If you want to get it to run on save. You can try vscode-run-on-save
The benefit of this was it just works across any flavor of vscode like cursor, windsurf, etc. I don't have to muck with configs or any other setup.
Hope this helps someone else :).