eslint 入门

安装

// 局部安装
npm i eslint --save-dev

or

yarn add eslint

// 全局安装
npm i eslint -g

yarn global eslint

初始化

npx eslint init

of 

// 全局安装 eslint
eslint init

检测

// eslint [options] [file|dir|glob]*

npx eslint src/index.js

配置

注释配置

/* eslint-env node, mocha */

文件配置

// .eslintrc
{
    env:{
    
    }
}

// package.json
{
    eslintConfig: {
        ...
    }
}

配置项

• extends: [ ... ] 继承已有预设规则

   extends: [
      'airbnb',
      'prettier',
      'plugin:jest/recommended',
      'plugin:react/recommended',
      'plugin:import/typescript',
      'prettier/react',
    ],
  

• parser : esprima 解析器 详情

  "parser": "esprima"
  

• plugins: [ ... ] 插件, 检测其他类型文件中的js代码, 可省略 “eslint-plugin-” 前缀名 详情

  "plugins": [
      "plugin1",
      "eslint-plugin-plugin2"
  ]
  

• processor: "插件名/处理器名" 指定插件内的处理器, 插件需先配置在 plugins中 详情

"plugins": ["a-plugin"],
"processor": "a-plugin/a-processor"

• overrides: [ { ... } ] 为指定类型文件单独设置配置

   "plugins": ["a-plugin"],
      "overrides": [
          {
              "files": ["*.md"],
              "processor": "a-plugin/markdown",
               "rules": {
                  "strict": "off"
              }
          }
      ]
  

• env : { ... } 预设全局环境变量 详情

   "env": {
          "browser": true, // 浏览器环境
          "node": true // node环境
      }
  

• globals: { [ 变量名：“writable” | “readonly” ] } 自定义全局变量 详情

  {
      "globals": {
          "var1": "writable",  // 可修改
          "var2": "readonly"   // 只读
      }
  }` `
  

• rules：[ 规则名: 错误等级 ] 代码检测规则 详情

  • "off" | 0 关闭规则
  • ”warn“ | 1 警告级
  • ”error“ | 2 错误级 < 将退出程序 >

  // 注释型配置
  /* eslint eqeqeq: "off", curly: "error" */
  
  
  // 文件型配置
   "rules": {
      "eqeqeq": "off",
      "curly": "error",
      "quotes": ["error", "double"]
  }
  

• settings: { ... } 共享信息， 各规则将共享该数据

  "settings": {
     "sharedData": "Hello"
  }
  

注释配置类型 详情

• 规则禁用块

  /* eslint-disable */
  
  alert('foo');
  
  /* eslint-enable */
  

• 指定规则禁用块

  /* eslint-disable no-alert, no-console */
  
  alert('foo');
  console.log('bar');
  
  /* eslint-enable no-alert, no-console */
  

• 文件规则禁用

  /* eslint-disable */
  
  alert('foo');
  

• 单行规则禁用

  // 禁用全部规则  [ eslint-disable-line ]
  
  alert('foo'); // eslint-disable-line
  
  // eslint-disable-next-line
  alert('foo');
  
  /* eslint-disable-next-line */
  alert('foo');
  
  alert('foo'); /* eslint-disable-line */
  
  
  
  // 禁用指定规则  [ eslint-disable-line  规则名 ]
  
  alert('foo'); // eslint-disable-line no-alert
  
  // eslint-disable-next-line no-alert
  alert('foo');
  
  alert('foo'); /* eslint-disable-line no-alert */
  
  /* eslint-disable-next-line no-alert */
  alert('foo');
  
  
  // 禁用多条指定规则  [ eslint-disable-line  规则名1, 规则名2, 规则名3 ]
  
  alert('foo'); // eslint-disable-line no-alert, quotes, semi
  
  // eslint-disable-next-line no-alert, quotes, semi
  alert('foo');
  
  alert('foo'); /* eslint-disable-line no-alert, quotes, semi */
  
  /* eslint-disable-next-line no-alert, quotes, semi */
  alert('foo');
  
  
  

优先级 详情

项目中可以存在多个规则配置文件， 采用就近原则, 叠加配置

文件检测屏蔽配置 .eslintignore 详情

// .eslintignore 屏蔽配置文件

# 注释
/root/src/*.js

# Invalid
\root\src\*.js

命令 详情

规则 详情

工具集成 详情

扩展

• 开发 eslint 规则
• 深入浅出eslint——关于我学习eslint的心得