代码规范篇——各种lint

一、eslint

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。这是官网地址 https://eslint.bootcss.com/docs/user-guide/getting-started

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

首先安装一下 eslint 模块

npm i eslint -D

再初始化 eslint 配置，执行 --init 命令会在项目根目录下自动创建 .eslintrc.js 配置文件。期间会提供一些选项让你选择，你的模块标准是 ES6 还是 CommonJs、项目中用的是 react 还是 vue 等，然后根据你的选择丰富配置信息。当然你也可以手动创建

下面是默认生成的配置文件 .eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        'standard' // 这行是自己加的，代码规范库
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018
    },
    "plugins": [
        "react"
    ],
    "rules": {
        // 可以自己定义一些规则
    }
};

1.1 编码规范

应用了 ESLint 后，通常是需要自己来配置繁杂的 rules 规则，这也是一个喜好类的东西，多数人是不愿意在这上面耗费太多精力的（比如手动配置数百个ESLint 规则），于是github 上出现了一些开源的代码规范库，比较流行的有 airbnb、standard、prettier等