成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

ESLint簡單操作

liukai90 / 495人閱讀

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

簡介

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

在團隊協(xié)作中，為避免低級 Bug、產(chǎn)出風格統(tǒng)一的代碼，會預先制定編碼規(guī)范。使用 Lint 工具和代碼風格檢測工具，則可以輔助編碼規(guī)范執(zhí)行，有效控制代碼質(zhì)量。

準備

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

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

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

Node.js和NPM必須的喲

安裝

首先，安裝ESLint。

$ npm i -g eslint

然后，安裝Airbnb語法規(guī)則。

$ npm i -g eslint-config-airbnb

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

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

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

使用

配置完相關(guān)信息后，就可以切到項目目錄內(nèi)然后執(zhí)行檢測啦：

我們新建一個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";
      }
    });
  }
}

執(zhí)行檢測

$ 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)

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

針對上面的錯誤信息，我們修改一下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 + 規(guī)則名 的作用是不檢測這條規(guī)則，注意要使用 eslint-enable 結(jié)束喲

/* 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)

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

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

再次執(zhí)行檢測，OK啦，全部通過；

參考鏈接

ESLint 使用入門

ESLint 配置參數(shù)介紹

ESLint 官方文檔

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/79243.html

相關(guān)文章

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

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

    GitChat 評論0 收藏0

  • 在Typescript項目中，如何優(yōu)雅的使用ESLint和Prettier

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

    chemzqm 評論0 收藏0

  • 在Typescript項目中，如何優(yōu)雅的使用ESLint和Prettier

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

    WilsonLiu95 評論0 收藏0

  • 在Typescript項目中，如何優(yōu)雅的使用ESLint和Prettier

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

    琛ｈ。 評論0 收藏0

  • 前端構(gòu)建之webpack

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

    MartinHan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<