1.脚手架和插件区别
ESLint有两个工具，一个是模块包，一个是VScode的扩展工具
脚手架里面的ESLint主要是在编译的时候提示，vscode的插件主要是在编写的时候提示
2.为什么用ESLint
- 统一团队代码规范
- 统一语法
- 减少git不必要的提交
- 避免低级错误
- 在编译时检查语法，而不是JS引擎运行时才检查
3.安装方式
- 通过npm或者yarn进行全局或者项目安装 npm i eslint -D
- 通过脚手架安装时选择eslint
- 安装完成之后
- .bin/eslint.cmd脚本文件，内部通过nodejs执行eslint运行包的代码
- @eslint包用来规范eslint配置文件
- eslint开头的包是eslint运行包，包含eslint代码
4.生成ESlint配置文件
-
执行node_modules/.bin文件夹里面的eslint脚本来创建配置文件
-
包含完整脚本路径的命令： ./node_modules/.bin/eslint –init
-
也可以npx来执行（推荐）: npx eslint –init
(npx和node一起安装，可以去.bin目录里面找到目标脚本文件，简化执行脚本的语法)
-
-
创建配置文件中需要选择配置
eslint默认只能检查js语法，所以要检查vue或者react需要在配置时选择
-
执行结果
-
创建了配置文件 .eslintrc.js
-
下载了相关规范包
（如果选的是standard语法规范包的话，而它需要用到import/node/promise包）
-
-
ESLint执行
命令：
npx eslint ./需要检查语法的文件路径如果违反规范，会将错误提示到终端，说明eslint工作正常
-
配置文件格式
通过
npx eslint --init创建配置文件时，有体用配置文件的格式给我们选择其中加载的优先级是js>yaml>json，所以我们最好选择js格式
-
JS格式使用模式
配置文件内部使用的是module.exports导出配置数据
是因为在添加配置文件的时候，选择了CommonJS
如果选择了JavaScript modules，那么就会使用export导出配置数据
所以ESLint配置文件应尽可能与它保持一致
-
env节点
"env": { "browser": true, "commonjs":true, "es2021":true }在ESLint的各种规范中，一般都不允许使用未在页面内声明的成员
开发中经常会用到运行环境的自带api，比如：
- 浏览器中的window/document
- nodejs中的__dirname等
- es2021中的WeakRef等
所以要告诉eslint当前代码是运行在什么环境中，这样检查的时候就不会报错了
-
extends选项
选择要遵循那些规则，有内置的standard、all、recommended等
如果使用第三方下载的
eslint-config-standard规范时配置extends可以省略eslint-config-直接写成standardextends:'standard' extends:['eslint:all'] extends:['eslint:recommended'] -
globals节点
如果第三方库比如jquery，引入之后使用$因为之前没有声明过，所以会报错，在globals里面配置一下，下次在全局引用的时候，就会通过检查，不会报错了
globals用于手动配置全局成员
"globals":{ "$":true } -
parserOptions节点
ESLint解析器 解析代码时可以指定那个js版本
注意：这里是指定检查时按照那个js版本语法检查，但这里不包含全局变量
全局变量需要通过前面的env节点配置
"parserOptions":{ "ecmaVersion":12 } -
rules节点
有两个用法
-
不使用extend节点配置整套的规范，而是在rules节点中直接配置
在生成项目的时候选择
?How would you like to define a style for your project? Use a popular style guide Answer questions about your style >Inspect your JavaScript file(s) // 选择第三个- 使用extend节点的整套规范，但是在rules节点里面可以修改部分规范的配置
-
5.ESLint语法检查的规则
-
ESlint的语法规范的本质
就是函数，在node_modules/eslint/rules/utils下面
- eslint内置285个规则，每条规则都是一个create函数
- 进行语法检查时，会将代码传入这些函数内做检查
具体分为7类
6.语法规范包类型
-
内置规范包
-
已经随eslint一起下载：
eslint-all：使用全部280多条规则
eslint-recommended：只使用推荐的50个规则
-
-
标准规范包（需要下载）
-
包名：eslint-config-standard 也使用了200多个规则
-
下载方式：
-
可以在创建eslint配置文件时选择下载
-
手动下载，官方git地址 https://github.com/standard/standard
下载包：
npm i eslint-config-standard -D
-
-
-
第三方规范包
以airbnb举例
-
包名：eslint-config-airbnb-base
-
官方地址：去npm上找eslint-config-airbnb-base
-
手动下载：
-
查看需要下载的包和版本
npm info "eslint-config-airbnb-base@latest" peerDependencies -
下载相关包
npx install-peerdeps --dev eslint-config-airbnb-base
-
-
7.配置规范包
"extends":"eslint:all" // 内置规则用分号隔开
"extends":"eslint:recommended"
"extends":"standard" // 第三方标准规则
"extends":"airbnb-base" // 第三方，airbnb公司规则
检查严格程度 all>airbnb-base>standard>recommended
原文地址：http://www.cnblogs.com/oaoa/p/16836080.html
