ESLint初体验

介绍

ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于2013年6月创建。
JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。而ESLint 可以让程序员在编码的过程中发现问题而不是在执行的过程中。

安装

非常简单，使用npm全局安装eslint的命令行工具：
npm i -g eslint

使用

我创建了一个简单的test.js文件

var  a=1;
var  b=2; 
var  c=a+b;
console.log(c);

然后使用命令eslint test.js，结果提示缺少eslint的配置文件：

image.png

所以，使用eslint --init来生成配置文件。生成的过程中，它会让你选择一些规则，如是否使用JSX？是否使用ES6？等等。然后会生成一个配置文件.eslintrc.js:

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ],
        "linebreak-style":[
            "error",
            "windows"
        ],
        "no-console":"off"
    }
};

迫不及待重新执行eslint test.js,提示缺少组件eslint-plugin-react：

image.png

原来是生成配置文件的过程中，我选择了使用react。好吧，那就npm i -g eslint-plugin-react一把就好了。

终于可以正常跑命令eslint test.js了。寥寥4行代码，检测结果是这样的：

image.png

默认的eslint规则禁用了console。开发过程中，我经常会用到console来调试代码，这个规则对我来说蛮逆天的。能不能不禁用console？当然可以，Eslint有着灵活配置规则的优点！

ESlint 被设计为是完全可配置的，这意味着你可以关闭每一个规则，只运行基本语法验证，或混合和匹配绑定的规则和自定义规则，以让 ESLint 更适合于你的项目。

所以，修改一下配置文件.eslintrc.js，把no-console这个规则关闭就行了：

"rules": {
        "indent": [
            "error",
            "tab"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ],
        "linebreak-style":[
            "error",
            "windows"
        ],
        "no-console":"off"
    }

总结

ESLint最大的价值体现在：

1. 帮助前端开发团队保持良好的js代码规范，提升代码可读性，方便团队协作。
2. 在编码的过程中发现问题，提升代码质量。

代码规则没有绝对的标准，团队成员一起讨论通过，在实践中不断调整沉淀下来的规则就是好规则。