eslint配置

phpmatt 發(fā)布于2019-08-21 18:28 / 2756人閱讀

摘要：例如，以下啟用瀏覽器和環(huán)境或者在一個(gè)文件中配置規(guī)則帶有大量的規(guī)則。您可以使用配置注釋或配置文件修改您的項(xiàng)目使用的規(guī)則。將每個(gè)全局變量名稱設(shè)置為等于允許覆蓋變量或禁止覆蓋。

首次發(fā)表在個(gè)人博客

eslint配置

全局安裝

npm install -g eslint

局部安裝

npm i -D eslint

接下來(lái)新建一個(gè)配置文件.eslintrc.js,或執(zhí)行以下命令自動(dòng)生成

eslint --init

制定環(huán)境

要指定配置文件中的環(huán)境，請(qǐng)使用env鍵并指定要啟用的環(huán)境true。例如，以下啟用瀏覽器和Node.js環(huán)境：

{
    "env": {
        "browser": true,
        "node": true
    }
}

或者在一個(gè)package.json文件中

{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "env": {
            "browser": true,
            "node": true
        }
    }
}

配置規(guī)則

ESLint帶有大量的規(guī)則。您可以使用配置注釋或配置文件修改您的項(xiàng)目使用的規(guī)則。要更改規(guī)則設(shè)置，您必須將規(guī)則ID設(shè)置為以下值之一：

"off"或者0- 關(guān)閉該規(guī)則

"warn"或者1- 將規(guī)則打開(kāi)為警告（不影響退出代碼）

"error"或者2- 將規(guī)則打開(kāi)為錯(cuò)誤（觸發(fā)時(shí)退出代碼為1）

通過(guò)內(nèi)聯(lián)注釋禁用規(guī)則

要在整個(gè)文件中禁用規(guī)則警告，請(qǐng)?jiān)谖募? eslint-disable /頂部添加塊注釋：

/* eslint-disable */

alert("foo");

要禁用特定行上的所有規(guī)則，請(qǐng)使用以下格式之一的行注釋：

alert("foo"); // eslint-disable-line

// eslint-disable-next-line
alert("foo");

制定全局

可以使用文件內(nèi)部的注釋或配置文件來(lái)定義全局變量。

1.使用文件內(nèi)部注釋

(1).要在JavaScript文件中使用注釋來(lái)指定全局變量，請(qǐng)使用以下格式

/* global var1, var2 */

(2).如果你想要指定這些全局變量不應(yīng)該被寫(xiě)入（只讀），那么你可以設(shè)置每個(gè)false標(biāo)志：

/* global var1:false, var2:false */

2.要在配置文件中配置全局變量，請(qǐng)使用globals鍵并指示要使用的全局變量。將每個(gè)全局變量名稱設(shè)置為等于true允許覆蓋變量或false禁止覆蓋。例如：

{
    "globals": {
        "var1": true,
        "var2": false
    }
}

使用心得

目前使用vscode,安裝eslint插件,然后在配置中加入關(guān)于eslint的配置

{
    "eslint.autoFixOnSave": true,
    "eslint.enable": true,
    "eslint.options": {
       "extensions": [".js", ".vue", ".jsx"]
    },
    "eslint.validate": [
        {
          "language": "vue",
          "autoFix": true
        },
        {
          "language": "javascript",
          "autoFix": true
        },
        {
          "language": "javascriptreact",
          "autoFix": true
        }
    ],
}

"eslint.autoFixOnSave": true,配置完這個(gè)之后,當(dāng)你在保存的時(shí)候可以自動(dòng)按照你在.eslintrc.js目錄中設(shè)置的規(guī)則自動(dòng)修復(fù)一些空格縮進(jìn),單雙引號(hào)及語(yǔ)句末尾是否需要加;或,的一些錯(cuò)誤,但是有一些錯(cuò)誤,比如變量聲明未定義等得需要你手動(dòng)去修改.

剛開(kāi)始用到eslint的時(shí)候也是相當(dāng)痛苦,畢竟在代碼中看到一大堆紅線(注: 紅線為eslint的錯(cuò)誤,鼠標(biāo)劃上去就會(huì)看到對(duì)應(yīng)的違反了哪個(gè)規(guī)則,可以去eslint的官網(wǎng)查看),但是當(dāng)你養(yǎng)成良好的習(xí)慣之后,這些習(xí)慣包括變量命名,函數(shù)命名等,其實(shí)會(huì)大大的提高工作效率,規(guī)范起來(lái)之后尤其會(huì)提高團(tuán)隊(duì)之前的工作效率.

我現(xiàn)在就有嚴(yán)重的代碼潔癖,看到整潔的代碼,心情就會(huì)十分愉悅.當(dāng)然在看到團(tuán)隊(duì)有小伙伴一點(diǎn)都不注意這些,尤其需要忙他debug的時(shí)候,真的很難受,變量命名a,b, a1等.所以哪怕為了不坑團(tuán)隊(duì)成員的,也要養(yǎng)成良好的習(xí)慣.

參考

eslint.org/docs/