ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，可以检查常见的Javascript代码错误，如果每次在代码提交之前都进行一次eslint代码检查，就不会因为某个字段未定义为undefined或null这样的错误而导致服务崩溃，可以有效的控制项目代码的质量。
全局安装npm i eslint -g
如果项目中没有.eslintrc.json配置文件，可通过--init参数生成一个新的文件
eslint --init
通过env配置需要启动的环境
"env": {
"es6": true, // 支持新的 ES6 全局变量，同时自动启用 ES6 语法支持
"node": true // 启动node环境
}-
ESLint规则的三种级别
- "off"或者0，不启用这个规则
- "warn"或者1，出现问题会有警告
- "error"或者2，出现问题会报错
-
"no-console": "off"禁用 console -
"no-unused-vars": 2禁止出现未使用过的变量 -
"no-use-before-define": 2不允许在变量定义之前使用它们 -
"linebreak-style": [2, "unix"]强制使用一致的换行风格 -
"quotes": ["error", "single"]强制使用一致的单引号 -
"semi": ["error", "always"]控制行尾部分号 -
"curly": ["error", "all"]强制所有控制语句使用一致的括号风格- error
let a = 1; if (a) return a;- success
let a = 1; if (a) { return a; } -
"default-case": "error"switch 语句强制 default 分支，也可添加 // no default 注释取消此次警告 -
"no-else-return": "error"禁止 if 语句中有 return 之后有 else- error
let a = 1; if (a) { return a; } else { return false; }- success
let a = 1; if (a) { return a; } return false; -
"no-implicit-coercion": "error"禁止出现空函数.如果一个函数包含了一条注释，它将不会被认为有问题。 -
"no-invalid-this": "error"禁止 this 关键字出现在类和类对象之外 -
"no-loop-func": "error"禁止在循环中出现 function 声明和表达式 -
"no-multi-spaces": "error"禁止使用多个空格 -
"no-new-func": "error"禁止对 空Function 对象使用 new 操作符 -
"no-useless-return": "error"禁止没有任何内容的return; -
"global-require": "error"要求 require() 出现在顶层模块作用域中- error
function foo() { if (condition) { const fs = require("fs"); } }- success
const fs = require("fs"); function foo() { if (condition) { // todo fs ... } } -
"no-path-concat": "error"禁止对 dirname 和 filename进行字符串连接- error
const fullPath = __dirname + 'test.js';- success
两个path.join()和path.resolve()是任何地方正在创建的文件或目录路径为字符串连接合适的替代品
const path = require('path'); const fullPath1 = path.join(__dirname, 'test.js'); const fullPath2 = path.resolve(__dirname, 'test.js'); -
"no-sync": "error"禁用同步方法 -
"array-bracket-spacing": ["error", "never"]指定数组的元素之间要以空格隔开(, 后面)， never参数：[ 之前和 ] 之后不能带空格，always参数：[ 之前和 ] 之后必须带空格 -
"block-spacing": ["error", "always"]禁止或强制在单行代码块中使用空格(禁用) -
"brace-style": ["error", "1tbs"]- error
const condition = 1; if (condition) { // todo: }- success
const condition = 1; if (condition) { // todo: } -
"camelcase": "error"强制驼峰法命名 -
"comma-dangle": ["error", "always-multiline"]数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗,always-multiline：多行模式必须带逗号，单行模式不能带逗号号 -
"comma-spacing": ["error", { "before": false, "after": true }]控制逗号前后的空格 -
"comma-style": ["error", "last"]控制逗号在行尾出现还是在行首出现 (默认行尾)- error
let a = 1 , b = 2;- success
let a = 1, b = 2; -
"key-spacing": ["error", { "beforeColon": false, "afterColon": true }]该规则规定了在对象字面量语法中，key和value之间的空白，冒号前不要空格，冒号后面需要一个空格- error
const obj = { a:1, b:2 };- success
const obj = {a: 1, b: 2}; -
"lines-around-comment": ["error", { "beforeBlockComment": true }]要求在注释周围有空行 ( 要求在块级注释之前有一空行) -
"newline-after-var": ["error", "always"]要求或禁止 var 声明语句后有一行空行 -
"newline-before-return": "error"要求 return 语句之前有一空行 -
"no-multi-assign": "error"链接变量的赋值可能会导致意外的结果并难以阅读，不允许在单个语句中使用多个分配- error
let a = b = c = 1;- success
let a = 1; let b = 1; let c = 1; -
"max-params": [1, 3]function 定义中最多允许的参数数量- error
function test(a, b, c, d) { return a + b + c + d; } test(1, 2, 3, 4);- success
function test({a, b, c, d}) { return a + b + c + d; } test({a: 1, b: 2, c: 3, d: 4}); -
"new-cap": ["error", { "newIsCap": true, "capIsNew": false}]构造函数首字母大写- error
class test { } new test();- success
class Test { } new Test(); -
"no-multiple-empty-lines": ["error", {"max": 2}]空行不能够超过2行 -
"no-shadow-restricted-names": "error"禁止对一些关键字或者保留字进行赋值操作，比如NaN、Infinity、undefined、eval、arguments等 -
"no-undef-init": "error"禁止把undefined赋值给一个变量 -
"keyword-spacing": "error"keyword 前后需要空格 "space-before-blocks": ["error","always"]强制在块之前使用一致的空格
{
"env": {
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"sourceType": "script"
},
"rules": {
"no-console": 0,
"no-unused-vars": "error",
"no-use-before-define": "error",
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
],
"curly": ["error", "all"],
"default-case": "error",
"no-else-return": "error",
"no-empty-function": "error",
"no-implicit-coercion": "error",
"no-invalid-this": "error",
"no-loop-func": "error",
"no-multi-spaces": "error",
"no-new-func": "error",
"no-useless-return": "error",
"global-require": "error",
"no-path-concat": "error",
"no-sync": "error",
"array-bracket-spacing": [
"error",
"never"
],
"block-spacing": [
"error",
"always"
],
"brace-style": [
"error",
"1tbs"
],
"camelcase": "error",
"comma-dangle": [
"error",
"always-multiline"
],
"comma-spacing": [
"error",
{ "before": false, "after": true }
],
"comma-style": [
"error",
"last"
],
"key-spacing": [
"error",
{ "beforeColon": false, "afterColon": true }
],
"lines-around-comment": [
"error",
{ "beforeBlockComment": true }
],
"newline-after-var": [
"error",
"always"
],
"newline-before-return": "error",
"no-multi-assign": "error",
"max-params": [1, 3],
"new-cap": [
"error",
{
"newIsCap": true,
"capIsNew": false
}
],
"no-multiple-empty-lines": [
"error",
{
"max": 2
}
],
"no-shadow-restricted-names": "error",
"no-undef-init": "error",
"keyword-spacing": "error",
"space-before-blocks": [
"error",
"always"
]
}
}以通过在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略掉不需要检测的文件或者目录
- 方法一: 新建.eslintignore文件
```.eslintignore
test.js
* 方法二: 通过package.json文件设置
package.json
```js
{
"name": "my_project",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": ""
},
"eslintConfig": { // 也可配置eslint
"env": {
"es6": true,
"node": true
}
},
"eslintIgnore": ["test.js"]
}
eslint可以结合pre-commit插件使用，目的是在package.json的scripts之前对一些指定的命令提前运行, 相当于一个勾子
//npm install --save-dev pre-commit
//package.json 文件
"scripts": {
"dev": "node app",
"lint": "eslint .",
"fix": "eslint --fix ."
},
"pre-commit": [
"fix",
"lint"
],
//执行git commit -m 'test' 提交代码时 会先执行pre-commit中的代码
随时随地看视频
