iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 3
3
Modern Web

React - DOM界的彼方系列 第 3

Day 03: ESLint - Lint工具的後起之秀

ESLint

本章的目標是提供一些ESLint的簡介與使用建議,當然它只是個檢查工具,並不會自動幫你修正錯誤或警告。在撰寫程式碼的過程中,檢查工具的提示是很重要,它是可以提升開發者撰寫程式碼的品質的一種工具,所以這種檢查工具又稱為程式碼品質工具(Code Quality Tools)。而檢查工具背後的每一項語法檢查,都代表許多資深開發者的想法或經驗的累積,這些訊息對學習者來說都是相當寶貴的。

註: 本文章附有影片,影片網址在Youtube的這個網址。本文章同步放置於Github庫的這裡

JavaScript語言長期以來有許多為人詬病的設計,雖然它一開始的初衷是希望能設計一個簡單易學的程式語言,但是因為自由度高又是弱資料類型,反而造成許多初學者無所適從。在很多時候對於同一種功能,這樣寫也可以那樣寫好像也可以,就算是對已經熟悉的開發者來說,也有可能會出現不經意的錯誤。

在經過20年來的眾多使用者的努力下,現在有了更多的輔助開發的新方式,有的是創造另一套新的程式語言或超集語言再編譯為JavaScript程式碼,例如TypeScript、CoffeeScript或Elm等等。而發展其它的輔助工具是另一種方式,例如Lint工具與明天要介紹的Flow工具就是。

ESLint介紹

Lint工具最早是使用於UNIX系統中C語言的程式碼靜態分析工具,主要是用來標記語法結構上有可疑的、濳在的問題語法或指令。在之前就有JSLintJSHint兩個為JavaScript設計的檢查工具,其中JSLint是由Douglas Crockford大師所創造,在10多年前(2002)就發佈的一個工具,算得上是很有歷史的工具,不過它十分具有創造者的想法與特色,而且可以彈性自訂的選項很少。而JSHint是從JSLint分支出來的新專案(2011),更傾向於由社群主導的專案,具有更多的彈性選項,JSHint發展得很好,有許多大公司的開發都採用這個檢查工具,對於延伸的JSX語法,也有分支出來的JSXHint工具。其他各具特色的類似工具,還有像JSCS工具與StandardJS等等。

ESLint是在這個領域的新專案,它在2013年由Nicholas C. Zakas創造,正如ESLint的名字一樣,它是為ES新標準語法所設計。根據最近的一份統計,它也是目前在JavaScript開發中,使用率最高的語法檢查工具。ESLint的功能具有高度設定彈性與擴充性,這是以往的檢查工具中所沒有的,雖然它的檢查速度比像JSHint慢了2x-3x,但它的其他特性是更受到開發者的喜好,速度可能並不是它的強項,畢竟它的檢查方式與可檢查項目很多。相較於JSLint與JSHint,ESLint還有其他的不同特色如下:

  • 高度的設定彈性: 有更多規則選項可以依需求或喜好設定
  • 具有擴充功能: 函式庫或框架的開發者可以依需求再開發擴充
  • 支援ES6與JSX: 高度支援ES6標準語法(甚至是更高版本標準或實驗性質的語法),以及React自有的JSX語法
  • 警告與錯誤訊息: 更清楚的警告或錯誤訊息

註: 上述的JSCS團隊已合併到ESLint專案之中

ESLint要依附在Node.js下執行,所以要使用它必須滿足幾個條件,不過這在我們之前的開發環境中都已經裝好了:

  • 安裝ESlint套件: 這是npm套件,可裝在專案中或全域中
  • 專案中要有ESlint的設定檔: 有各種格式,本文最下面有簡單的說明
  • 開發工具要使用對應的擴充(外掛): 幾乎每個開發工具中都有,可以作即時檢查

Airbnb - JavaScript風格指引

要談到ESLint,就需要進一步談到Airbnb這家公司,這是一家專門在網路上提供民宿(或個人)的住所出租的網站服務業者,有可能你之前有聽過,或是在出國自由行時有去租這個網站上面的住所房間。那麼Airbnb與ESLint有什麼關係?

