eslint，今天你学会了嘛？

J_npc
474 阅读4分钟

ESLint，可组装的JavaScript和JSX检查工具，用来检测你的代码是否符合指定的规范。
(本文将使用pnpm作为包管理，yarn和npm类似)

官网

中文官网
英文官网

快速使用

在项目中或者全局安装（-g） pnpm install -D eslint

快速生成eslint配置 eslint --init
ME1666598646867.jpeg

添加script命令，检测src目录下文件 "lint": "eslint --ext .js,.jsx,.ts,.tsx src " ME1666598759762.jpeg

看到上面的eslint执行结果报了很多不算是错误的问题，这些都可以通过eslint配置来优化

关于eslint配置

  1. 配置项

  • extends - 一个配置集合，基本是属于一个项目可用的解决方案，可配合plugins和rules，对rule二次加工。

    extends 属性值可以以下几种组成：

    • plugin: - plugins可以省略包名的前缀 eslint-plugin-
    • 包名
    • 内置配置名称
    {
  "plugins": [
        "plugin1"
    ],
   "extends": [
        "plugin:plugin1/myConfigs"  // 插件
       	"Airbnb",  // 包名
       "eslint:recommended", // 内置
    ],
}

  • globals - 脚本在执行期间访问的额外的全局变量。globals 配置属性设置为一个对象,该对象包含以你希望使用的每个全局变量。对于每个全局变量键，将对应的值设置为 "writable" 以允许重写变量，或 "readonly" 不允许重写变量,"off"禁用全局变量。

    {
  "globals": {
    "test": "writable",
    }
}
或
 global test:writable  添加注释

直接在项目中使用test，不会报错，no-undef

  • plugins - 在配置文件里配置插件时，可以使用 plugins 关键字来存放插件名字的列表（可省略eslint-plugin-前缀），定义后会添加多条rule规则，但并不是开启的，需要在rule中定义开关状态。

    {
    "plugins": [
        "plugin1",
        "eslint-plugin-plugin2"
    ],
    "rules":{
        "pugin1/test-rule":"2"
    }
}
123456

  • rules - 启用的规则及其各自的错误级别。

    • "off" 或 0 - 关闭规则
    • "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
    • "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
    {
   "plugins": [
        "plugin1"
    ],
	 "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"],
         启用plugin的规则，当指定来自插件的规则时，确保删除 eslint-plugin- 前缀
     		"plugin1/rule1": "warn"   
    }
}

  • parser - 默认解析器为Espree, 可以传其他解析器： esprima、babel-eslint、@typescript-eslint/parser

  • root - 默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。为了将 ESLint 限制到一个特定的项目，在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件设置 "root": true。ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。

  • .eslintignore - 配置文件可忽略检测的文件，前端项目目录下创建该文件

  1. 配置项优先级

    rules>extends , extends后定义的优先级高
    plugin需要在rules或extends中定义才会生效

ESLint原理（-1到0）

  1. eslint的工作整体流程？
（1）解析成AST，通过eslint内置的parser或者通过配置传递的parser，例如@typescript/eslint-parser 等
（2）封装SourceCode，即eslint会把解析好的AST封装成sourceCode
（3）创建rule监听器，AST遍历，最终获取lintingProblems
（4）过滤掉通过注释忽略的问题
（5）在lintingProblems中会保存每个错误信息及修复方法，并通过字符串替换修复错误(slice）
  1. 如何通过AST遍历，获取lintingProblems？
（1）每个rule都会再create方法中都会返回一个或者多个选择器，如图标红的地方。
   //发布订阅-https://github.com/eslint/eslint/blob/main/lib/linter/safe-emitter.js
（2）遍历rules，生成每个rule的ruleListeners对象，遍历对象，通过emit.on（选择器，加工后的rule中对应的方法）
（3）遍历AST，如果AST中的type(选择器)和rule中定义的相同，就会触发emit.emit(选择器，其他参数)，如果校验错误，返回信息（message：错误信息，fix：修复方法....）
   //详情：https://cn.eslint.org/docs/developer-guide/working-with-rules#the-context-object  中context.report()的部分

以eslint的官网[no-delete-vars]，图如下：github.com/eslint/esli… 为例 ME1666601642832.jpeg

eslint-nibble

可以按照规则进行分类统计展示，效果如下

 // 安装依赖
     pnpm install -D eslint-nibble
 // package.json添加以下命令
 {
     scripts：{
        "nibble": "eslint-nibble --ext .js,.jsx,.ts,.tsx src",
        "nibble:rule": "eslint-nibble --ext .js,.jsx,.ts,.tsx --rule no-unused-vars src"
 }

ME1666686937316.jpeg

创建一个适合项目的eslint-config

可以使用pnpm workspace进行包管理，同时维护多个eslint-config，点击链接查看。(github.com/waltiu/esli…)

avatar
文章
阅读
粉丝