eslint-config-fhfe

eslint-config-fhfe 是烽火 UED 前端组为了帮助保持团队的代码风格统一，发现代码潜在错误而定制出了友好的 ESLint 配置。

使用

项目中使用

npm install --save-dev eslint babel-eslint eslint-config-fhfe

在你的项目根目录下创建 .eslintrc.js，并将以下内容复制到文件中：

module.exports = {
    extends: [
        'eslint-config-fhfe',
    ],
    globals: {
        // 这里填入你的项目需要的全局变量
        // 这里值为 false 表示这个全局变量不允许被重新赋值
    rules: {
        // 这里填入你的项目需要的个性化配置
    }
};

vscode 中使用

首先，打开 VSCode 扩展面板并搜索 ESLint 扩展，然后点击安装，安装完毕之后点击 重新加载 以激活扩展，但想要让扩展进行工作，我们还需要先进行 ESLint 的安装配置。
- 如果你仅仅想让 ESLint 成为你项目构建系统的一部分，我们可以在项目根目录进行本地安装：
npm install eslint --save-dev
- 如果想使 ESLint 适用于你所有的项目，我们建议使用全局安装，使用全局安装 ESLint 后，你使用的任何 ESLint 插件或可分享的配置也都必须在全局安装。
npm install -g eslint

安装并配置完成 ESLint 后，我们继续回到 VSCode 进行扩展设置，依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件

从左侧系统设置中可以看到，ESLint 扩展默认已经启用，我们现在只需在右侧用户设置中添加配置来指定我们创建的 .eslintrc.js 配置文件路径即可启用自定义规则检测，ESLint 会查找并自动读取它们：
```
"eslint.options": {
    "configFile": "xxx/xxx/.eslintrc.js"
},
```
pre-commit 钩子

如果项目使用了 git, 可以通过使用 pre-commit 钩子在每次提交前检测，如果检测失败则禁止提交。

首先在package.json中添加script命令：
```
"scripts": {
"eslint": "eslint --ext .js src"
}
```
安装 pre-commit
```
npm install pre-commit --save-dev
```
在package.json中配置 pre-commit 需要运行的命令：
```
"pre-commit": [
    "eslint"
]
```
完成之后，在每次提交之前，都会运行 eslint 命令进行检测，如果检测到有违反代码规则的情况，则会返回 1，导致 git commit 失败。
代码自动修复

在 ESLint 规则列表页面，我们发现有些规则的旁边会带有一个橙色扳手图标，表示在执行 eslint 命令时指定 --fix 参数可以自动修复该问题。
```
eslint test.js --fix
```

规则

0 => off => 表示禁用这条规则
1 => warn => 表示仅给出警告，并不会导致检查不通过
2 => error => 会导致检查不通过报错

no-console

0 => 允许console 进行代码调试

for-direction

2 => for 循环的方向要求必须正确

incorrect 
/*eslint for-direction: "error"*/
for (var i = 0; i < 10; i--) {
}

for (var i = 10; i >= 0; i++) {
}

correct 
/*eslint for-direction: "error"*/
for (var i = 0; i < 10; i++) {
}

accessor-pairs

2 => 有 setter 的地方必须有 getter，有 getter 的地方可以没有 setter
getter-return

[2, {allowImplicit: false}] => getter 必须有返回值

no-await-in-loop

1 => 允许在循环中出现 await 是为了限制无法同时发送多个异步请求这里不建议使用 await 但是如果设为不允许太严格了

incorrect 
async function foo(things) {
    const results = [];
    for (const thing of things) {
        // Bad: each loop iteration is delayed until the entire asynchronous operation completes
        results.push(await bar(thing));
    }
    return baz(results);
}

correct 
async function foo(things) {
    const results = [];
    for (const thing of things) {
        // Good: all asynchronous operations are immediately started.
        results.push(bar(thing));
    }
    // Now that all the asynchronous operations are running, here we wait until they all complete.
    return baz(await Promise.all(results));
}

no-prototype-builtins

1 => 直接调用对象原型链上的方法

incorrect 
/*eslint no-prototype-builtins: "error"*/
var hasBarProperty = foo.hasOwnProperty("bar");
var isPrototypeOfBar = foo.isPrototypeOf(bar);
var barIsEnumerable = foo.propertyIsEnumerable("bar");

correct 
/*eslint no-prototype-builtins: "error"*/
var hasBarProperty = Object.prototype.hasOwnProperty.call(foo, "bar");
var isPrototypeOfBar = Object.prototype.isPrototypeOf.call(foo, bar);
var barIsEnumerable = {}.propertyIsEnumerable.call(foo, "bar");

valid-jsdoc

0 => 关闭函数注释一定要遵守 jsdoc 规则

标准的 jsDoc
/**
 * Add two numbers.
 * @param {number} num1 The first number.
 * @param {number} num2 The second number.
 * @returns {number} The sum of the two numbers.
 */
function add(num1, num2) {
    return num1 + num2;
}

array-callback-return

2 => 对于数据相关操作函数比如 map, filter 等，callback 必须有 return

incorrect 
/*eslint array-callback-return: "error"*/
var indexMap = myArray.reduce(function(memo, item, index) {
    memo[item] = index;
}, {});
var foo = Array.from(nodes, function(node) {
    if (node.tagName === "DIV") {
        return true;
    }
});
var bar = foo.filter(function(x) {
    if (x) {
        return true;
    } else {
        return;
    }
});

correct 
/*eslint array-callback-return: "error"*/
var indexMap = myArray.reduce(function(memo, item, index) {
    memo[item] = index;
    return memo;
}, {});
var foo = Array.from(nodes, function(node) {
    if (node.tagName === "DIV") {
        return true;
    }
    return false;
});
var bar = foo.map(node => node.getAttribute("id"));

block-scoped-var

2 => 针对 var 声明当成块状作用域防止变量提升导致的 bug

dot-location

   链式调用的时候，点号必须放在第二行开头处，禁止放在第一行结尾处

curly

   if 后面必须要有 {，除非是单行 if

eqeqeq

   必须使用 === 或 !==，禁止使用 == 或 !=，与 null 比较时除外

guard-for-in

1 => for in 内部没有 hasOwnProperty 给出警告

 incorrect 
 /*eslint guard-for-in: "error"*/
 for (key in foo) {
 	doSomething(key);
 }

 correct
 /*eslint guard-for-in: "error"*/
 for (key in foo) {
 	if (Object.prototype.hasOwnProperty.call(foo, key)) {
 		doSomething(key);
 	}
 	if ({}.hasOwnProperty.call(foo, key)) {
 		doSomething(key);
 	}
 }

complexity

0 => 关闭代码复杂度限制
default-case

2 => switch case 语句里面一定需要 default 分支
no-fallthrough

2 => switch 的 case 内必须有 break, return 或 throw
no-alert

1 => 代码中使用了 alert 给出警告
no-debugge

2 => 禁止使用 debugger
no-empty-function

2 => 禁止用空函数，除非在空函数里面给出注释说明
no-eq-null

0 => 允许 foo == null 用于判断 foo 不是 undefined 并且不是 null
no-eval

2 => 不允许使用 eval
no-extend-native

2 => 禁止修改原生对象
no-dupe-args

2 => 禁止在函数参数中出现重复名称的参数
no-dupe-keys

2 => 禁止在对象字面量中出现重复名称的键名
no-empty
```
   禁止出现空代码块
```
no-empty-character-class

2 => 禁止在正则表达式中使用空的字符集 []
no-ex-assign

2 => 禁止函数表达式中出现多余的括号
no-extra-semi

2 => 禁止出现多余的分号
no-loop-func

2 => 禁止在循环内的函数中出现循环体条件语句中定义的变量
no-new

2 => 禁止直接 new 一个类而不赋值
no-redeclare

2 => 禁止重复定义变量
no-return-assign

2 => 禁止在 return 语句里赋值
no-useless-call

2 => 禁止出现没必要的 call 或 apply
array-bracket-newline

0 => 数组前后括号不必须换行
array-bracket-spacing

2 => 数组的括号前后禁止有空格
no-mixed-spaces-and-tabs

2 => 禁止混用空格和缩进
array-element-newline

0 => 数组里面的元素关闭强制换行
camelcase

2 => 变量命名需要以驼峰命名法，对属性字段不做限制

comma-style

2 => 逗号必须写在最后面

 correct
 /*eslint comma-style: ["error", "last"]*/
 var foo = 1,
 	bar = 2;

func-name-matching

0 => 函数赋值给变量时，函数名必须和赋值的变量名一致的限制不采纳
func-names

0 => 不限制匿名函数的命名问题
id-blacklist

0 => 变量黑名单，不采纳
id-length

0 => 变量命名长度不做限制
id-match

2 => 变量命令的字符需要在某个正则匹配规则里面，不采纳
linebreak-style

0 => 对换行符不限制
max-depth

2 => 代码块嵌套的深度禁止超过 5 层
max-len

2 => 单行最多允许 300 个字符, 对包含 url 的行不进行此限制
max-lines

0 => 不限制某个文件能够放置的最大代码行数，
max-params

2 => 函数的参数禁止超过 10 个
multiline-ternary

2 => 不限制三元算语句换行
new-cap

2 => 构造函数的必须以大写字母开头
new-parens

2 => new 后面类必须带上括号
newline-per-chained-call

0 => 不限制链式调用必须换行
no-bitwise

0 => 位操作，不进行限制
no-continue

0 => continue 语句的使用，不限制
no-lonely-if

0 => 允许单独使用 if 语句，而不配套使用 else、else if 等
no-multiple-empty-lines

0 => 连续空行，不限制
no-negated-condition

0 => if 里面不允许出现否定表达式，不采纳
no-nested-ternary

0 => 允许三元表达式的嵌套使用
no-plusplus

0 => 允许使用 ++ 或 --
no-underscore-dangle

0 => 允许变量名中出现下划线
object-curly-newline

2 => 大括号内的首尾必须有换行
object-property-newline

0 => 对象字面量内的属性每行必须只有一个，不采纳
one-var

0 => 不采纳，声明变量时，禁止一条语句声明多个变量
one-var-declaration-per-line

0 => 不采纳，变量申明必须每行一个
quotes

2 => 必须使用单引号
semi

2 => 结尾必须有分号
semi-style

2 => 分号必须写在行尾，禁止在行首出现
indent

2 => 一个缩进必须用四个空格替代, switch 语句里面的 case 2 个空格 Tab 无法做到行内行末代码或注释的对齐, 而空格啥都可以

block-spacing

2 => 代码块如果在一行，则大括号内的首尾必须有空格

 correct 
 /*eslint class-methods-use-this: "error"*/
 function (a, b) { retur a + b; }

comma-spacing

2 => 逗号后面强制要求加空格

 correct
 /*eslint comma-style: ["error", "last"]*/
 var foo = 1, bar = 2;

key-spacing

2 => 对象字面量中冒号前面禁止有空格，后面必须有空格

keyword-spacing

2 => 关键字前后必须要加上空格

/*eslint keyword-spacing: ["error", { "before": true } , { "after": true }]*/
correct
if (foo) {
    // ...
}

no-trailing-spaces

2 => 禁止行尾部有空格
no-whitespace-before-property

2 => 禁止属性前有空格比如 foo. bar()
semi-spacing

2 => 一行有多个语句时，分号前面禁止有空格，分号后面必须有空格
func-call-spacing

2 => 函数名和执行它的括号之间禁止有空格
```
 correct
 /*eslint func-call-spacing: ["error", "never"]*/
 fn();
```
space-before-blocks

2 => if, function 等的大括号之前必须要有空格
space-before-function-paren

2 => function 的小括号前面必须有空格
space-in-parens

2 => 小括号内的首尾禁止有空格
space-infix-ops

2 => 操作符左右必须有空格, var str = 'HELLO' + 'FHUED'
spaced-comment

0 => 注释空格不限制
capitalized-comments

0 => 注释的首字母必须大写，对此不做限制
no-inline-comments

0 => 内联注释不限制
line-comment-position

0 => 注释的位置不进行限制
lines-around-comment

0 => 注释前后必须有空行不限制

class-methods-use-this

2 => 要求在 Class 里面合理使用 this，如果某个方法没有使用 this, 则应该申明为静态方法

incorrect 
/*eslint class-methods-use-this: "error"*/
/*eslint-env es6*/
class A {
    foo() {
        console.log("Hello World");     /*error Expected 'this' to be used by class method 'foo'.*/
    }
}

correct 
/*eslint class-methods-use-this: "error"*/
/*eslint-env es6*/
class A {
    foo() {
        this.bar = "Hello World"; // OK, this is used
    }
}

class A {
    constructor() {
        // OK. constructor is exempt
    }
}

class A {
    static foo() {
        // OK. static methods aren't expected to use this.
    }
}

constructor-super

2 => constructor 中必须有 super
arrow-body-style

0 => 箭头函数的返回值，应该允许灵活设置没必须一定用大括号写成多条语句
arrow-parens

0 => 箭头函数的参数必须用括号包裹起来，限制去掉。当只有一个参数时，没必要使用括号
arrow-spacing

2 => 箭头函数的箭头前后必须有空格
generator-star-spacing

2 => generator 的 * 前面禁止有空格，后面必须有空格
no-class-assign

2 => 禁止对定义过的 Class 重新赋值
no-duplicate-imports

2 => 禁止 import 重复模块
no-var

0 => 当前团队还有 es5 关闭禁止采用 var 去定义变量，必须使用 let 或者 const
prefer-arrow-callback

0 => 必须使用箭头函数作为回调，不采纳
prefer-const

1 => 变量如果没有发生修改，则必须使用 const 进行命名
prefer-destructuring

0 => 强制使用结构的限制，不采纳
prefer-destructuring

1 => 建议强制使用模板字符串
template-curly-spacing

2 => 模板字符串内的首尾禁止有空格
rest-spread-spacing

2 => ... 的后面禁止有空格
sort-imports

0 => import 的排序不用限制
template-curly-spacing

2 => 模板字符串内的首尾禁止有空格
yield-star-spacing

2 => yield* 后面必须加空格
no-const-assign

2 => 禁止对使用 const 定义的常量重新赋值
no-dupe-class-members

2 => 禁止重复定义类