ESLint学习

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配置文件

1. 执行node_modules/.bin文件夹里面的eslint脚本来创建配置文件

   • 包含完整脚本路径的命令： ./node_modules/.bin/eslint --init

   • 也可以npx来执行（推荐）: npx eslint --init

     (npx和node一起安装，可以去.bin目录里面找到目标脚本文件，简化执行脚本的语法)

2. 创建配置文件中需要选择配置

   eslint默认只能检查js语法，所以要检查vue或者react需要在配置时选择

3. 执行结果

   • 创建了配置文件 .eslintrc.js

   • 下载了相关规范包

     （如果选的是standard语法规范包的话，而它需要用到import/node/promise包）

4. ESLint执行

   命令：npx eslint ./需要检查语法的文件路径

   如果违反规范，会将错误提示到终端，说明eslint工作正常

5. 配置文件格式

   通过npx eslint --init创建配置文件时，有体用配置文件的格式给我们选择

   其中加载的优先级是js>yaml>json，所以我们最好选择js格式

6. JS格式使用模式

   配置文件内部使用的是module.exports导出配置数据

   是因为在添加配置文件的时候，选择了CommonJS

   如果选择了JavaScript modules，那么就会使用export导出配置数据

   所以ESLint配置文件应尽可能与它保持一致

7. env节点

   "env": {
   	"browser": true,
   	"commonjs":true,
   	"es2021":true
   }
   

   在ESLint的各种规范中，一般都不允许使用未在页面内声明的成员

   开发中经常会用到运行环境的自带api，比如：

   • 浏览器中的window/document
   • nodejs中的__dirname等
   • es2021中的WeakRef等

   所以要告诉eslint当前代码是运行在什么环境中，这样检查的时候就不会报错了

8. extends选项

   选择要遵循那些规则，有内置的standard、all、recommended等

   如果使用第三方下载的eslint-config-standard规范时配置extends可以省略eslint-config-直接写成standard

   extends:'standard'
   extends:['eslint:all']
   extends:['eslint:recommended']
   

9. globals节点

   如果第三方库比如jquery，引入之后使用$因为之前没有声明过，所以会报错，在globals里面配置一下，下次在全局引用的时候，就会通过检查，不会报错了

   globals用于手动配置全局成员

   "globals":{
       "$":true
   }
   

10. parserOptions节点

    ESLint解析器 解析代码时可以指定那个js版本

    注意：这里是指定检查时按照那个js版本语法检查，但这里不包含全局变量

    全局变量需要通过前面的env节点配置

    "parserOptions":{
        "ecmaVersion":12
    }
    

11. 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语法检查的规则

1. ESlint的语法规范的本质

   就是函数，在node_modules/eslint/rules/utils下面

   • eslint内置285个规则，每条规则都是一个create函数
   • 进行语法检查时，会将代码传入这些函数内做检查

   具体分为7类

   

6.语法规范包类型

1. 内置规范包

   • 已经随eslint一起下载：

     eslint-all：使用全部280多条规则

     eslint-recommended：只使用推荐的50个规则

2. 标准规范包（需要下载）

   • 包名：eslint-config-standard 也使用了200多个规则

   • 下载方式：

     • 可以在创建eslint配置文件时选择下载

     • 手动下载，官方git地址 https://github.com/standard/standard

       ​ 下载包：npm i eslint-config-standard -D

3. 第三方规范包

   以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