Eslint Prettier

前端中通常使用 prettier 和 eslint 结合来做代码质量检测和保持风格统一

eslint

可以做代码质量检测和代码格式化。只针对 javascript
如何使用：

1. vscode 中安装 eslint，并且配置{eslint.enable: true}
2. 根目录或者全局安装中安装 eslint
3. 有.eslintrc.js 或者.eslintrc.json 配置文件

如果需要保存时候自动格式化，需要配置

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

eslint 基础

extends 启用一个规则集合
plugins 注册插件，但是不会启用

prettier

用来进行代码格式化
如何使用：

1. vscode 中安装 prettier
2. 将 prettier 配置成默认格式化工具

{
   "editor.defaultFormatter": "esbenp.prettier-vscode"
   "[javascript]" {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
}

3. （可选）使用.prettierrc.js 文件

开启保存时候格式化

{
  "editor.formatOnSave": true,
}

有了 eslint 为什么还需要 prettier

ESLint 安装和配置比较麻烦，而且 lint 的速度并不快
Prettier 并不只针对 JavaScript，它可以格式化各种流行语言
Prettier 的配置选项没那么眼花缭乱，比 ESLint 少很多，这在 Prettier 选项的哲学中说明精简的原因。

eslint 和 prettier 会发生冲突

唇线原因（同时满足）：

1. 重叠的格式化规则不一致
2. vscode 同时开启二者进行格式化

会出现，同样的规则不一致，eslint 先进行了格式化，然后 prettier 进行了格式化。得到的结果 eslint 会报错。或者反过来 eslint 后格式化，prettier 会报错。

解决办法

使用 eslint-config-prettier 和 eslint-plugin-prettier 两个包
配置：

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

这个配置会帮我们做：

{
  "extends": ["prettier"], // 使用eslinst-config-prettier中的配置项
  "plugins": ["prettier"], // 注册该prettier插件
  "rules": {
    "prettier/prettier": "error", // 在eslint中运行prettier，并启用该插件提供的规则
    "arrow-body-style": "off", // 关闭规则
    "prefer-arrow-callback": "off" // 关闭规则
  }
}

eslint-config-prettier 会将 eslint 和 prettier重叠的配置 off 掉，使用 prettier api 来调用 prettier 格式化。
这样配置后，eslint 和 prettier 还是会各自格式化一次。但是保持了配置一直输出就不会报错，就没有冲突
可以通过下面配置，对于 prettier 和 eslint 都支持的格式，只使用 eslint 格式化，其余使用 prettier 来格式化

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[javascript]": {
        "editor.formatOnSave": false
    },
    "[javascriptreact]": {
        "editor.formatOnSave": false
    },
    "[typescript]": {
        "editor.formatOnSave": false
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

常用的 eslint prettier npm 包

基础

{
  "extends": [
    "eslint:recommended",           // ESLint 推荐规则
    "next",                         // Next.js 项目
    "next/core-web-vitals"         // Next.js 核心 Web Vitals
  ]
}

typeScript

{
  "extends": [
    "@typescript-eslint/recommended",        // TypeScript 推荐规则
    "@typescript-eslint/recommended-requiring-type-checking",  // 需要类型检查
    "@typescript-eslint/strict",             // 严格模式
    "@typescript-eslint/stylistic"          // 代码风格规则
  ],
  "plugins": [
    "@typescript-eslint"                     // TypeScript 插件
  ]
}

react

{
  "extends": [
    "plugin:react/recommended",              // React 推荐规则
    "plugin:react-hooks/recommended",       // React Hooks 规则
    "plugin:react/jsx-runtime",             // 新 JSX 转换
    "plugin:jsx-a11y/recommended"          // 无障碍访问规则
  ],
  "plugins": [
    "react",                                // React 插件
    "react-hooks",                          // React Hooks 插件
    "jsx-a11y"                             // 无障碍访问插件
  ]
}

vue 相关

{
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "@typescript-eslint/parser",
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "extends": [
    "eslint:recommended",
    "@typescript-eslint/recommended",
    "plugin:vue/vue3-recommended",
    "plugin:vue/vue3-essential"
  ],
  "plugins": [
    "vue",
    "@typescript-eslint"
  ]
}

参考

https://juejin.cn/post/7156893291726782500?searchId=20250804143823F750E9C9AE569CA16794#heading-8