Eslint简介
众所周知，Eslint工具在当前前端工程化中有着举足轻重的分量，一般所谓【前端稳定性建设】最容易落地和成效的就是它。它集成了错误校验格式化代码等功能，在项目中统一编程风格和代码健壮性有着重要意义。但是最近发现有的小伙伴只知道项目中有该项，却不求甚解，不懂其用法，于是本周末搜集了相关资料以及用法在此记录。
Eslint基本使用
- 新建项目，并且初始化package.json
mkdir eslint-demo
cd eslint-demo
npm init -y
- 安装开发依赖
npm install eslint --save-dev
# or
yarn add eslint --dev
- 生成配置文件 .eslintrc
npm init @eslint/config
# or
yarn create @eslint/config
执行上述命令时，会出现交互式问答关于你当前项目的情况选择eslint配置
选择第三个即可，插件语法和发现问题，并且统一编程风格，其余选项根据自己项目情况选择，个人喜好standard的风格，选择standard配置之后，会提示让你按照其相关依赖；
- vscode 打开项目
code .
- .eslintrc配置文件详解
module.exports = {
root: true // eslint查找配置的最终父节点，如果不配置eslint会一直往上查找，直到系统根目录。
env: { // 全局变量相关配置，比如浏览器下的 `window`全局变量，node模块下 `__dirname`
browser: true, // true表示启用浏览器全局变量，false表示不启用，直接的结果就是eslint报错变量未定义
node: true, // 启用node全局变量
es2021: true, // 启用es2021的全局变量，关于es的其他版本配置项有 es6 es2016 es2017 es2018 es2019 es2020 es2021 es2022
},
extends: [ // 配置eslint校验规则
'standard' //目前启用的是 eslint-config-standard npm包的规则，配置时可省略eslint-config-前缀
],
parserOptions: {
ecmaVersion: 'latest', // 启用es最新的语法，比如箭头函数之类,...语法，不包括变量名，全局变量名需要配置上面的env
sourceType: 'module', // 仅仅针对 export default es6模块语法。node项目如不需要打包不需要
},
rules: { // 对于规则的修改部分
},
globals: {
// 定义全局变量，不然eslint会校验失败
globalName: true, // true表示可读可写
globalAge: false, // false表示可读不可写
},
}
-
新建文件app.js查看效果，发现编辑器没有任何提示（因为没有安装vscode插件）
image.png -
新增脚本命令使用eslint校验代码
image.png -
执行npm run lint之后会发现控制台报错了
image.png
就目前而言，其实也就那么回事，还得咱手动敲命令去校验，很low... 这时候eslint的插件派上用场了
-
vscode安装eslint插件
image.png -
安装完成后重新启动vscode，你会有惊喜，错误的代码通过红线标出来了
image.png
-
有了语法错误，就得解决，解决方式有种：项目中配置eslint:fix 命令、vscode的eslint插件
image.png
执行 npm run lint:fix，执行完成会发现，还有一些错误，是eslint无法修改的，需要我们自己修改
此时查看编辑器，原先的空格相关的错误没有了
12.实现编辑器保存自动修复报错 上面是基于项目中的脚本命令，需要手动执行命令，觉得很麻烦有木有，不着急，我们可以通过VSCODE的的eslint插件实现保存时自动fix错误**
打开vscode的json形式的配置文件，添加下面的配置：
配置完成之后重启vscode，后面只有我们每次保存时就会自动解决eslint报错问题。
- 若要禁用一组文件的配置文件中的规则，请使用 overrides 和 files。例如:
{
"rules": {...},
"overrides": [
{
"files": ["*-test.js","*.spec.js"],
"rules": {
"no-unused-expressions": "off"
}
}
]
}
- 使用.eslintignore配置忽略eslint检查的的文件，新建.eslintignore文件，填入想忽略的文件或者文件夹
node_modules
test
data
.eslintrc.js
Prettier
个人理解 Prettier相对于eslint，其主要关注的点是代码风格的统一，比如代码一行最多多少个字符，使用缩进还是tab来实现代码结构化等。
其配置相对来说很少，具体如下：
//此处的规则供参考，其中多半其实都是默认值，可以根据个人习惯改写
module.exports = {
printWidth: 80, //单行长度
tabWidth: 2, //缩进长度
useTabs: false, //使用空格代替tab缩进
semi: false, //句末使用分号
singleQuote: true, //使用单引号
quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
jsxSingleQuote: true, // jsx中使用单引号
trailingComma: 'all', //对象多行时尽可能打印尾随逗号
bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
arrowParens: 'avoid', // always/avoid 单参数箭头函数参数周围使用圆括号-eg: (x) => x
requirePragma: false, //无需顶部注释即可格式化
insertPragma: false, //在已被preitter格式化的文件顶部加上标注
proseWrap: 'preserve', //不知道怎么翻译
htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
endOfLine: 'lf', //结束行形式
embeddedLanguageFormatting: 'off', //对引用代码进行格式化
};
Prettier搭配eslint使用方式，参考https://github.com/prettier/eslint-plugin-prettier
- install 依赖
yarn add prettier eslint-plugin-prettier eslint-config-prettier --dev
新建.prettierrc.js文件，将上述配置复制到文件中
-
修改.eslintrc.js文件
image.png 后续即可使用eslint的校验和fix了。
husky+lint-staged
到目前为止，我们对于代码的格式化校验已经有了2种方式（项目内部执行脚本命令/vscode插件），但是假如说有的同学不想每次都跑个命令来lint，或者说它vscode没有安装eslint插件（编辑器没有任何错误提示，也不会保存时自动修复错误），那他提交的代码就会与我们约定的风格不符，所以一般我们在git commit之前执行lint任务，保证我们每个人提交的代码都会经过lint校验，统一风格。
husky：就是用来做这个事情的，commit之前执行eslint命令，如果eslint没过，则commit失败；
lint-staged：跑husky的hooks只针对拿到的staged文件进行lint校验，而不是全部文件，优化了lint效率
- 首先你的项目得git init下
git init
- 使用如下命令自动安装2个npm包并且自动配置：
npx mrm@2 lint-staged
-
后续执行git commit时就会检查
image.png
坑点
初次使用的时候会爆出.eslintrc,js的警告，因为使用命令自动生成的lint-staged脚本使用的是
"lint-staged": {
"*.js": "eslint --cache --fix"
}
其会校验所有以js结尾的文件，包括【.】开头的文件比如：.eslintrc.js .prettierrc.js，
就会有下面的警告：
解决方式是在 .eslingignore文件中加入 报错文件的配置
!.prettierrc.js
文章借鉴：
https://juejin.cn/post/7028754877312401444
https://zhuanlan.zhihu.com/p/81764012
https://juejin.cn/post/6938687606687432740
https://eslint.bootcss.com/docs/user-guide/configuring