Eslint 超简单入门教程
Eslint 超简单入门教程
目标
学习完本教程希望对下面这个 .eslintrc.js 文件能够做到心里有数。
// .eslintrc.js
module.exports = {
"extends": "airbnb",
"rules": {
"semi": [2, "never"],
"no-console": 0,
"comma-dangle": [2, "always-multiline"],
"max-len": 0,
"react/jsx-first-prop-new-line": 0,
"react/jsx-filename-extension": 0,
"space-before-function-paren": [2, "always"],
"no-unused-expressions": [0, {
"allowShortCircuit": true,
"allowTernary": true
}],
"arrow-body-style": [0, "never"],
"func-names": 0,
"prefer-const": 0,
"no-extend-native": 0,
"no-param-reassign": 0,
"no-restricted-syntax": 0,
"no-eval": 0,
"no-continue": 0,
"react/jsx-no-bind": 0,
"no-unused-vars": [2, { "ignoreRestSiblings": true }],
"no-underscore-dangle": 0,
"global-require": 0,
"import/no-unresolved": 0,
"import/extensions": 0,
"jsx-a11y/href-no-hash": 0,
"react/no-array-index-key": 0,
"react/require-default-props": 0,
"react/forbid-prop-types": 0,
"react/no-string-refs": 0,
"react/no-find-dom-node": 0,
"import/no-extraneous-dependencies": 0,
"import/prefer-default-export": 0,
"react/no-danger": 0,
"jsx-a11y/no-static-element-interactions": 0,
},
"parser": "babel-eslint",
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 8,
"ecmaFeatures": {
"jsx": true,
"experimentalObjectRestSpread": true
}
},
"settings": {
"import/resolver": "node"
}
};
Eslint 是什么
每个程序员都有自己的编码习惯，最常见的莫过于：
- 有的人写代码一行代码结尾必须加分号 ;，有的人觉得不加分号 ; 更好看；
- 有的人写代码一行代码不会超过 80 个字符，认为这样看起来简洁明了，有的人喜欢把所有逻辑都写在一行代码上，觉得别人看不懂的代码很牛逼；
- 有的人习惯定义变量使用单引号，而不是双引号；
Eslint 的含义
Lint 是检验代码格式工具的一个统称，具体的工具有 Jslint 、 Eslint 等等 …
我们可以形象地将 Lint 看成是电商行业，而电商行业具体表现有淘宝（Eslint）、京东（Jslint）等。
使用 Eslint
确保你的电脑安装了 node 和 npm 环境
创建项目
npm init 指令会在项目根目录下生成 package.json 文件。
安装依赖包
–save-dev 会把 eslint 安装到 package.json 文件中的 devDependencies 属性中，意思是只是开发阶段用到这个包，上线时就不需要这个包了。
$ npm install eslint --save-dev
设置 package.json 文件
打开 package.json 文件，修改 script 属性如下：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint src",
"lint:create": "eslint --init"
}
- script 属性的意思是脚本，使用方法是在 cmd 窗口中输入 npm run 指令 的形式，如：npm run lint:create；
- “lint:create”: “eslint --init” 这个脚本是为了生成 .eslintrc.js 文件，在介绍 Lint 的时候说到 Lint 应该提供编码规范，规范写在哪里，就写在这个文件，所以我们需要创建它；
- “lint”: “eslint src” 在介绍 Lint 的时候也说到 Lint 应该提供自动校验代码的程序，这个脚本是让 Lint 自动检验 src 目录下所有的 .js 文件。
创建 .eslint.js 文件
$ npm run lint:create
> [email protected] lint:create D:\code\test\20170811
> eslint --init
? How would you like to configure ESLint? Answer questions about your style // 以问答的形式创建配置文件
? Are you using ECMAScript 6 features? Yes // 是否校验 Es6 语法
? Are you using ES6 modules? Yes // 是否校验 Es6 模块语法
? Where will your code run? Browser // 代码运行环境，Browser 指浏览器
? Do you use CommonJS? Yes // 是否校验 CommonJs 语法
? Do you use JSX? Yes // 是否校验 JSX 语法
? Do you use React? Yes // 是否校验 React 语法
? What style of indentation do you use? Tabs // 首行空白选择 Tab 键还是 Space
? What quotes do you use for strings? Double // 字符串使用单引号 'string' 还是双引号 "string"
? What line endings do you use? Windows // 操作系统
? Do you require semicolons? Yes // 每行代码结尾是否校验加分号 ;
? What format do you want your config file to be in? JavaScript // 以 .js 格式生成配置文件
Installing eslint-plugin-react@latest // 因为要校验 Reac 语法，所以这里需要下载一个 React 语法规则的包
创建完成后根目录下应该会出现 .eslintrc.js 文件
创建 index.js 文件
在根目录下创建 src/index.js 文件，内容如下，接下来就使用 Eslint 来检验这个 .js 文件是否符合编码规范。
const lint = 'eslint'
此时的目录结构应该为：
- test-eslint
- .eslintrc.js
- package.json
- src
- index.js
校验代码
$ npm run lint
1:7 error 'lint' is assigned a value but never used no-unused-vars
1:14 error Strings must use doublequote quotes
1:22 error Missing semicolon semi
3 problems (3 errors, 0 warnings)
2 errors, 0 warnings potentially fixable with the `--fix` option.
这里报了三个错误，分别是：
- index.js 第1行第7个字符，报错编码规则为 no-unused-vars：变量 lint 只定义了，但是未使用；
- index.js 第1行第14个字符，报错编码规则为 quotes：编码规范字符串只能使用双引号，这里却使用了单引号；
- index.js 第1行第22个字符，报错编码规则为 semi：编码规范每行代码结尾必须加分号，这里没有加分号。
当我们熟悉了编码规范之后，只需进行响应的修改就可以使代码形成统一的风格。刚开始如果对编码规范具体某一条规则不了解的话，可以在 eslint规则表 查看用法。（不建议去背规则表，而是用到什么查什么，把它当成字典来用，不那么累）
设置 --fix 参数
打开 package.json 文件，修改 script 属性如下：
"scripts": {
"test": "react-scripts test --env=jsdom",
"lint": "eslint src --fix",
"lint:create": "eslint --init"
}
说明：这里给 “lint”: “eslint src --fix”, 加上 --fix 参数，是 Eslint 提供的自动修复基础错误的功能。
此时运行 npm run lint 会看到少了两条报错信息，并不是说编码规范变了，而是 Eslint 自动修复了基础错误，打开 index.js 文件，可看到字符串自动变成了双引号，并且代码末尾也加上了分号。可惜的是 --fix 只能修复基础的不影响代码逻辑的错误，像 no-unused-vars 这种错误只能手动修改。
配置文件讲解
// .eslintrc.js
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
}
}
env、parserOptions、plugins
这三个放在一起将是因为你只需要知道它们是干嘛的：我的程序里要用到 ES6 、React 、JSX 语法，这几个属性就是让 Eslint 能够检验到这些语法的。其余的你不需要知道更多的哪怕一丢丢的东东了。
rules
配置文件也生成了，我们怎么知道我们的系统会遵循什么规则呢？？
在前面的列子中，使用 npm run lint 校验出了三处错误，假如我们的项目中字符串就是要使用单引号而不是双引号，代码结尾就是要不加分号才好看，变量就是定义了可能不会使用，我们可以通过设置 rules 来定义我们自己的编码规范，即规则。
ESLint 附带有大量的规则，修改规则应遵循如下要求：
“off” 或 0 - 关闭规则
“warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
“error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
有的规则没有属性，只需控制是开启还是关闭，像这样：“eqeqeq”: “off”，有的规则有自己的属性，使用起来像这样：“quotes”: [“error”, “double”]，具体有没有自带属性，可查看 eslint规则表。
修改 .eslintrc.js 文件中的 rules 属性：
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"single" // 改成字符串必须由单引号括起来而不是双引号，'string'不报错，"string"报错
],
"semi": [
"error",
"never" // 改成代码结尾不再加分号，加了分号报错，不加分号不报错
],
"no-unused-vars": 0 // 0 相当于 off，表示关闭规则，相当于不再校验这条规则：变量定义了必须使用
}
此时再使用 npm run lint 进行代码校验，没有报错就说明校验通过，代码符合统一编码规范。
D:\code\test\20170811>npm run lint
> [email protected] lint D:\code\test\20170811
> eslint src
D:\code\test\20170811>
常用的几个规则
"quotes": [1, "single"], # 单引号
"quote-props":[2, "as-needed"], # 双引号自动变单引号
"semi": [2, "never"], # 一行结尾不要写分号
"comma-dangle": [1,"always-multiline"] # 对象或数组多行写法时，最后一个值加逗号