Airbnb本身就有在Github上發佈一些自家公司使用的開放原始碼專案,而最有名的開放原始碼專案,就屬這個有4萬多個星的JavaScript Style Guide (JS風格指引)。很特別的是,它並不是一個以產出應用程式為目的的專案,而是以社群為導向的方式,制定一份JavaScript應用在開發時的撰寫風格指引,這份指引是讓所有的JavaScript的開發者參考,為了讓開發者能寫出更簡潔、更少錯誤與高度閱讀性的程式碼,而這份的指引是目前是以ES6標準為主。。現在也有延伸這種指引方式到React、CSS-in-JavaScript、CSS / Sass與Ruby的內容。

當然這份JavaScript指引也有許多不同語言的翻譯版本,已經有熱心的朋友翻譯成繁體中文翻譯的版本,應該要多支持鼓勵他(幫他按個星星)。如果在你稍微看到過了這份指引後,可以發現幾乎每個指引規則的後面,都有一個eslint的對應規則,例如:

15.1 請使用 === 和 !== ,別使用 == 及 != 。eslint: eqeqeq

後面的eslint: eqeqeq對照的就是在ESLint中的eqeqeq這個檢查規則,這個規則是在你如果在程式碼中,用值相等比較符號(==)時,會出現警告訊息,內容是有關於要求你要用嚴格相等比較(===)會比較好。

不過,這麼多的JavaScript風格指引,不會有開發者有那個美國時間一一記得,雖然說多也不多,但也都是很零碎的片段。所以Airbnb把所有的風格指引,統統寫成一個ESLint中的預先的規則設定檔案,稱為eslint-config-airbnb-base套件,如果你的開發環境或工具有使用ESLint,直接裝來套用就行了。在"開發工具與環境"的"樣版文件"中,就有直接使用這個設定檔案。

如何使用檢查工具

要使用加上Airbnb風格後的ESLint來檢查程式碼,如果你是第一次使用,包準你只有一個感想 - "有夠麻煩"。

你可以把平常寫的JavaScript的一些程式碼,貼到編輯區域看看,例如下面這個用jQuery程式碼:

$('.btn').click(function() {
  $.ajax({
        url: "check.php",
        data: {
            old_password: $("#password").val()
        },
        type: "POST",
        dataType: "json",
        success: function(data,textStatus,jqXHR) {
          console.log("success");
        },
        error: function() {
          console.log("success");
        },
        complete: function() {
          console.log("success");
        }
    });
});

經過ESLint檢查後,一共有37個錯誤與7個警告。啥咪?這不是之前可以用的一個程式碼?因為大部份都是撰寫風格部份的錯誤與警告,例如下面這些:

  • 語句結尾加了分號(;): 這規則我在.eslintrc中另外設定的
  • 空格的數量不對: 18.1 將 Tab 設定為兩個空格
  • 字串要用單引號(''),不用雙引號(""): 6.1 字串請使用單引號 ''。
  • 函式或區塊語句的空格或空行風格: 18.2、18.3、18.4、18.7、18.8、18.9、18.11等等,整個18節內容都有。

上面的程式碼像下面這樣改寫後,雖然看起來和原來的差不多。但現在只剩下4個錯誤3個警告,剩下的錯誤是因為我沒有引入jquery模組,而警告是因為用了三個console.log必定會有警告,這樣應該算幾乎符合整個風格樣式的檢查:

$('.btn').click(() => {
  $.ajax({
    url: 'check.php',
    data: {
      old_password: $('#password').val(),
    },
    type: 'POST',
    dataType: 'json',
    success(data, textStatus, jqXHR) {
      console.log('success')
    },
    error() {
      console.log('success')
    },
    complete() {
      console.log('success')
    },
  })
})

所以說這還是需要逐漸地養成習慣的,我建議你開始今天就用吧,用久了自然就會習慣了,事實上大部份的錯誤或警告,只是提醒在撰寫時的一些格式問題。

剖析錯誤檢查

