Eslint和Prettier的配置与冲突处理

前言

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

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

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

Eslint

  1. 安装
bash 复制代码
npm i eslint -D
npm init @eslint/config

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

  1. 使用
  • 通过命令的形式修复代码
bash 复制代码
npx eslint . --fix
  • vscode插件,使得vscode调用eslint能力,实现实时问题提示,以及保存触发修复

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

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

Prettier

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

  1. 安装
bash 复制代码
npm i prettier -D

配置.prettierrc.json

2. 使用

  • 通过命令的形式修复代码
bash 复制代码
npx prettier --write .
  • vscode插件,使得vscode调用prettier能力,实现保存触发修复

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

json 复制代码
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",

冲突处理

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

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

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

bash 复制代码
npm i eslint-config-prettier -D

.eslintrc.json加入perttier规则集

json 复制代码
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier" // 覆盖eslint格式配置,写在最后
  ],
}
  1. 不再单独运行prettier,将prettier集成到eslint中,作为一项rule进行提示与修复

使用eslint-plugin-prettier这个插件

bash 复制代码
npm i eslint-plugin-prettier -D

.eslintrc.json加入perttier插件

json 复制代码
{
  "plugins": ["@typescript-eslint", "prettier"], // 注册插件
    "rules": {
      "prettier/perttier": "error", // 加入prettier规则
    }
}
  1. 将上面两个步骤合在一起就是下面的配置,也是官方的推荐配置
json 复制代码
{
  "extends": ["plugin:prettier/recommended"]
}

plugin:prettier/recommended帮我们做了如下事情:

json 复制代码
{
  "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
bash 复制代码
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
  1. 项目根目录添加 .eslintrc.js 和 .prettierrc
json 复制代码
// .eslintrc.json
{
  "extends": ["plugin:prettier/recommended"]
}
// .prettierrc.json
{
  "singleQuote": true // 根据需要配置
}
  1. 补充 ESLint 从 v8.53.0 起,将弃用代码风格相关规则

参考:

  1. juejin.cn/post/705012...
  2. juejin.cn/post/715689...
  3. juejin.cn/post/692456...
  4. juejin.cn/post/732251...
  5. cloud.tencent.com/developer/a...
相关推荐
群联云防护小杜11 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB2424 分钟前
html复习
javascript·microsoft·html
汉得数字平台29 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹35 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows