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 Overflow
🌐
Prettier
prettier.io › docs › plugins
Plugins · Prettier
Plugins are ways of adding new languages or formatting rules to Prettier. Prettier’s own implementations of all languages are expressed using the plugin API. The core prettier package contains JavaScript and other web-focused languages built in. For additional languages you’ll need to install ...
🌐
React
react.dev › learn › editor-setup
Editor Setup – React
We recommend disabling all formatting rules in your ESLint preset using eslint-config-prettier so that ESLint is only used for catching logical mistakes.
Discussions

visual studio code - In VSCode, how do I effectively run eslint --fix and prettier --write on "Format Document"? - Stack Overflow
For context, I've locally installed prettier, eslint, and their respective VS Code extensions. I used the word "effectively" in my title because I don't literally need to run eslint --fix; More on stackoverflow.com
🌐 stackoverflow.com
How can I disable the error (prettier/prettier) on eslint?
While coding, I was not using eslint. Now I installed it and it has flooded my editor with prettier/prettier errors, which by no way seem like they make my code prettier. I am looking to find a way... More on stackoverflow.com
🌐 stackoverflow.com
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.com
🌐 r/webdev
8
2
November 20, 2014
eslint with prettier for Java? : java
🌐 r/java
🌐
npm
npmjs.com › package › @connorrose › eslint-plugin-prettier
@connorrose/eslint-plugin-prettier - npm
This plugin works best if you disable all other ESLint rules relating to code formatting, and only enable rules that detect patterns in the AST. (If another active ESLint rule disagrees with prettier about how code should be formatted, it will be impossible to avoid lint errors.) You can use eslint-config-prettier to disable all formatting-related ESLint rules.
      » npm install @connorrose/eslint-plugin-prettier
    
Published   Aug 12, 2020
Version   3.1.4
Author   Teddy Katz as forked by Connor Rose Delisle
🌐
Omiid
omiid.me › notebook › 44 › adding-prettier-to-eslint
Adding prettier to eslint | Omid Sayfun
April 10, 2025 - Learn how to integrate Prettier with ESLint to enhance code quality and style checks, and troubleshoot common configuration errors.
🌐
npm
npmjs.com › package › prettier-eslint
prettier-eslint - npm
May 7, 2025 - The config to use for formatting with ESLint. Can be overridden with filePath. The options to pass for formatting with prettier. If not provided, prettier-eslint will attempt to create the options based on the eslintConfig (whether that's provided or derived via filePath).
      » npm install prettier-eslint
    
Published   May 07, 2025
Version   16.4.2
Author   Kent C. Dodds
🌐
Medium
zakimohammed.medium.com › react-prettier-eslint-configuration-22bf2cd77127
React Prettier ESLint Configuration | by Shaikh Zaki Mohammed | Medium
April 7, 2024 - React Prettier ESLint Configuration Soul pretty but code prettier. We now run by this quote, to maintain our code formatting top notch. Thanks to Prettier to take away this burden from the dev …
Find elsewhere
Top answer
1 of 2
10

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.

2 of 2
1

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 :).

🌐
Biome
biomejs.dev
Biome, toolchain of the web
Faster than Prettier when formatting 171,127 lines of code in 2,104 files with an Intel Core i7 1270P. Try the Biome formatter on the playground or directly on your project: ... Biome is a performant linter for JavaScript, TypeScript, JSX, CSS and GraphQL that features 455 rules from ESLint, TypeScript ESLint, and other sources.
🌐
GitHub
github.com › prettier › eslint-plugin-prettier
GitHub - prettier/eslint-plugin-prettier: ESLint plugin for Prettier formatting · GitHub
ESLint plugin for Prettier formatting. Contribute to prettier/eslint-plugin-prettier development by creating an account on GitHub.
Author   prettier
🌐
Reddit
reddit.com › r › webdev › comments › 8jh1ol › using_prettier_vs_eslint_and_let_the_developers
r/webdev - Using Prettier vs Eslint and let the developers learn the rules
November 20, 2014 -

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.

🌐
Medium
medium.com › @fabianterh › an-opinionated-guide-to-setting-up-prettier-with-eslint-51809b1b3043
An opinionated guide to setting up Prettier with ESLint | by Fabian Terh | Medium
September 2, 2018 - Install prettier and eslint-plugin-prettier. This is the plugin that is responsible for detecting differences between your code’s formatting and Prettier’s rules.
🌐
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
🌐
Prettier
prettier.io › docs › options
Options · Prettier
Prettier will make both shorter and longer lines, but generally strive to meet the specified printWidth. Remember, computers are dumb. You need to explicitly tell them what to do, while humans can make their own (implicit) judgements, for example on when to break a line. In other words, don’t try to use printWidth as if it was ESLint’s max-len – they’re not the same.
🌐
MoldStud
moldstud.com › articles › developers faq › react web developers questions › ultimate guide - setting up eslint and prettier for your typescript react projects
Ultimate Guide - Setting Up ESLint and Prettier for Your TypeScript React Projects
August 5, 2025 - In this configuration, `@typescript-eslint/parser` allows parsing TypeScript files, while `plugin:@typescript-eslint/recommended` ensures adherence to well-established best practices within the TypeScript ecosystem. Noteworthy is the setting for React, which automatically detects the installed version, reducing manual updates. Another significant aspect is aligning your linter with your code formatter. Integrate both tools to prevent rule conflicts by including `'prettier'` in the extends array.
🌐
NestJS
docs.nestjs.com › first-steps
Documentation | NestJS - A progressive Node.js framework
Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming).
🌐
Prettier
prettier.io › docs › integrating-with-linters
Integrating with Linters · Prettier
Linters usually contain not only code quality rules, but also stylistic rules. Most stylistic rules are unnecessary when using Prettier, but worse – they might conflict with Prettier! Use Prettier for code formatting concerns, and linters for code-quality concerns, as outlined in Prettier vs.
🌐
Prettier
prettier.io › docs › install
Install · Prettier
Run Prettier from your editor for the best experience. Use eslint-config-prettier to make Prettier and ESLint play nice together.
🌐
Ben Ilegbodu
benmvp.com › blog › prettier-eslint
Prettier + ESLint = ❤️ | Ben Ilegbodu
January 30, 2021 - Prettier is a highly-opinionated code formatter intended to remove discussions about code style in code reviews. By default, we run prettier --write by itself and it formats our code.