1、规范化介绍
2、ESlint介绍
3、ESlint使用
npm i eslint --save--dev
npx是npm最新的集成的一个工具，只需要安装最新版本就可以用了。
npx eslint --init //初始化配置
npx eslint .\aa.js(文件路径) --fix //使用fix可以自动处理代码风格
eslint作用
- 可以找出代码当中的问题，语法错误、代码不合理、风格不统一
- eslint可以自动修复代码中大多数风格的问题
4、ESlint配置文件解析
env可以运行的所有环境
5、ESlint配置注释
将配置通过注释写在脚本文件当中，然后再去执行代码校验，在开发中难免遇到有一两个点违反eslint校验，这使用就可以使用配置注释去处理。注释的方法还可以声明全局变量和修改某个文件配置、临时开启某个配置等。
6、ESlint结合自动化工具
eslint是一个独立的工具，但如果是在一个有自动化构建工作流的项目中，建议把eslint集成到自动化构建的工作流中优点如下
流程
npx gulp script//这样eslint就能正常执行了
默认情况下eslint只会去检查代码中的问题，不会根据检查的结果给出任何反馈，正确的做法，要在eslint插件处理完后，用eslint的fomat方法在控制台打印错误信息，之后子啊用eslint的failAfterError方法让eslint检查到错误后终止管道，这样就完成集成了。
7、ESlint结合Webpack
webpack集成eslint是通过loader机制集成的
流程
这样就已经集成成功了
npx webpack
由于react中存在jsx这种语法，配置起来会麻烦一点，后续还需要加eslint配置文件
npm i eslint-plugin-react
数字2表示error操作，开启，经过上面操作，就能处理react定义没有使用的报错
在大多数情况下eslint都会提供共享配置，降低使用成本
8、ESlint检查TS
官方建议使用Eslint+TS插件来完成检验
初始化配置文件
9、Stylelint
除了js要被检查，css代码也要被检查，css检查使用stylelint。stylelint和eslint配置非常相似，可以参考eslint。
npm i stylelint -D//安装命令
npx stylelint ./index.css//检查命令
下载的是共享配置模块插件
npm i stylelint -config-sass-guidelines -D//这个模块是用于校验css代码的语法校验
10、Prettier
近两年来前端代码通用格式化的工具，通过使用Prettier就能很容易落实前端规范化标准。
npm i prettier -D//安装
npx prettier style.css//执行后默认会将格式化的代码输出到控制台
npx prettier style.css --write //接上write后就能自动覆盖源文件
npx prettier . --write//对所有文件进行格式化
11、GitHook介绍
为了避免团队开发时，有人忘记校验代码就提交，可以通过githook在提交代码前强制lint。
12、GitHook结合Eslint
完成githooh和eslint的结合需要会写shell脚本，但是大部分前端都不会写，所以有人开发了一个npm的工具模块。Husky可以实现githooks的使用需求。
流程
npm i husky -D
在配置文件里新增husky的一个字段，在里面针对一个具体的钩子来设置要执行的命令，从而可以在将来执行一些npm操作的适合调用设置好的命令。
commit时候就会去校验
lint-staged + husky实现更多功能,不仅能在commit之前强制校验代码，或者在验证前后去完成一些其他的操作
npm i lint-staged -d
precommit对应script中的precommit
