ESLint簡單操作

liukai90 發布于2019-08-19 18:09 / 440人閱讀

摘要：簡介是由編寫的一個可擴展每條規則獨立不內置編碼風格為理念的工具。在團隊協作中，為避免低級產出風格統一的代碼，會預先制定編碼規范。使用工具和代碼風格檢測工具，則可以輔助編碼規范執行，有效控制代碼質量。

簡介

ESLint 是由 Nicholas C. Zakas 編寫的一個可擴展、每條規則獨立、不內置編碼風格為理念的 Lint 工具。

在團隊協作中，為避免低級 Bug、產出風格統一的代碼，會預先制定編碼規范。使用 Lint 工具和代碼風格檢測工具，則可以輔助編碼規范執行，有效控制代碼質量。

準備

ESLint 詳細使用可參見官方文檔

這里主要使用的Airbnb JavaScript Style Guide；

JS版本為ECMAScript6(阮一峰老師的ECMAScript 6入門)

Node.js和NPM必須的喲

安裝

首先，安裝ESLint。

$ npm i -g eslint

然后，安裝Airbnb語法規則。

$ npm i -g eslint-config-airbnb

最后，在項目的根目錄下新建一個.eslintrc文件，配置ESLint。

{
  "extends": "airbnb/base",
}

在安裝的時候得注意一點，eslint與eslint-config-airbnb要么都執行全局安裝，要么都本地安裝，必須相同喲。

使用

配置完相關信息后，就可以切到項目目錄內然后執行檢測啦：

我們新建一個test.js進行檢測

import "./libraries/helper";

let path_name = location.pathname;
if (/^/(home)?/?$/.test(path_name)) {
  let flexSlider = _id("flexSlider");
  if (flexSlider) {
    let flexControlNav = _id("flexControlNav").children;
    new Swipe(flexSlider, {
      autoRestart: true,
      callback: (index) => {
        Array.prototype.slice.call(flexControlNav).map((item) => {
          item.className = "";
        });
        flexControlNav[index].className = "active";
      }
    });
  }
}

執行檢測

$ eslint test.js
test.js
   4:5   error  Identifier "path_name" is not in camel case                camelcase
   4:5   error  "path_name" is never reassigned, use "const" instead       prefer-const
   7:7   error  "flexSlider" is never reassigned, use "const" instead      prefer-const
   7:20  error  "_id" is not defined                                       no-undef
   9:9   error  "flexControlNav" is never reassigned, use "const" instead  prefer-const
   9:26  error  "_id" is not defined                                       no-undef
  10:5   error  Do not use "new" for side effects                          no-new
  10:9   error  "Swipe" is not defined                                     no-undef
  13:63  error  Expected to return a value in this function                array-callback-return
  14:11  error  Assignment to property of function parameter "item"        no-param-reassign
  17:8   error  Missing trailing comma                                     comma-dangle

? 11 problems (11 errors, 0 warnings)

檢測結果信息可以知道，出錯的行號，錯誤類型，錯誤描述以及違反的規則

針對上面的錯誤信息，我們修改一下test.js文件：

import "./libraries/helper";

const pathName = location.pathname;
if (/^/(home)?/?$/.test(patName)) {
  const flexSlider = _id("flexSlider");
  if (flexSlider) {
    const flexControlNav = _id("flexControlNav").children;
    /* eslint-disable no-new */
    new Swipe(flexSlider, {
      autoRestart: true,
      callback: (index) => {
        /* eslint-disable */
        Array.prototype.slice.call(flexControlNav).map((item) => {
          item.className = "";
        });
        flexControlNav[index].className = "active";
        /* eslint-enable */
      },
    });
    /* eslint-enable no-new */
  }
}

修改說明:

/* eslint-disable no-new */
...
/* eslint-enable no-new */
使用 eslint-disable + 規則名 的作用是不檢測這條規則，注意要使用 eslint-enable 結束喲

/* eslint-disable */
...
/* eslint-enable */
直接 eslint-disable 的作用是完全禁用ESLint進行檢測

好了，再次運行ESLint進行檢測：

$ eslint test.js
test.js
   6:22  error  "_id" is not defined    no-undef
   8:28  error  "_id" is not defined    no-undef
  10:9   error  "Swipe" is not defined  no-undef

? 3 problems (3 errors, 0 warnings)

結果顯示還有3處錯誤，_id和Swipe是我們定義的兩個全局變量，在另一個模塊中，所以我們還需要修改.eslintrc將這兩個變量加入到globals中：

.eslintrc
{
  "extends": "airbnb/base",
  "globals": {
    "_id": true,
    "Swipe": true,
  },
}

再次執行檢測，OK啦，全部通過；

參考鏈接

ESLint 使用入門

ESLint 配置參數介紹

ESLint 官方文檔

云服務器 GPU云服務器 linux簡單操作 mongodb簡單操作 ESLint 阿里云服務器什么操作系統簡單

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

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

更新版-梳理前端開發使用eslint和prettier來檢查和格式化代碼問題

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

GitChat 2019-08-26 12:02 評論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
前端構建之webpack

摘要：前端構建之之前寫了一個前端構建之，同樣的目的寫一個，內容基本上和一樣，主要用來自己學習記錄。合并很方便的實現合并最后附上完整的源代碼。前端構建之webpack 之前寫了一個前端構建之gulp，同樣的目的寫一個webpack，內容基本上和gulp一樣，主要用來自己學習記錄。為什么需要前端構建不解釋本文大致分為以下幾個內容：規范校驗js代碼（jslint） js解釋器（b...

MartinHan 2019-08-26 12:00 評論0 收藏0