介紹

ESLint 是一個(gè)開源的 JavaScript 代碼檢查工具，由 Nicholas C. Zakas 于2013年6月創(chuàng)建。
JavaScript 是一個(gè)動(dòng)態(tài)的弱類型語(yǔ)言，在開發(fā)中比較容易出錯(cuò)。因?yàn)闆]有編譯程序，為了尋找 JavaScript 代碼錯(cuò)誤通常需要在執(zhí)行過程中不斷調(diào)試。而ESLint 可以讓程序員在編碼的過程中發(fā)現(xiàn)問題而不是在執(zhí)行的過程中。

安裝

非常簡(jiǎn)單，使用npm全局安裝eslint的命令行工具：
npm i -g eslint

使用

我創(chuàng)建了一個(gè)簡(jiǎn)單的test.js文件

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

然后使用命令eslint test.js，結(jié)果提示缺少eslint的配置文件：

image.png

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"
    }
};

迫不及待重新執(zhí)行eslint test.js,提示缺少組件eslint-plugin-react：

image.png

終于可以正常跑命令eslint test.js了。寥寥4行代碼，檢測(cè)結(jié)果是這樣的：

image.png

默認(rèn)的eslint規(guī)則禁用了console。開發(fā)過程中，我經(jīng)常會(huì)用到console來(lái)調(diào)試代碼，這個(gè)規(guī)則對(duì)我來(lái)說蠻逆天的。能不能不禁用console？當(dāng)然可以，Eslint有著靈活配置規(guī)則的優(yōu)點(diǎn)！

ESlint 被設(shè)計(jì)為是完全可配置的，這意味著你可以關(guān)閉每一個(gè)規(guī)則，只運(yùn)行基本語(yǔ)法驗(yàn)證，或混合和匹配綁定的規(guī)則和自定義規(guī)則，以讓 ESLint 更適合于你的項(xiàng)目。

所以，修改一下配置文件.eslintrc.js，把no-console這個(gè)規(guī)則關(guān)閉就行了：

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

總結(jié)

ESLint最大的價(jià)值體現(xiàn)在：

1. 幫助前端開發(fā)團(tuán)隊(duì)保持良好的js代碼規(guī)范，提升代碼可讀性，方便團(tuán)隊(duì)協(xié)作。
2. 在編碼的過程中發(fā)現(xiàn)問題，提升代碼質(zhì)量。

代碼規(guī)則沒有絕對(duì)的標(biāo)準(zhǔn)，團(tuán)隊(duì)成員一起討論通過，在實(shí)踐中不斷調(diào)整沉淀下來(lái)的規(guī)則就是好規(guī)則。