Eslint和Prettier的配置与冲突处理

前言

统一的前端开发规范，可有助于代码质量提升与团队协作效率提高。通常做法是eslint与prettier的配合进行实现。

• eslint中包含三类规则：代码质量检查、代码错误检查、代码风格检查
• prettier包含：代码风格检查

代码风格部分会冲突，我们会对冲突部分进行处理

Eslint

1. 安装

npm i eslint -D
npm init @eslint/config

按照提示完成初始配置，生成.eslintrc.json配置文件

1. 使用

• 通过命令的形式修复代码

npx eslint . --fix

• vscode插件，使得vscode调用eslint能力，实现实时问题提示，以及保存触发修复

插件安装后，修改vscode配置文件setting.json

"editor.codeActionsOnSave": { 
  "source.fixAll.eslint": "explicit" // 保存使用eslint进行修复
}

Prettier

eslint的代码格式做的不够彻底，需要prettier进行增强。并且prettier支持更多的文件格式的格式化。

1. 安装

npm i prettier -D

配置.prettierrc.json

2. 使用

• 通过命令的形式修复代码

npx prettier --write .

• vscode插件，使得vscode调用prettier能力，实现保存触发修复

插件安装后，修改vscode配置文件setting.json

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",

冲突处理

在进行上述配置后，vscode中保存后，出现风格规则不一致，eslint报错问题，现在来解决冲突

1. 关掉与Prettier产生冲突的ESlint格式相关配置

使用eslint-config-prettier这个规则集，关闭eslint和prettier冲突的规则设置

npm i eslint-config-prettier -D

在.eslintrc.json加入perttier规则集

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier" // 覆盖eslint格式配置,写在最后
  ],
}

1. 不再单独运行prettier，将prettier集成到eslint中，作为一项rule进行提示与修复

使用eslint-plugin-prettier这个插件

npm i eslint-plugin-prettier -D

在.eslintrc.json加入perttier插件

{
  "plugins": ["@typescript-eslint", "prettier"], // 注册插件
    "rules": {
      "prettier/perttier": "error", // 加入prettier规则
    }
}

1. 将上面两个步骤合在一起就是下面的配置，也是官方的推荐配置

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

而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 和 prettier 配置使用需要进行如下操作：

1. 首先下载 eslint, prettier, eslint-config-prettier, eslint-plugin-prettier

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

1. 项目根目录添加 .eslintrc.js 和 .prettierrc

// .eslintrc.json
{
  "extends": ["plugin:prettier/recommended"]
}
// .prettierrc.json
{
  "singleQuote": true // 根据需要配置
}

1. 补充 ESLint 从 v8.53.0 起，将弃用代码风格相关规则

参考：