团队协作—Eslint使用

.eslintrc.js 文件

先了解一下 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 是什么

统一的编码规范。Lint 是检验代码格式工具的一个统称，具体的工具有 Jslint 、 Eslint 等等，你可以理解为它们是竞品之间的关系。

每个程序员都有自己的编码习惯，举个例子：

有的人写代码，一行代码结尾必须加分号 ;，有的人觉得不加分号 ; 更好看；
有的人写代码，一行代码不会超过 80 个字符，认为这样看起来简洁明了，也有的人喜欢把所有逻辑都写在一行代码上，觉得别人看不懂的代码很牛逼；
有的人使用变量必然会先定义 var a = 10；而粗心的人写变量可能没有定义过就直接使用 b = 10;；

这些个人习惯会使得团队协作产生各种各样问题，毕竟编码的行为不统一，别人的编码习惯自己很难适应。

lint 的由来

如果你写自己的项目当然怎么折腾都没关系，但是在公司中，老板希望每个人写出的代码都要符合一个统一的规则，这样别人看源码就能够看得懂，因为源码是符合统一的编码规范制定的，交流起来也会更加顺畅。

lint 就是这样一个自动化检查工具，它提供提供编码规范；提供自动检验代码的程序，并打印检验结果：告诉你哪一个文件哪一行代码不符合哪一条编码规范，方便你去修改代码。

Eslint 安装

# 创建项目
$ npm init

# 安装依赖包(Dev environment)
$ npm install eslint -D

设置 package.json

"scripts": {
    "test": "react-scripts test --env=jsdom",
    "lint": "eslint src", // Lint 应该提供自动校验代码的程序，这个脚本就是让 Lint 自动检验 src 目录下所有的 .js 文件。
    "lint:create": "eslint --init" //用来生成 .eslintrc.js 文件，Lint 提供的编码规范就写在这个文件，所以我们需要创建它
}

创建 .eslint.js 文件

$ npm run lint:create

> 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   # 因为要校验 React 语法，所以这里需要下载一个 React 语法规则的包

创建完成后根目录下就会出现 .eslintrc.js 文件

--fix 参数

"scripts": {
    "test": "react-scripts test --env=jsdom",
    "lint": "eslint src --fix",
    "lint:create": "eslint --init"
}

这里给 "lint": "eslint src --fix", 加上 --fix 参数，是 Eslint 提供的自动修复基础错误的功能。可惜的是 --fix 只能修复基础的不影响代码逻辑的错误，比如字符串自动变成了双引号、给代码末尾也加上了分号这种，像 no-unused-vars 这种错误只能手动修改。

配置文件

参考官方文档：https://cn.eslint.org/