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

🌐
DEV Community
dev.to › nwhitmont › configuring-prettier-and-eslint-in-your-vscode-typescript-project-3fa9
Configuring Prettier and ESLint in Your VSCode TypeScript Project - DEV Community
December 20, 2024 - ESLint: The style deputy, enforcing code quality and best practices through customizable rules. Say goodbye to linting inconsistencies! ... Open your terminal and navigate to your project directory. Install the necessary packages using npm: npm install --save-dev prettier eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier
🌐
Khalil Stemmler
khalilstemmler.com › blogs › tooling › prettier
How to use Prettier with ESLint and TypeScript in VSCode | Khalil Stemmler
January 21, 2022 - In this guide, we'll explain how to use Prettier with ESLint, delegating the responsibility of code convention definition to ESLint, and the responsibility of formatting to Prettier.
🌐
GitHub
github.com › prettier › prettier-vscode
GitHub - prettier/prettier-vscode: Visual Studio Code extension for Prettier · GitHub
// .vscode/settings.json { "editor.codeActionsOnSave": { "source.fixAll.prettier": "explicit", "source.fixAll.eslint": "explicit", }, }
Author   prettier
🌐
Robin Wieruch
robinwieruch.de › prettier-eslint
How to use Prettier with ESLint
How to combine Prettier and ESLint for VSCode, Sublime, or any other IDE/editor. You will get to know the ESLint Prettier Rules that are needed to get you started ...
🌐
GitHub
github.com › idahogurl › vs-code-prettier-eslint
GitHub - idahogurl/vs-code-prettier-eslint: A Visual Studio Code Extension to format JavaScript and TypeScript code using the prettier-eslint package.
A Visual Studio Code Extension to format JavaScript and TypeScript code using the prettier-eslint package. - idahogurl/vs-code-prettier-eslint
Starred by 214 users
Forked by 53 users
Languages   JavaScript 98.0% | Shell 2.0%
🌐
DEV Community
dev.to › drunckj › setting-up-code-formatting-with-eslint-typescript-and-prettier-in-visual-studio-code-44an
Setting up Code Formatting with ESLint, TypeScript, and Prettier in Visual Studio Code - DEV Community
October 25, 2023 - { "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaVersion": 12, "sourceType": "module" }, "plugins": ["@typescript-eslint"], "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier" ], "rules": { "@typescript-eslint/no-unused-vars": "error", "@typescript-eslint/consistent-type-definitions": ["error", "type"] }, "env": { "browser": false, "es2021": true } }
🌐
YouTube
youtube.com › watch
Prettier & ESLint in Visual Studio Code: The Ultimate Guide - YouTube
Learn how to set up Prettier and ESLint in Visual Studio Code to keep your code looking sharp and error-free!Prettier and ESLint each have their own role: Pr...
Published   September 1, 2024
Find elsewhere
🌐
Visual Studio Marketplace
marketplace.visualstudio.com › items
VSCode Prettier ESLint - Visual Studio Marketplace
Extension for Visual Studio Code - VSCode extension to format your JavaScript and TypeScript using prettier-eslint
🌐
YouTube
youtube.com › microsoft visual studio
Using ESLint and Prettier in Visual Studio Code - YouTube
Josh shows how you can use ESLint to set rules for your JavaScript/TypeScript code and how you can easily format it. He uses VS Code here, but you can do the...
Published   May 9, 2024
Views   5K
🌐
GitHub
gist.github.com › mckeeh3 › 4b6a4ab008329b182fc80fbe85cc9aff
VS Code, ESLint, Prettier Setup NodeJS projects · GitHub
Go to Configure Prettier Options for rule definitions. ... In the package.json file add the following lines. Install ESLint globally if not already installed.
🌐
Microsoft Learn
learn.microsoft.com › en-us › shows › visual-studio-toolbox › using-eslint-and-prettier-in-visual-studio-code
Using ESLint and Prettier in Visual Studio Code | Microsoft Learn
Josh shows how you can use ESLint to set rules for your JavaScript/TypeScript code and how you can easily format it. He uses VS Code here, but you can do the same things in Visual Studio. Chapters 00:00 - Introduction 02:10 - Configuring VS Code to run ESLint and Prettier 03:15 - Running ESLint ...
🌐
Francisco Moretti
franciscomoretti.com › blog › how-to-set-up-prettier-and-eslint-in-vs-code-for-next-js
How to Set Up Prettier and ESLint in VS Code for Next.js
June 25, 2023 - To ensure that ESLint and Prettier work together seamlessly, we need to install a package called eslint-config-prettier. This package disables any ESLint rules that conflict with Prettier's formatting.
🌐
DEV Community
dev.to › chgldev › getting-prettier-eslint-and-vscode-to-work-together-3678
Getting Prettier, Eslint and Vscode to work together - DEV Community
July 24, 2019 - First of all install the Vscode plugins ESLint and Prettier - Code formatter and make sure they're enabled.
🌐
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.
🌐
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 - That is the reality of today’s world and what if I told you there is a way to automate all of this? Today, meet Prettier and ESLint — my friends you have in VS Code and they will save you time.) formatting code, fixing indentation, and hunting down those pesky semicolons.
🌐
Avenuecode
blog.avenuecode.com › how-to-integrate-prettier-and-eslint-in-vscode-and-react
How to Integrate Prettier and ESLint in VSCode and React
October 12, 2022 - The last thing you need to do is to tell VSCode to choose Prettier as your default formatter so Prettier can take care of the styling for you. Edit your configuration file by pressing Cmd + Shift + P or Ctrl + Shift + P and typing "Preferences: ...