ESLint簡單操作

liukai90 發(fā)布于2019-08-19 18:09 / 445人閱讀

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

簡介

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

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

準(zhǔn)備

ESLint 詳細(xì)使用可參見官方文檔

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

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

Node.js和NPM必須的喲

安裝

首先，安裝ESLint。

$ npm i -g eslint

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

$ npm i -g eslint-config-airbnb

最后，在項(xiàng)目的根目錄下新建一個(gè).eslintrc文件，配置ESLint。

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

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

使用

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

我們新建一個(gè)test.js進(jìn)行檢測

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é)果信息可以知道，出錯(cuò)的行號(hào)，錯(cuò)誤類型，錯(cuò)誤描述以及違反的規(guī)則

針對上面的錯(cuò)誤信息，我們修改一下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進(jìn)行檢測

好了，再次運(yùn)行ESLint進(jìn)行檢測：

$ 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處錯(cuò)誤，_id和Swipe是我們定義的兩個(gè)全局變量，在另一個(gè)模塊中，所以我們還需要修改.eslintrc將這兩個(gè)變量加入到globals中：

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

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

參考鏈接

ESLint 使用入門

ESLint 配置參數(shù)介紹

ESLint 官方文檔

GPU云服務(wù)器云服務(wù)器 linux簡單操作 mongodb簡單操作 ESLint 阿里云服務(wù)器什么操作系統(tǒng)簡單

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

liukai90

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 2186·2023-04-25 15:00
unixserv.eu，荷蘭VPS，1歐/月，1核/512M內(nèi)存/10G NVMe/不限流量/10G

閱讀 2365·2021-11-18 13:14
【嵌入式】利用FinSH控制臺(tái)控制LED燈

閱讀 1198·2021-11-15 11:37
華中科技大學(xué)與UCloud優(yōu)刻得達(dá)成戰(zhàn)略合作

閱讀 3103·2021-09-24 13:55
CSS篇－line-height計(jì)算方法（父子元素）

閱讀 1240·2019-08-30 15:52
360°產(chǎn)品展示

閱讀 2659·2019-08-29 12:35
正在暑假中的《課多周刊》(第1期)

閱讀 3377·2019-08-29 11:04
一個(gè)基于Node.js的本地快速測試服務(wù)器

閱讀 1221·2019-08-26 12:13

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

ESLint簡單操作

相關(guān)文章

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

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

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

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

前端構(gòu)建之webpack

發(fā)表評(píng)論

0條評(píng)論

liukai90

男|高級(jí)講師

TA的文章

tensorflow

unixserv.eu，荷蘭VPS，1歐/月，1核/512M內(nèi)存/10G NVMe/不限流量/10G

【嵌入式】利用FinSH控制臺(tái)控制LED燈

華中科技大學(xué)與UCloud優(yōu)刻得達(dá)成戰(zhàn)略合作

CSS篇－line-height計(jì)算方法（父子元素）

360°產(chǎn)品展示

正在暑假中的《課多周刊》(第1期)

一個(gè)基于Node.js的本地快速測試服務(wù)器

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

ESLint簡單操作

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！