原生使用
- 可以手动下载配置
- 可以通过vue脚手架创建项目时自动下载配置
以下为手动配置举例:
安装:npm i eslint -D
生成ESLint文件:npx eslint --init
,再根据需求选择配置
检查:npx eslint 文件位置或整个文件夹
JS测试案例:
按照要求修改过后,检查通过:
这只是默认的规则,实际上什么样的规则完全由开发者们自己规定,每个团队都可以制定独特的规范,没有绝对正确说法
支持多种配置文件格式
.eslintrc配置文件
简单示例:
JS
// .eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/essential', 'eslint:recommended'],
parserOptions: {
parser: '@babel/eslint-parser',
},
rules: {
'no-unused-vars': 0,
'vue/multi-word-component-names': 0,
'vue/no-unused-components': 0,
},
};
root 配置项
root
属性用于指定 ESLint 配置文件所在的根目录。这样,当您在项目根目录下运行 ESLint 时,它将只检查该目录及其子目录中的文件,而不检查其他目录。
env 配置项
js
env: {
browser: true,
commonjs: true,
}
由于 ESLint 的各种规则中,一般都不允许使用未在页面内声明的成员,而开发中经常会用到 一些运行环境自带的 api,如:
-
浏览器中的 window、document 等,所以要
"browser": true
-
nodejs中的**__dirname**,所以要
"commonjs": true
所以要告诉eslint,当前代码是运行在哪些环境中,这样检查时就不会报错了
globals 配置项
当访问当前源文件内未定义的变量时,会发出警告。如果你想在一个源文件里使用全局变量,可以在 ESLint 中定义这些全局变量,这样 ESLint 就不会发出警告了。可以使用注释或在配置文件中定义全局变量。
JS
globals: {
_: true, // 可以读取,可以修改
$: false, // 可以读取,不能修改
},
extends 配置项
继承和扩展 ESLint 规则集的配置项
js
extends: ['plugin:vue/essential', 'eslint:recommended'],
- extends 的优先级是从低到高的,后面的规则会覆盖前面的规则
- ESLint 检查时用哪些规则呢?通过这个配置项可以配置使用内置规则 还是第三方规则
- 注意:配置 extends时,可以省略
eslint-config-
,直接写成standard
- 注意:配置 extends时,可以省略
以前大家都在用原生JS开发,还没用上Vue、react等等,但也是需要工具来帮助检查语法规范的
后来有了Vue,但是.vue
文件不是.js
文件,所以为了让ESLint也支持检查.vue
文件中的模板、脚本和样式,便有了eslint-plugin-vue
这个包,否则连<template>
都不认识,直接开头的 < 符号都报错:
plugins和extends和的区别
extends
用于引用扩展或配置文件,可以继承一个或多个已定义好的配置,包括 ESLint 内置的推荐配置、第三方插件提供的配置或自定义的配置文件
而 plugins
用于引入第三方插件,可以加载第三方插件并使用插件提供的规则和功能。插件通常用于为特定的框架、库或语言提供定制的代码检查规则。
plugins 配置项
插件是一个可以为 ESLint 添加各种扩展功能的 npm 包。一个插件可以执行许多功能,包括但不限于添加新的规则和导出可共享的配置
JS
plugins: ['prettier']
可以通过 extends
选项来继承插件的规则,extends
属性值由以下内容组成:
plugin:
- 包名(可以省略其前缀,如
prettier
是eslint-plugin-prettier
的缩写) /
- 配置名称(如
recommended
)
举例plugin:prettier/recommended
,使用它需要安装 npm 包:eslint-plugin-prettier
JS
extends: [
// 意思是配置eslint-plugin-prettier包中的recommended选项
"plugin:prettier/recommended",
],
到node_modules中找下这个recommended选项在哪里,帮助加深理解
parser 配置项
指定用于解析JavaScript代码的解析器。ESLint默认使用 Espree 解析器,但是可以通过parser配置来使用其他解析器。
JS
{
"parser": "某某解析器",
}
parserOptions 配置项
给配置的解析器添加可选配置项。ESLint 解析器 解析代码时,可以指定用哪个 js 的版本
js
"parserOptions": {
"ecmaVersion": 12
}
rules 配置项
"off"
或0
- 关闭规则"warn"
或1
- 启用并视作警告"error"
或2
- 启用并视作错误
JS
rules: {
'no-unused-vars': 'off',
'vue/multi-word-component-names': 0,
'vue/no-unused-components': 0,
},
如果说extends引入了某第三方规则集,但是你不喜欢其中的某一条,便可以在这里进行覆盖
语法规范包类型
ESLint 安装时自带的两百多个规范,开发时未必都要使用,各个公司根据自己的习惯选择
所以就用了不同的选择组合:
一、ESLint内置规范包
可以理解为官方给你推荐的套餐:
eslint-all
,不管三七二十一,只要是个规则全给你用上
eslint-recommended
,ESLint作者:Nicholas C. Zakas推荐的五十多个规则
二、标准规范包
eslint-config-standard
,也使用了两百多个规则
安装:npm i eslint-config-standard -D
三、第三方规范包
google/airbnb/facebook....
这个好理解,大公司都有成熟团队,翅膀硬了自然有自己的规范
举例:查看依赖详情:npm info "eslint-config-airbnb-base@latest" peerDependencies
下载相关包:npx install-peerdeps --dev eslint-config-airbnb-base,相关的就被下好了:
fix修复格式问题
scss
//cmd命令:修复src目录下所有扩展名为vue和js的文件
npx eslint --fix --ext .vue,.js src
//或者不指定扩展名,直接目录下所有文件都修复(就算是.png图片也会检查)
npx eslint --fix src/**
--fix:修复
--ext:文件扩展名
忽略文件配置
方法有两个
- 在配置文件中添加
ignorePatterns
。
- 创建包括忽略匹配模式的专用文件(默认为
.eslintignore
)
甚至可以用注释写到代码里面
JS
1. 关闭段落校验
/* eslint-disable */
some code
some code
/* eslint-enable */
2. 关闭当前行校
some code // eslint-disable-line
3. 关闭下一行校验
// eslint-disable-next-line
some code
项目中怎么规范化开发
一、eslint配合prettier eslint
【格式化程序选择Prettier ESLint】
介绍
eslint管的是语法,prettier管的是风格,这两个怎么搭配不冲突是重点
这个问题网上技术文章大致思路:
-
细心点注意两个插件的配置不要冲突就好
-
使用
eslint-config-prettier
,格式的问题就全由Prettier
接手 -
......
但个人感觉比较通用且方便的方案应该是ESLint
加Prettier ESLint
这两个vscode插件
不需要安装Prettier
插件,也能做到Prettier
该有的格式化 json、html、css等等文件的格式化,主要是看中这点,否则像安装eslint-plugin-prettier等等办法,对于其他文件的格式化还得专门设置
安装
vue3举例
Prettier ESLint插件要求安装的包:
使用如下命令即可,不用按照上面的图片说明单独安装vue-eslint-parser,因为它属于eslint-plugin-vue的次级依赖,直接装eslint-plugin-vue更好,还能写入vue语法的规则
kotlin
// 注意,这个搭配方案,prettier不要升到@3.X.X版本,直到23/8/14日测试,会不兼容以致无法格式化
pnpm i prettier@^2.5.1 eslint@^8.7.0 -D
//初始化eslint文件设置
npx eslint --init
接着按照需求选择eslint给你的选项就好,再设置格式化默认插件,然后重启Vscode,再打开就可以正常用格式化文档快捷键进行格式化代码了
在初始化eslint文件设置的时候,如果选择了Vue框架,那它会主动提示你顺带安装eslint-plugin-vue,一定要装这个,否则不能格式化.vue文件
如果发现错过了、总之当时没装,再pnpm i eslint-plugin-vue -D
就好
JS
//然后在.eslintrc文件的extends中加上'plugin:vue/vue3-essential',示例:
extends: ['eslint:recommended', 'plugin:vue/vue3-essential'],
-
更改.eslintrc.js规则的时候,有时候要等几秒钟,才会按照新的规则去格式化
-
如果项目根目录下有
.prettier
配置文件,并且对它进行更改,那么需要重启vscode之后,prettier EsLint
插件才会采用新的配置文件进行格式化 -
Prettier ESLint 做的就是先使用 prettier 对所有源码中的文件(.vue,.js,.ts,.css,.scss,.json,.md等)用 prettier 的规则进行格式化,此时的代码必然会与 ESLint 有冲突。再调用 ESLint --fix 对 .js,.ts,.vue 等涉及到 ESLint 语法检查的地方用 ESLint 进行格式化。简单的说,它的原理就是凡是 ESLint 严格限制的部分,都用 ESLint 格式化,反之用 Prettier。
-
在cmd终端执行:
shellnpx prettier --write src & npx eslint --fix --ext .js,.ts,.vue src
在powershell终端执行:
shellnpx prettier --write src ; npx eslint --fix --ext .js,.ts,.vue src
可以达到和 Prettier ESLint 一样的效果。因此可以认为 Prettier ESLint 就是以上终端执行的封装。
-
由于vite创建项目的时候默认是module包
这时所有js文件默认使用ESM模块规范,但是ESLint目前不支持ESM模块(新版配置可以,但是还在实验性阶段),所以需要显性地声明成.cjs才能标识这个是用commonjs规范的
无论package.json
中的type
字段为何值,.mjs
的文件都按照es模块来处理,.cjs
的文件都按照commonJs模块来处理
vue/cli创建给出的默认搭配方案
【格式化程序选择ESLint】
vite命令创建是没有方案选择的,这里说下vue/cli给的方案,vue2举例
按照这些配置,那么项目的package.json中关于 linter和formatter 实际给的搭配方案是
JS
//选择格式化插件程序为eslint
//package.json
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"prettier": "^2.4.1",
//如果直接复制上面版本安装,ecmaVersion最高兼容到12,用13或者直接latest会报错Invalid ecmaVersion
如果你的某个项目中现在没有任何规范化方案,并且想采用这个搭配,可以直接装最新版本:
arduino
//安装
pnpm i eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier -D
//设置
npx eslint --init
JS
// .eslintrc.js
extends: [
"eslint:recommended",
// vue3用plugin:vue/vue3-essential
"plugin:vue/essential",
"plugin:prettier/recommended",
],
直到23/8/14日经过测试,按照上面命令安装的各npm包没有任何冲突,版本结果如下:
JS
"eslint": "^8.47.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-vue": "^9.17.0",
"prettier": "^3.0.1",
注意装完需重启vscode
方案缺点
有些规则会和prettier/prettier冲突,例如.eslintrc.js里面写个不要分号的规则,会提示和prettier/prettier冲突,这东西其实就是npm包eslint-plugin-prettier,鼠标点链接就是它github主页
所以冲突了还得另外建个.prettierrc文件去关掉冲突的规则
前面的方案就不用这么做,直接就覆盖prettier的规则
二、限制使用包管理工具
团队里面同一个项目你用npm,我用yarn,他用pnpm,大家各玩各的,迟早因为包版本的问题导致项目出问题
JS
"scripts": {
// ... 其他命令
//举例限制只能使用pnpm
"preinstall": "npx only-allow pnpm"
}
三、husky+lint-staged
前面的规范开发只是君子协议,在大家提交代码前还得设置一道门槛检查到底有没有遵守,在commit之前检查代码能不能通过eslint校验,不让屎山代码流入仓库
-
husky:管理
git hooks
的工具 -
lint-staged:只对已经通过
git add
加入到暂存区的文件进行扫描
husky
- 自动安装,完成手动安装的1到4步
pnpm dlx husky-init;pnpm install
但是为了和lint-staged配合,这个内容要改成npx lint-staged
还要注意加上手动安装第3步的git init
- 手动安装
1、安装
pnpm i husky -D
2、启用 git hooks
pnpx husky install
3、项目安装时自动启用git hooks
(pnpm pkg命令要求node版本不能过低,这里用16.20.0)
pnpm pkg set scripts.prepare="husky install"
该命令其实就是package.json加上这个script
注意:初次安装项目生成node_modules时,根目录得有git仓库,否则会跳过husky install,以致于后续commit不会触发任何git hooks
所以为了防止这种情况,在上述的npm的prepare钩子函数中再加上git init
JSON
"prepare": "git init && husky install"
4、添加一个 husky hook,内容为npx lint-staged
pnpx husky add .husky/pre-commit "npx lint-staged"
lint-staged
安装
pnpm i lint-staged -D
配置文件
根目录下新建文件**.lintstagedrc.json**
JSON
//检验规则举例,具体检验什么文件哪些路径看团队需求
{
//对src目录下所有文件校验
"src/**/*.{js,cjs,ts,html,json,css,scss,vue}": ["npx prettier --write"],
"src/**/*.{js,cjs,ts,vue}": ["npx eslint --fix"],
//只对根目录的所有文件校验,不涉及文件夹
"./*.{js,cjs,ts,html,json}": ["npx prettier --write"],
"./*.{js,cjs,ts}": ["npx eslint --fix"]
}
或者直接在package.json添加如下对象
json
"lint-staged": {
"src/**/*.{js,cjs,ts,html,json,css,scss,vue}": [
"npx prettier --write"
],
"src/**/*.{js,cjs,ts,vue}": [
"npx eslint --fix"
],
"./*.{js,cjs,ts,html,json}": [
"npx prettier --write"
],
"./*.{js,cjs,ts}": [
"npx eslint --fix"
]
},
然后就可以尝试commit代码了,如果eslint校验没通过,就像这样有个变量声明了但是没用过便提交失败了,这样就必须调整代码,再暂存、再推送,直到符合eslint规则,以达到规范化开发的目的
注意看规范包官网
- 修改规则别忘了重新启动项目才能生效
有些规则似乎官网并没有,但是为什么能够使用?比如vue/multi-word-component-names
那是因为引入了这么一个规范包(就是一个别人已经配置好的.eslintrc
文件,人家已经定义了很多的rules、 plugins等等配置)
这是它的官网,可以看到找到了相关规则
在这里看到使用指导:
源码也可以看到
再例如阿里巴巴的规范包:
也有指明怎么配置extends里的命名
本文仅代表个人观点,可能存在不准确或不完整之处,欢迎各位读者批评指正