ESLint會檢查出在程式碼中可能的剖析錯誤,剖析錯誤的要視剖析器(parser)的設定值而決定,剖析器是檢查工具的核心。ESLint本身就預設支援ES2015/ES2016/ES2017與JSX的語法剖析,預設是使用Espree剖析器,只是有些太新與特別的babel擴充它並不支援,例如我們要開發React應用,一般都還是會用babel-eslint作為剖析器。

這些剖析錯誤是通常都是一旦執行就會造成錯誤而停止執行,或是在編譯時就會發生錯誤。所以當出現剖析(致命)錯誤時,其他的所有檢查訊息都會先不出現,而只有出現這個錯誤的訊息。因為這個錯誤如果不修正,會造成整個程式不能正常編譯或執行,例如:

{ a: 1 }.toString() //message: 'Parsing error: Unexpected token'

註: 這個錯誤的原因是因為前面的物件字面文字,JS會當作是區塊的語句語法來解析,這尤其是在像babel這類的工具進行編譯時會產生錯誤。

或是下面這個例子中的錯誤(跳脫符號(\)後面多了一個空格):

const a = 'This is a \
book'

// message: 'Parsing error: Unterminated string constant'

註: 這個錯誤的原因是用跳脫符號(\),跳脫換行符號來作多行字串的定義,但在寫的時候多了一個空格在後面所以造成錯誤。這個錯誤在編輯軟體上是無法直接看到,所以很難被查覺,除非有開啟一些編輯器中的設定值(顯示換行符號之類)。另外,使用跳脫換號符號來定義的字串值,並不是多行字串而是單一行字串值。總之,這是個完全不建議的字串定義方式,不過實際上有少部份人會使用。

或是像ES6中新語法的基本使用錯誤,這個錯誤在瀏覽器中也會造成程式停止執行,ESLint似乎不會算作致命的錯誤,但也可以正確的指出錯誤:

const a = [1, 2, 3]
a = [] //message: ''a' is constant. (no-const-assign)'

所以當有出現剖析錯誤(Parsing error)時,你應該要立即想辦法修正,這些錯誤如果不修正,程式是沒辦法正常執行。

習慣性語法 vs ESLint的錯誤

有些語法幾乎是在其他程式語言中非常習慣的語法,但在ESLint中有可能會出現警告或錯誤訊息,這個時候你可能就要作取捨,看是要遵照ESLint的檢查來修改,還是要改變檢查的規則。

舉個常見例子來說,像下面這個for語句,幾乎每個開發者都會寫成這樣的程式碼:

for (let i = 0; i < 10; i++) {
  // some code
}

這時會在ESLint會回報出一個錯誤訊息(no-plusplus),像下面這樣:

message: 'Unary operator '++' used. (no-plusplus)'

這個訊息是什麼意思,就是告訴你不能使用像遞增(++)或遞減(--)的運算符。為什麼?因為這兩個運算符它們在JavaScript語言中有一些很古怪的特性,在換行時會出現特殊的結果。不過我個人覺得這除非寫錯或亂寫,不太容易寫成這副德性,例如下面這個來自ESlint中的範例:

// 下面相當於 i++

i ++
j

// 下面相當於 ++j

i
++
j

不過,這兩個運算符會混淆的情況還不少,有的時候會不注意到底是遞增了哪個變數,或是先遞增(減)還是後遞增(減)。像是下面這樣的合法的程式碼,它到底遞增x還是遞增了y變數:

let x = 1
let y = 2
x+++y

正確的答案是像下面這個一樣,這語句是遞增了x變數:

x++ + y

註: x+++y是合法語句,但x+++++y就是錯誤的語句。

這個有名的遞增(++)或遞減(--)的運算符問題,在Douglas Crockford大師的知名著作JavaScript: The Good Parts,中譯本為JavaScript:優良部分,就被認為是造成"壞程式碼"的其中一個,所以這個檢查規則在JSLint工具中就已經有了。

