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的心得