如何在VSCode的「格式化文档」中同时执行eslint --fix和prettier --write？

可行方案 #

方案1：自定义多命令串联执行 #

借助VSCode的multi-command扩展，可将「ESLint自动修复」和「Prettier格式化」绑定为一个自定义命令，直接替代默认的「格式化文档」功能：

1. 在VSCode内置市场搜索并安装multi-command扩展
2. 在.vscode/settings.json中添加配置：

{
  "multiCommand.commands": [
    {
      "command": "multiCommand.formatEslintThenPrettier",
      "sequence": [
        "eslint.executeAutofix",
        "editor.action.formatDocument"
      ]
    }
  ],
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

3. 在.vscode/keybindings.json中修改默认格式化快捷键，绑定到自定义命令：

{
  "key": "ctrl+shift+i", // 可保留默认快捷键或自定义
  "command": "multiCommand.formatEslintThenPrettier",
  "when": "editorTextFocus"
}

此后执行「格式化文档」（或按绑定的快捷键），会先运行eslint --fix逻辑，再执行prettier --write，完全匹配你要的CLI效果。

方案2：通过ESLint插件协同（仅关注最终效果） #

如果不在意执行顺序，只要求结果和eslint --fix; prettier --write一致，可通过ESLint插件整合Prettier：

1. 安装依赖：

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

2. 修改ESLint配置文件（如.eslintrc.js）：

module.exports = {
  extends: [
    // 保留你已有的extends配置
    "plugin:prettier/recommended"
  ]
};

3. 在VSCode设置中将默认格式化工具设为ESLint：

{
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
}

此时执行「格式化文档」时，ESLint会先修复自身规则问题，再自动应用Prettier的格式化规则。虽然执行顺序和你要求的相反，但eslint-config-prettier会禁用ESLint中与Prettier冲突的规则，最终结果和eslint --fix; prettier --write完全一致。

关于执行顺序的官方建议 #

Prettier官方推荐先执行Prettier，再执行ESLint --fix，原因是如果ESLint包含与Prettier冲突的格式规则（如缩进、引号风格），先执行ESLint修复会被后续的Prettier格式化覆盖，导致ESLint的格式规则失效。但只要你通过eslint-config-prettier禁用了所有冲突规则，顺序就不会影响最终结果。

内容的提问来源于stack exchange，提问作者Daniel Kaplan