當然,這是因為語法使用時撰寫不清造成的,除非寫錯或亂寫才會出現這種情況。大師雖然建議你使用像i += 1的表達式來取代原本的i++。但我個人(與眾多的開發者)覺得還是得要看習慣,我的習慣是在for語句中還是照用。而且像有的情況是不能這樣取代,像下面範例這個就不能取代,要分開寫才行:

array[++i] = foo

// 要用下面的語法來取代

i += 1
array[i] = foo

ESLint中提供了allowForLoopAfterthoughts這個選項,可以讓你在for語句中使用遞增與遞減的運算符,這是很棒的一個設定值。反正社群上一定有人覺得檢查工具就是要像這樣,提供常用的習慣設定就是了,ESLint自然會順應社群上的一些好的建議。

以上只是ESLint上百個檢查規則的其中一個,這會與你(或整個開發團隊)的使用習慣相關,當衝突發生時你需要作個取捨,看是要調整一下規則,還是理解一下為什麼這樣檢查,然後依照這個錯誤指示逐步改變習慣。

ESLint的設定檔

我把ESLint的設定方式放在最後一節,是因為ESLint有個大缺點,就是它不是很容易設定。它在設定檔的格式部份,不知道已經修過或改過多少次,而且可以支援的格式有很多種。先不說規則要如何設定,它的設定檔基本上是使用.eslintrc這個檔案,按照官方Configuring ESLint文件的說法,它可以使用JSON或YAML格式,所以你會看到網路上有兩種設定值的格式。

我在上一章的樣版文件中附的設定檔案的內容如下,這是JSON格式的:

{
  "parser": "babel-eslint",
  "extends": "airbnb-base",
  "rules": {
    "semi": ["error", "never"]
  },
  "ecmaFeatures": {
    "jsx": true,
    "experimentalObjectRestSpread": true
  },
  "env": {
    "browser": true,
    "node": true
  },
  "plugins": [
    "import"
  ]
}

大概解說一下這裡面的幾個設定區域:

  • parser: 指的是剖析器,如果你有用babel編譯器,就是設定"babel-eslint"。使用babel的話,可以針對實驗性的語法(還未標準的語法)進行檢查,但有可能與現行瀏覽器的執行結果有一些小差異。
  • extends: 這可以指定一些已經設定好的規則設定檔,像我這裡是用"airbnb-base"。不過專案裡也要有裝eslint-config-airbnb-base套件才能這樣設定。
  • rules: 額外的規則,我這裡只有另外定義可以語句結尾不用分號(;)這個規則。因為規則會很多,通常規則是擺最下面一個設定。
  • ecmaFeatures: 這是一些特殊的語法支援,這兩個都是寫React需要的。
  • plugins: 設定外掛。要有安裝才會設定,這裡使用了一個外掛 - eslint-plugin-import
  • env: 設定是要在browser或node上使用。(實際上可以設定的環境有20多種,大部份都是測試環境)

我會建議初學者先用現成的就好。除了上面的這幾個設定區域外,它的規則有超過一百種,而且不一定可用設定值都是相同的,如果你要設定規則,不妨先從別人設定好的來修整或覆蓋,像我上面設定rules區域中這樣。

影片

這個影片中展示了所有這個章節中的設定與安裝的內容。

Day03

影片網址在Youtube的這個網址

結論

ESLint畢竟只是個檢查工具,光靠工具只能提醒你在撰寫程式碼時的一些可能性的問題,它並不會幫你自動修正錯誤。而至於程式碼的主要功能是不是能正常運作,或是如何來修正這些程式碼,還是有待於開發者自己的知識。

JavaScript嚴格地來說,本質上並不是一個嚴謹的程式語言,撰寫風格相當自由而且有許多陷阱與不好的語法。藉由ESLint工具的輔助,的確可以有效的協助開發者,進一步寫出較少bug、較少濳在問題、閱讀性較高的程式碼。好東西能不推薦嗎?建議你現在就開始使用吧。


上一篇
Day 01: 介紹
下一篇
Day 04: Flow - JavaScript靜態類型檢查工具
系列文
React - DOM界的彼方30

尚未有邦友留言

立即登入留言