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.
Answer from anothermh on Stack Overflowvisual studio code - In VSCode, how do I effectively run eslint --fix and prettier --write on "Format Document"? - Stack Overflow
How can I disable the error (prettier/prettier) on eslint?
Using Prettier vs Eslint and let the developers learn the rules
I maintain my team's react native and nodejs app eslint rules and prettier configs. Prettier is wonderful, in my opinion. It takes the decision making and team preference out of code formatting, allowing for PRs to focus on structure, logic, and quality. Our eslint rules are configured to error in the developer editor (usually vscode). Most of what eslint catches for us are vars/lets/consts, braceless flow controls, else returns. We also have the complexity rule on.
Prettier doesn't fix code bugs, it fixes the fixation of individuals and teams that think they know the singular best code formatting style.
One thing that helps with Prettier is either prettier on save - my preference, or prettier on commit. Setting it up as the project begins will help future PRs have less formatting churn, making history cleaner in the future.
More on reddit.comeslint with prettier for Java? : java
Videos
» npm install @connorrose/eslint-plugin-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 :).
Instead of disabling linting for the file, you can instead disable prettier within the eslintrc.js config file:
module.exports = {
root: true,
extends: '@react-native-community',
rules: {
'prettier/prettier': 0,
},
};
To get rid of conflicting rules when using both - prettier and eslint there is a eslint-config-prettier package.
Run npm install --save-dev eslint-config-prettier to install and then in eslintrc.js (or wherever you have the eslint rules defined) add:
{
"extends": [
...,
"@react-native-community",
"prettier"
]
}
Now eslint should respect prettier rules. Here is a link to GH repo.
I just started reading up about Prettier. I learned that it pretty much checks for any errors in your code and automatically fixes them for you. I was thinking though, how will a developer know what they are doing wrong if they're never told? Eslint for example will tell you what error you have made in the code and you must fix it before committing. This means that most developers will not make that same mistake a second time. However, with Prettier is auto fixes it for them and the developer never really know what they did wrong. Teach a man to fish and all that. Apologies I have never used Prettier so excuse the ignorance.
I maintain my team's react native and nodejs app eslint rules and prettier configs. Prettier is wonderful, in my opinion. It takes the decision making and team preference out of code formatting, allowing for PRs to focus on structure, logic, and quality. Our eslint rules are configured to error in the developer editor (usually vscode). Most of what eslint catches for us are vars/lets/consts, braceless flow controls, else returns. We also have the complexity rule on.
Prettier doesn't fix code bugs, it fixes the fixation of individuals and teams that think they know the singular best code formatting style.
One thing that helps with Prettier is either prettier on save - my preference, or prettier on commit. Setting it up as the project begins will help future PRs have less formatting churn, making history cleaner in the future.
Prettier is typically used along side linters as a time saver, it isn't really meant to replace them. https://prettier.io/docs/en/comparison.html