前端规范(一)之ESlint以及@antfu/eslint-config
时间:2024-04-01 19:35:40 来源:网络cs 作者:淼淼 栏目:数据分析 阅读:
**相关章节**
前端规范(一)之ESlint以及@antfu/eslint-config
前端规范(二)之Prettier
前端规范(三)之stylelint
前端规范(四)之husky+lint-staged+commitizen+commitlint
ESlint
本文将记录工作中eslint相关的内容,常用的配置、插件等;
团队项目中规范尤其重要,否则合并代码的时候会有大量冲突出现;
通过eslint和vscode工作区的setting.json设置能有效的使团队的规范保持一致;
@antfu/eslint-config预设配置(推荐)
在介绍ESlint之前推荐一个项目,也就是Anthony Fu大佬的开源项目ESlint的预设配置项目,可以省去一堆的配置,值得注意的是Anthony Fu并不适用Prettier,可以看看大佬的下面这篇文章的介绍;
Why I don’t use Prettier (antfu.me)
只需简单的安装后在.eslintrc和 package.json文件中维护以下 内容即可,简单快捷
[详细内容请查看@antfu/eslint-config](antfu/eslint-config: Anthony’s ESLint config presets (github.com))
pnpm add -D eslint @antfu/eslint-config
{ "extends": "@antfu"}
{ "scripts": { "lint": "eslint .", "lint:fix": "eslint . --fix" }}
安装
vscode插件商城直接搜索Eslint,值得注意的是我们还需要在项目中适用npm安装ESlint,因为我们需要对我们的代码进行检测
npm i eslint -D
初始化
初始化的时候会有交互,根据你自己的实际项目选择即可,选完交互后会有推荐需要安装的npm包;
npx eslint --init
初始化完成后会自动生成.eslintrc.cjs文件
module.exports = { "env": { "browser": true, // 支持浏览器环境的检测 "es2021": true, // 支持es2021语法的检测 "node": true // 支持node环境的检测 }, "extends": [ "eslint:recommended", // 使用eslint推荐的配置进行检测 "plugin:vue/vue3-essential", // 支持vue3相关语法的检测 'plugin:@typescript-eslint/recommended' //ts推荐进行配置 ], "overrides": [ ], 'parser': 'vue-eslint-parser', "parserOptions": { "ecmaVersion": "latest", // 解析文件的时候使用最新的ecmaVersion "sourceType": "module", // 文件是ES6模块规范 'parser': '@typescript-eslint/parser', }, "plugins": [ "vue", '@typescript-eslint' ], "rules": { // 配置自己项目特有的一些检测规则 quotes: ['error','single'] //单引号示例 }}
vscode工作区设置
vscode设置分组用户设置和工作区设置,其中用户设置是全局生效,工作区是当前项目生效,工作区的级别高于用户设置,开启保存的时候自动格式化代码;
{ "editor.codeActionsOnSave": { "source.fixAll": true, "source.fixAll.eslint": true },}
package.json增加脚本
"scripts": { "dev": "vite", "build": "vue-tsc && vite build", "preview": "vite preview", "lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock}/**/*.{vue,ts,tsx}\" --fix" },
运行脚检测脚本
npm run lint:eslint
与Prettier冲突的解决方法
有人说那不是会格式化两次吗,eslint格式化了一次,Prettier又格式化了一次,为什么需要两个配置项,简化成一个不行吗,这个其实社区也有给VsCode提过意见,VsCode给的答案大致意思是它们各司其职,所以还是要两个都保留。
冲突场景举例
举例一种冲突场景:
Eslint配置单引号
Prettier配置双引号
冲突现象
因为Prettier里的规则使用的双引号,两个同时存在的时候,最终格式化出来的结果会以Prettier里的规则为准,也就是说Eslint和Prettier都会对文件进行格式化,可是Prettier格式化的会覆盖掉Eslint格式化的。所以最终格式化的结果是双引号的。
解决方法
eslint-plugin-prettier 和 eslint-config-prettier可以有效的解决冲突问题
其中eslint-config-prettier会把Eslint里和Prettier有冲突的规则关掉,eslint-plugin-prettier会将Prettier里的规则设置到Eslint里面,通过这两个插件的配合,就完成了Eslint和Prettier规则的合并,其中冲突的规则以Prettier里的规则为准。
npm install -D eslint-plugin-prettier eslint-config-prettier
本文链接:https://www.kjpai.cn/news/2024-04-01/152293.html,文章来源:网络cs,作者:淼淼,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!