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.

Install Prettier

Install the "Prettier - Code formatter" extension from the extensions sidebar. Once this is complete, open a code file and press Alt + Shift + F to auto format it. You should see a prompt asking you to choose which code formatter you would like to use since you now have two available. Select Prettier from the prompt.

Enable formatting on save for all files

Open the settings menu via "File > Preferences > Settings". Type editor.formatonsave into the search bar and enable the "Format On Save" setting. Now, whenever you save any file it should be formatted automatically.

Enable formatting on save for only certain file types

Open the settings.json file by navigating to "File > Preferences > Settings" and clicking the "Open Settings (JSON)" button at the top right of the screen.

Search the file for any preexisting "editor.formatOnSave" setting and delete it. Then add the following, replacing "javascript" with whatever language you want to enable format on save for.

"editor.formatOnSave": false,
"[javascript]": {
    "editor.formatOnSave": true
}

Don't know why but setting Default Formatter to ebsenp.prettier didn't work for me. But I found a similar command that worked.

1. ctrl + shift + p
2. Format document with
3. Configure default formatter
4. Choose prettier