Skip to main content

基本知识

Q：是什么？​

  • A：可组装的 JavaScript 和 JSX 检查工具。

Q：能干啥？​

  • A：用来检测 js 和 jsx 语法的工具，可以配置各项功能。

Q：如何添加配置？​

  • A：

    • 方法一：.eslintrc.*：新建文件，位于项目根目录

      • .eslintrc

      • .eslintrc.js

      • .eslintrc.json

      区别在于配置格式不一样

    • 方法二：package.json 中 eslintConfig：不需要创建文件，在原有文件基础上写

Q：配置文件内容含义？​

  • A：

    module.exports = {
      // 解析选项
      parserOptions: {},
      // 具体检查规则
      rules: {},
      // 继承其他规则
      extends: [],
      // ...
      // 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
    };

    • parserOptions 解析选项

      parserOptions: {
        ecmaVersion: 6, // ES 语法版本
        sourceType: "module", // ES 模块化
        ecmaFeatures: { // ES 其他特性
          jsx: true // 如果是 React 项目，就需要开启 jsx 语法
        }
      }

    • rules 具体规

      值描述
      "off" 或 0关闭规则
      "warn" 或 1开启规则，使用警告级别的错误：warn (不会导致程序退出)
      "error" 或 2开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

      • 示例

        rules: {
          semi: "error", // 禁止使用分号
          'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告
          'default-case': [
            'warn', // 要求 switch 语句中有 default 分支，否则警告
            { commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
          ],
          eqeqeq: [
            'warn', // 强制使用 === 和 !==，否则警告
            'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
          ],
        }

    • extends 继承

      • 示例：

        // 例如在React项目中，我们可以这样写配置
        module.exports = {
          extends: ["react-app"],
          rules: {
            // 我们的规则会覆盖掉react-app的规则
            // 所以想要修改规则直接改就是了
            eqeqeq: ["warn", "smart"],
          },
        };
0%