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.

1. Install eslint:

   npm i --save-dev eslint
   

2. Init eslint:

   npx eslint --init
   

   For some options you need choose next:
   • How would you like to use ESLint?
   • To check syntax and find problems
   • What format do you want your config file to be in?
   • JavaScript
3. Install prettier:

   npm i --save-dev eslint-config-prettier eslint-plugin-prettier prettier 
   

4. Create .prettierrc config file:

    {
        "printWidth": 80,
        "singleQuote": true,
        "trailingComma": "es5"
    }
   

At now you can check style with eslint and fix style with prettier from comand line.

For VSCode integration with eslint and prettier you need to install one of:

1. esbenp.prettier-vscode.
2. dbaeumer.vscode-eslint;

After that you need to set this extension as default formatter:

1. Open command pallette ctrl+shift+p;
2. Select Format Document With...;
3. Select Configure Document With...;
4. Select Prettier - Code Formatter or ESLint based on your preferences.

Now, eslint will work as linter and prettier as formatter:

VSCode problem tab:

eslint output

If I save file all prettier problems will be fixed (Autoformat on save should be turned on)

Eslint plugin does not apply automatically changes in settings located in .prettierrc. See issue on github. To fix this you can:

• move .prettierrc content in .eslint (not recommended because prettier plugins sometimes do not read this file);
• run from command pallette in VSCode ESLint: Restart ESLint server after edit .prettierrc file.