一文帮你搞懂Eslint

目的

记录自己在学习Eslint, Prettier工具时的总结，每次自己eslint-plugin-prettier, eslint-config-prettier,都不知道干啥用的，傻傻分不清楚，也想把自己学习到的东西分享给大家

.eslintrc.js

有没有和我一样，每次开发一个新项目是不是都到处拷贝之前的配置文件,关键是有的拷贝了还不生效，今天就把相关属性解释下

{
    // root eslint一旦找到了.eslintrc.js 文件中配置有 root: true,就不会继续从父文件夹下找，知道根文件夹
    "root": true,
    // extends 其实就是包含了 很多预设的rules，我们可以通过rules覆写这些规则
    "extends": [
        // eslint 默认推荐的解析规则
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    // 默认解析器为 Espree,解析器就是 eslint把我们的代码转换成AST的解析器，然后根据rules检测我们写的代码是不是规范
    "parser": "@typescript-eslint/parser",
    "parserOptions": { 
        "ecmaVersion": "latest", // 描述语法，表示用最新的语法，可以用let const 等等
        "sourceType": "module", // 支持 import 模块导入
        "ecmaFeatures":{
            // 支持jsx语法，不然我们在文件中jsx语法，会报错
            "jsx": true 
        }
     },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
        "@typescript-eslint/strict-boolean-expressions": [
            2,
            {
                "allowString" : false,
                "allowNumber" : false
            }
        ],
        "no-unused-vars": 0
    },
}

parserOptions.ecmaVersion

假如我们注释了这行

parserOptions.sourceType

注释这行

parserOptions.ecmaFeatures.jsx

注释

extends vs plugins

是不是有时候和我一样，extends 和 plugins这两个有啥区别,加了 extends还有必要加plugins吗。

• plugins 是定义了一组规则方法，比如说一行代码末尾需不需要";"、使用单引号还是双引号
• extends plugins定义了一组规则方法，但是当我们代码不符合规则的时候，是提示报错、警告、还是报错，或者是使用双引号还是单引号，这些需要我们去配置，extends就是一组rules

就那上面的.eslintrc.js中的配置文件来说，加入我们在extends中加了plugin:@typescript-eslint/recommended，其实下面的plugins中没有必要加@typescript-eslint中的，会自动添加的。

module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: { sourceType: "module" },
  plugins: ["@typescript-eslint"],
  extends: ["@typescript-eslint/recommend"],
  rules: {
    "@typescript-eslint/explicit-function-return-type": [
      "error",
      {
        allowExpressions: true
      }
    ]
  }
}

module.exports = {
  plugins: [],
  extends: ["plugin:@typescript-eslint/recommended"],
  rules: {
    "@typescript-eslint/explicit-function-return-type": [
      "error",
      {
        allowExpressions: true
      }
    ]
  }
}

上面两份的配置其实是一样的

eslint-config-xxx

以eslint-config-prettier为例，模块命名格式为eslint-config-开头，然后新建一个index.js文件，在里面写我们的自定义配置

module.exports = {
    rules: {
        quotes: ["error", "single"],
    },
}

接着我们就可以在我们的.eslintrc.js文件中的extends字段配置我们的配置，可以写完整的名字或者简写{extends:'eslint-config-myconfig'}或者{extends:'myconfig'},具体链接

下面就是eslint-config-prettier的自定义规则

eslint-plugin-prettier

以上为eslint-plugin-prettier 导出的配置文件，可以看到有两个关键属性，configs,rules,

我们可以看到 plugins为 prettier,表示应用插件eslint-plugin-prettier,表示加入了该插件的自定义规则，以此规则运行eslint;

"rules": {
    "prettier/prettier": "error"
  }

表示配置上面的rules.prettier的表现规则，配置eslint-plugin-prettier规则中的自定义规则名为prettier的表现形式

此配置相当于是引用 configs.recommended的配置

参考