信息可能会有时效性, 当前相关工具版本信息: VS Code: 1.49.1, ESLint 插件: 2.1.8 , Prettier 插件: 5.7.1

VS Code 提供的能力

1. 文件保存时执行特定动作(action)

1.23 版本加入的新特性 Run Code Actions on save. 可以配置在文件保存时执行的动作.

"editor.codeActionsOnSave": {
     "source.organizeImports": true // 这里是需要执行的动作.
}

这个配置在 1.41 版本更新, 加强 ESLint的Auto Fix on Save能力.

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }

2. 文件保存时自动格式化文件(format)

VS Code 1.6 版本加入的特性: Format On Save. 可以在文件保存是格式化文件.

// 通过如下配置项开启.
"editor.formatOnSave": true

Prettier 提供的能力

Prettier 本身是一个格式化工具, 通过插件集成到 VS Code.

Prettier 将自己注册为 VS Code 格式化(formatter) 工具, 在 VS Code formatOnSave 保存时格式化文件.

ESLint 提供的能力

ESLint 主要是编码质量的检测工具, 也可以有编码质量检测, 提供风格修正(fix)能力. 通过插件集成到 VS Code.

ESLint 将注册 codeActionsOnSave 能力到 VS Code, 从而可以配置在 codeActionsOnSave 期间格式化代码.

VS Code 中 ESLint 与 Prettier 插件并存

如果 VSCode 同时安装了 ESLint 和 Prettier 插件.

当 formatOnSave 和 codeActionsOnSave 都开启时, 保存文件会先后触发 ESLint 和 Prettier 格式化, 最终格式化会以 Prettier 风格为准.

如果自定义风格与 Prettier 冲突的风格, 将无法生效. 比如ESLint 配置项 space-before-function-paren 期望函数左括号前面空一格, 但 Prettier 期望不空格. 按照 ESLint 和 Prettier 的执行顺序, 最终会格式化为无空格.

忍痛禁用特定文件的 prettier 格式化

不愿意删除 Prettier 插件时, 如果 Prettier 的格式化风格不符合期望, 可以配置将其禁用, 增加 .prettierignore 文件指定需要忽略的文件.

在 `prettier` 之后执行 `eslint --fix` ?

直接禁用 Prettier 还是比较粗暴, 如果能实现 prettier 之后执行 eslint --fix 也是可以解决问题的.

VS Code 1.44 版本 Explicit ordering for Code Actions on save 支持将 editor.codeActionsOnSave 配置为数组, 按顺序执行其中的动作.

如果 Prettier 将自己注册为其中的动作, 则可以配置运行顺序. 目前已经有开发者向 Prettier 建议 Add code action to format with prettier in codeActionsOnSave in VS Code.

在 Prettier 插件不改变的情况下, 还有一种思路: 关闭editor.formatOnSave, 将其注册为editor.codeActionsOnSav动作, 可以达到同样的效果. 目前插件 Format Code Action 已经实现此功能.

eslint-config-prettier 会注册自己的规则到 ESLint, 会继续按照自己的风格提示错误信息, 与自定义的风格冲突, 可以不使用eslint-plugin-prettier, 只在 ESLint 中使用 eslint-config-prettier: 关闭 Prettier 相关规则, 不提示 Prettier 风格问题, 保存时由Prettier自动修复风格问题即可.

项目中 ESLint 与 Prettier 配置

由于 Prettier 的配置会与 ESLint 的冲突, 为了方便使用, Prettier 官方提供 eslint-config-prettier 将冲突的 ESLint 配置项(如space-before-function-paren)全部关闭.

由于冲突的配置项被关闭, 相关的编码风格将不在检测, 为了继续检测这些风格, Prettier 提供 ESLint 插件 eslint-plugin-prettier 注册规则(rule) prettier/prettier 到 ESLint, 开启这个规则后即可通过 ESLint 检测 Prettier 风格问题.

配置 Prettier 到 ESLint

安装依赖 npm install --save-dev eslint-config-prettier eslint-plugin-prettier 修改 ESLint 配置:

// .eslintrc
{
  "extends": ["plugin:prettier/recommended"]
}

// 上面的配置方式和下面这个写法效果等同: https://github.com/prettier/eslint-plugin-prettier#recommended-configuration
{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}