eslint配置

phpmatt 發布于2019-08-21 18:28 / 2750人閱讀

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

首次發表在個人博客

eslint配置

全局安裝

npm install -g eslint

局部安裝

npm i -D eslint

接下來新建一個配置文件.eslintrc.js,或執行以下命令自動生成

eslint --init

制定環境

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

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

或者在一個package.json文件中

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

配置規則

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

"off"或者0- 關閉該規則

"warn"或者1- 將規則打開為警告（不影響退出代碼）

"error"或者2- 將規則打開為錯誤（觸發時退出代碼為1）

通過內聯注釋禁用規則

要在整個文件中禁用規則警告，請在文件/ eslint-disable /頂部添加塊注釋：

/* eslint-disable */

alert("foo");

要禁用特定行上的所有規則，請使用以下格式之一的行注釋：

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

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

制定全局

可以使用文件內部的注釋或配置文件來定義全局變量。

1.使用文件內部注釋

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

/* global var1, var2 */

(2).如果你想要指定這些全局變量不應該被寫入（只讀），那么你可以設置每個false標志：

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

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

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

使用心得

目前使用vscode,安裝eslint插件,然后在配置中加入關于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,配置完這個之后,當你在保存的時候可以自動按照你在.eslintrc.js目錄中設置的規則自動修復一些空格縮進,單雙引號及語句末尾是否需要加;或,的一些錯誤,但是有一些錯誤,比如變量聲明未定義等得需要你手動去修改.

剛開始用到eslint的時候也是相當痛苦,畢竟在代碼中看到一大堆紅線(注: 紅線為eslint的錯誤,鼠標劃上去就會看到對應的違反了哪個規則,可以去eslint的官網查看),但是當你養成良好的習慣之后,這些習慣包括變量命名,函數命名等,其實會大大的提高工作效率,規范起來之后尤其會提高團隊之前的工作效率.

我現在就有嚴重的代碼潔癖,看到整潔的代碼,心情就會十分愉悅.當然在看到團隊有小伙伴一點都不注意這些,尤其需要忙他debug的時候,真的很難受,變量命名a,b, a1等.所以哪怕為了不坑團隊成員的,也要養成良好的習慣.

參考

eslint.org/docs/

GPU云服務器云服務器 ESLint spring配置數據源配置堡壘機如何配置運維配置 linux配置云服務器配置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90492.html

EsLint入門學習整理

摘要：使用文件配置的方式在項目的根目錄下，新建一個名為的文件，在此文件中添加一些檢查規則。或打開規則，并且作為一個警告并不會導致檢查不通過。總結以上是我在學習整理的一些資料，不算太全面，對于像我這樣的新手入門足夠了介紹 ??ESLint 是一個插件化的 javascript 代碼檢測工具，它可以用于檢查常見的 JavaScript 代碼錯誤，也可以進行代碼風格檢查，這樣我們就可以根據自己的...

littlelightss 2019-08-22 17:29 評論0 收藏0
更新版-梳理前端開發使用eslint和prettier來檢查和格式化代碼問題

摘要：整個代碼檢查和格式化流程應該規范為如下步驟使用并且嘗試自動修復所有問題有提示，可以進行修復，按照配置文件來進行修復。參考文檔如何花分鐘解決產生的各種錯誤的記憶現場本文轉載自我的更新版梳理前端開發使用和來檢查和格式化代碼問題更新版，之前的版本可以看這里：梳理前端開發使用eslint和prettier來檢查和格式化代碼問題一、問題痛點在團隊的項目開發過程中，代碼維護所占的時間比重...

GitChat 2019-08-26 12:02 評論0 收藏0
梳理前端開發使用eslint-prettier檢查和格式化代碼

摘要：梳理前端開發使用檢查和格式化代碼問題痛點在團隊的項目開發過程中，代碼維護所占的時間比重往往大于新功能的開發。使用格式化所有代碼。參考文檔如何花分鐘解決產生的各種錯誤的記憶現場原文轉載梳理前端開發使用檢查和格式化代碼線上猛如虎，線下慫如鼠梳理前端開發使用eslint-prettier檢查和格式化代碼問題痛點在團隊的項目開發過程中，代碼維護所占的時間比重往往大于新功能的開發。因此編...

yangrd 2019-08-22 17:01 評論0 收藏0
在Typescript項目中，如何優雅的使用ESLint和Prettier

摘要：對于項目的編碼規范而言，主要有兩種選擇和。此外由于性能問題，官方決定全面采用，甚至把倉庫作為測試平臺，而的解析器也成為獨立項目，專注解決雙方兼容性問題。最近在我的項目的編碼規范中全量的用代替了針對其中遇到的問題做一個記錄。 ??對于Typescript項目的編碼規范而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規范js代碼，通過配置解析器，也能規范TS代碼。此外由...

chemzqm 2019-08-02 15:27 評論0 收藏0
在Typescript項目中，如何優雅的使用ESLint和Prettier

摘要：對于項目的編碼規范而言，主要有兩種選擇和。此外由于性能問題，官方決定全面采用，甚至把倉庫作為測試平臺，而的解析器也成為獨立項目，專注解決雙方兼容性問題。最近在我的項目的編碼規范中全量的用代替了針對其中遇到的問題做一個記錄。 ??對于Typescript項目的編碼規范而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規范js代碼，通過配置解析器，也能規范TS代碼。此外由...

WilsonLiu95 2019-08-23 18:29 評論0 收藏0
在Typescript項目中，如何優雅的使用ESLint和Prettier

摘要：對于項目的編碼規范而言，主要有兩種選擇和。此外由于性能問題，官方決定全面采用，甚至把倉庫作為測試平臺，而的解析器也成為獨立項目，專注解決雙方兼容性問題。最近在我的項目的編碼規范中全量的用代替了針對其中遇到的問題做一個記錄。 ??對于Typescript項目的編碼規范而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規范js代碼，通過配置解析器，也能規范TS代碼。此外由...

琛ｈ。 2019-08-30 11:18 評論0 收藏0