Frontend Intermediate Course - 作業十

作業十的 GitHub 連結：改掉你的壞習慣：ESLint 與 standard

這次作業應該是最快完成的一個作業～

我選擇 semistandard 做為我這次作業的規範，是 standard 的分號版本，兩個版本大同小異，最大差別在於 semistandard 在程式碼裡面要加分號，而 standard 不用加分號。因為我原本的程式碼都有加分號的習慣，所以就選 semistandard。

semistandard 需要 Node.js 支援並用 npm 安裝，這個部份經過前兩個作業的訓練已經很熟悉了。後來發現 Sublime 上有套件可以用，也有順便安裝。


以下就是寫作業的流程：

1. 安裝 semistandard：

npm install semistandard -g
npm install semistandard --save

全域安裝同時也在專案根目錄下面安裝，這樣 package.json 才可以新增版本資訊。

2. 安裝 snazzy：

npm install snazzy -g
npm install snazzy --save

snazzy 是用來美化輸出的結果，內建輸出是沒有顏色的，加上 snazzy 後比較容易讀懂。同樣在全域跟專案根目錄下都安裝。

執行的時候利用 pipe 跟 semistandard 結合：

semistandard --verbose | snazzy

3. 修改 package.json：

"scripts": {
    "test": "semistandard --verbose | snazzy",
  }

這樣要執行 semistandard 只要在專案根目錄下輸入：

npm run test

然後就出現好～多～錯誤 XD

我大部分的錯誤都是縮排（semistandard 用兩個空白鍵當作一次縮排，之前我都是用一個 tab 見當作一次縮排），或是多加了空格、少了空格。還有在檔案的最後面要加一行空白（只能一行不能多也不能少）。字串要使用單引號不能用雙引號。

一開始我不知道可以忽略檢查某些檔案，連 gulpfile.js、webpack.config.js 都有檢查，可是檢查到 webpack.config.js 檔案時，semistandard 一直說 var webpack = require('webpack'); 裡的 webpack 變數在檔案裡沒有被使用，可是引入 webpack 是必要的啊（備註：後來才知道如果沒有用到 webpack 這個變數就不需要引入），搞不清楚怎麼解決。還有規定我在 webpack.config.js 裡面要用 path.join() 去寫路徑。

後來看了一位同學的作業，才發現原來 webpack.config.js 是可以被忽略的檔案，只要在 package.json 裡面加入要 semistandard 忽略檢查的檔案就可以了（我也就偷懶沒研究怎麼用 path.join() 了 XD）。

在package.json 裡面加入要被忽略檢查的檔案：

"semistandard": {
    "ignore": [
      "src/css/",
      "dist/*.min.css",
      "dist/*.min.js",
      "node_modules/",
      "*.config.js",
      "gulpfile.js"
    ]
  }

一一修改完所有錯誤就完成這次作業了。

4. Sublime 套件：
之前在 Sublime 上有安裝 SublimeLinter，但沒有安裝要 linter 的相關套件，所以一直沒有好好利用到它。semistandard 也有 Sublime 套件，安裝完 SublimeLinter 後再安裝 SublimeLinter-contrib-semistandard，並且在 cmd.exe 裡面利用 npm 安裝：

npm install -g semistandard

這樣就可以在 Sublime 上直接看到哪裡需要修改了， 如果對 Sublime 套件安裝有疑問可以參考我之前寫的 Sublime Text 3 套件安裝紀錄 （但其實那篇也不算教學，不過有其他連結可以參考 XD）


完成所有的作業了～～ 對於自己可以堅持到底感到驕傲 (✪ω✪)