ESLint、Prettier、TypeScript与VSCode配置逻辑及搭配用法疑问

疑问1：开启ESLint修复后editor.defaultFormatter设为Prettier的作用 #

你当前的配置本身存在执行逻辑冲突：VSCode保存时会先执行默认格式化器（也就是你设的Prettier）的格式化，再执行source.fixAll.eslint的规则修复。如果ESLint配置了格式化相关规则，会直接覆盖Prettier的格式化结果，这种场景下设置Prettier为默认格式化器没有实际作用，甚至会带来格式反复变更的冲突。

疑问2：ESLint会不会通过extends: prettier读取Prettier配置 #

不会。eslint-config-prettier提供的prettier扩展项唯一作用是关闭所有ESLint中与Prettier格式化规则冲突的校验项，避免两者规则打架，它本身不会读取.prettierrc配置，也不会让ESLint自动应用Prettier的格式化规则。
如果要让ESLint执行格式化时同步应用Prettier规则，需要额外安装eslint-plugin-prettier插件，将prettier加入ESLint的plugins数组，同时在rules中添加"prettier/prettier": "error"，这样Prettier的格式化规则会被当成ESLint的校验项执行修复。

疑问3：配置eslint-plugin-prettier后不生效的原因 #

你提供的.eslintrc配置中仅引入了eslint-config-prettier的规则扩展，没有将prettier添加到plugins数组中，所以插件不会生效。按以下步骤调整即可正常工作：

• 安装两个必要依赖：npm i eslint-config-prettier eslint-plugin-prettier -D
• 修改.eslintrc配置：

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "rules": {
    "semi": ["error", "never"],
    "prettier/prettier": "error",
    "padding-line-between-statements": [
      "error",
      { "blankLine": "always", "prev": "*", "next": "return" }
    ]
  }
}

• 修改VSCode的settings.json配置，关闭默认格式化的formatOnSave，仅保留ESLint自动修复：

{
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.organizeImports": true,
    "source.fixAll.eslint": true
  }
}

调整后保存文件时，ESLint会同时完成：代码质量校验修复、高级格式化规则生效、Prettier风格的格式化三个操作。

为什么还需要使用Prettier #

• 更低的配置成本：Prettier内置了行业通用的格式化规范，仅需少量配置就能保证全团队代码风格完全统一，不需要像ESLint一样逐条配置数十条格式化规则，避免不同项目配置差异过大的问题。
• 更广的文件支持：ESLint仅支持处理JS/TS类文件，Prettier可以直接格式化JSON、YAML、Markdown、CSS、HTML、Vue、Svelte等几十种常见文件类型，非代码文件的格式化需求仍然需要Prettier实现。
• 更优的性能：如果不需要依赖ESLint的高级格式化规则，单独使用Prettier做格式化的执行速度远高于ESLint，大项目场景下性能差异非常明显。

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