eslint学习笔记

详解eslint那些事

引言

团队开发时一般需要统一代码格式，这个时候就需要用到eslint了。

###概念：

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似，除了少数的例外：

• ESLint 使用 Espree 解析 JavaScript。
• ESLint 使用 AST 去分析代码中的模式
• ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。

概念比较生硬：反正就是代码格式化就是了；

规则定义

ESLint 支持几种格式的配置文件，如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下：

1. JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
2. YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
3. JSON -使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
4. Deprecated -使用 .eslintrc，可以使 JSON 也可以是 YAML。
5. package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置。

经常使用的是1 4 5

我在使用的时候一般是直接用4或者用4extends添加自己的规则文件。

在5的eslintConfig属性里面配置一些别名（注意引入：

"eslint-import-resolver-alias": "^1.1.2",
"eslint-import-resolver-webpack": "^0.11.1",

常见依赖

“eslint”: “3.9.0”,

"eslint-config-airbnb": "12.0.0",//airbnb编码规则
"eslint-plugin-import": "2.0.1",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-react": "6.4.1",
"eslint-plugin-redux-saga": "0.1.5",

• airbnb JavaScript编码规则

  https://github.com/airbnb/javascript#functions

  Airbnb JavaScript 编码风格指南（2018年最新版）

  (最新版其中建议使用函数表达式同时函数表达式名和函数名不一样，而不是函数声明，主要原因是有利于代码维护，函数表达式没有函数提升。（这在网上搜到的旧版的说明中截然相反，建议直接在github上看原版

常见规则

详解ESLint规则，规范你的代码

React用ESLint代码检测 常见问题

建议

不管是用哪个IDE ，都建议配置好eslint自动修复。

webstorm 3.x 配置eslint 自动修复错误 （可针对对某一方法或一个项目）