规范化-ESLint

规范化是践行前端工程化中重要的一部分
为什么要有规范化标准：
软件开发需要多人协同，不同开发人员有着不同的编码习惯，不同的习惯增加项目维护成本，每个项目或团队需要明确统一的标准。
哪里需要规范化标准：
代码，文档，甚至提交的日志，开发过程中人为编写的成果物，代码最为重要。
如何实施规范化标准：
通过工具实现Lint，（刚有C语言的时候，有一些常见的代码问题是不能被编译器捕获到的，有人就开发了一个叫Lint的工具，用于在编译之前检查问题，后续这种工具，就都被称为Lint）

---

ESLint

目前最为主流的JavaScript Lint工具，检测代码质量，容易统一开发者的编码风格（缩进，分号等）
初次使用

npm install eslint --save-dev
npx eslint --init

npx是npm自带的一个工具，能执行npm包，简化了之前执行包的cli命令时的步骤，之前还要进入node_modules/.bin中

init过程就选择自己想要的就行了,之后会得到.eslintrc.js的初始文件

// .eslintrc.js
module.exports = {
    "env": {
        "browser": true, // 运行环境是浏览器，所以包含window，document等全局变量,还有node等其他选项
        "es2015": true // ES2015中的全局变量例如promise，将可用
    },
    "extends": [
        "standard" // 初始化时的选项，表示继承standard风格
    ],
    "parserOptions": { // 设置语法解析器的相关配置
        "ecmaVersion": 6, // 支持到es6，例如es7的语法async将不支持
        "sourceType": "module"
    },
    "rules": { // 添加规则，更多规则可去官网查看
        "no-alert": "error" // 使用alert会抛出警告，有off，warning，error三种可选
    }
    "globals": { // 添加全局成员
        "qqqq": "readonly" // 以后可在全局直接使用qqqq变量
    }
};

npx eslint ./index.js  //校验文件
npx eslint ./index.js --fix  //修复文件

配置注释
如果不可避免的某一处代码就是要违反一下规则,我们不能因为这一个点，就去推翻校验规则的配置

const str1 = "${name} is a coder" // eslint-disable-line no-template-curly-in-string 
console.log(str1)

// eslint-disable-line [no-template-curly-in-string]就可忽略此行代码中的此规则
结合webpack
首先你拥有一个webpack的项目

• 安装eslint模块
• 安装eslint-loader模块
• 初始化.eslintrc.js配置文件

eslint检查肯定要在babel-loader编译之前进行，所以
// webpack.config.js
module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.js$/,
        enforce: 'pre',  // 设置执行顺序，pre优先处理，post 最后处理
        exclude: /node_modules/,
        use: 'eslint-loader'
      },
     {
        test: /\.css$/,
        exclude: /node_modules/,
        use: 'css-loader'
      }
    ]
  },

如果你的是react项目，因为它有一些jsx语法，所以需要安装一个eslint-plugin-react插件，并配置.eslintrc.js

// .eslintrc.js
module.exports = {
  extends: [
    'standard',
    'plugin:react/recommended'
  ],
}

GitHooks配合ESLint

GitHook也称之为git钩子，每个钩子都对应一个任务，比如commit，push
通过shell脚本可以编写钩子任务触发时，要具体执行的操作。

image.png

我有一个test项目，从中可以看到.git=>hooks，hooks里面全都是各种时机的勾子。我们复制一份pre-commit.sample，删掉.sample

// pre-commit
#!/bin/sh
echo "YES YES"

然后执行git commit -m ""后你会发现输出了YES YES，这就简单的实现了git gook。接下来结合eslint，在提交前自动做检查。

我们前端人员大部分并不擅长写shell脚本，所以我们使用Husky来实现githooks的使用需求。

npm install husky -D

// package.json 中添加
{
  "scripts": {
    "lint": "eslint ."
  },
    "husky": {
        "hooks": {
           "pre-commit": "npm run lint"
        }
     }
}

再试一下commit，发现可以了。
后续还可以配合lint-staged，完成eslint后再自动格式化等操作。