Frontend Intermediate Course - 作業十直播筆記

最後一次作業胡立老師沒有修改，不過交完作業之後，在 Slack 群組裡面胡立老師有提到其實應該所有的 JavaScript 檔案都應該檢查才對，當時我在 webpack.config.js 裡面出現的錯誤不知道怎麼修改，所以就把設定檔都放在忽略檔案名單裡，不是最正確的方式。

後來才知道，原來在 webpack.config.js 檔案裡，如果沒有用到 webpack 這個變數，其實是不用引入的，這跟我原本的認知不一樣，點破我的盲點 XD

也加入 path.join() 修正我的另外一個錯誤。

所以在 package.json 裡面，讓設定檔也要被 semistandard 檢查：

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

然後在 webpack.config.js 裡面，拿掉 var webpack = require('webpack');，同時引入 var path = require('path');，修改一下路徑的寫法：

module.exports = {
  entry: './src/js/index.js',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.min.js'
  }

/* Original codes:
module.exports = {
  entry: './src/js/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  }
*/

最後再重新用 semistandard 檢查一次，全部都沒有問題了～


胡立老師的直播：
10. 改掉你的壞習慣：ESLint 與 standard

以下是看直播的一些筆記。

1. 利用 .git hooks 強制規範程式碼。
如果要強制自己把程式碼 commit 到專案上之前都要先檢查程式碼是否符合 standard/semistandard 的規範，可以利用 git 裡面的 .git hooks。步驟如下：

1) 首先開啟隱藏資料夾 .git。
我的作業軟體是 Windows 7，所以參考了這篇：Windows 7 作業系統下顯示隱藏的檔案、資料夾。

備註：git 是如何把每次 commit 的版本儲存起來，而且可以回復到以前的版本？秘密就是在 .git 這個資料夾，用來儲存每次 commit 的歷史資料。

顯示隱藏的資料夾之後，就可以在專案資料夾內看到 .git了，點進去 .git 會看到 hooks 資料夾。

再點進去 hooks 之後會看到幾個設定檔的範例。

需要用到的是 pre-commit.sample 這個檔案，代表的意思是在 commit 之前指定要做哪些事情。

2) 修改 pre-commit.sample。
複製 pre-commit.sample 後把檔名後面的 .sample 拿掉，這樣就會啟用 pre-commit，然後在 pre-commit 檔案內寫下我們想要在 commit 之前執行的東西，如果那一個指令錯的話就無法 commit，正確的話就可以成功 commit。在 pre-commit 檔案內寫下：

npm run test

（需要先在 package.json 檔案內修改 "script" 下的內容，可參考我上一篇的作業筆記：Frontend Intermediate Course - Homework 10）

如果程式碼有不符合 standard/semistandard 規範的地方，就無法 commit，這樣一來就強制自己一定要修改程式碼才能 commit。想要自己的程式碼更嚴謹的話就可以這樣規範。

2. 忽略檢查單行或多行程式碼。
1) 有時候在寫程式碼的時候，可能會遇到一定要用到某種寫法，但不符合 standard/semistandard 規範，這樣就可以告訴 standard/semistandard 忽略檢查那一個部份的程式碼。可參考 standard 的 How Do I Hide A Certain Warning。

忽略檢查單行可以在那一行程式碼的後面加入：

// eslint-disable-line

或指定忽略某一項指令的檢查，假設只有忽略檢查 "no-use-before-define" 這個指令：

// eslint-disable-line no-use-before-define

忽略檢查多行可以加入：

/* eslint-disable no-use-before-define */
...Your codes here...
/* eslint-enable no-use-before-define */

這裡同樣是只有忽略檢查 "no-use-before-define" 這個指令，如果要全部指令都忽略檢查就拿掉後面的 no-use-before-define。
eslint-disable 是停用 standard 檢查的意思，而eslint-enable 是啟用檢查的意思。

2) 如果遇到某些全域變數沒有定義的錯誤時，可以把全域變數加到 package.json 裡面：

{
  "standard": {
    "globals": [ "myVar1", "myVar2" ]
  }
}

或是在使用那個全域變數的檔案內，在最上方加入：

/* global myVar1, myVar2 */

這樣就可以告訴 standard/semistandard 忽略檢查那些全域變數。

不過當然是必要使用的時候才忽略檢查，不然全部都忽略檢查就失去用 standard/semistandard 檢查的意義了 XD


這篇就是這個課程的最後一個筆記了，因為懶惰所以拖了幾天才寫完，有一點不捨（即使每次寫作業跟筆記其實都有點痛苦 XD）。不過回頭看自己寫的所有筆記，就會很慶幸當時花了那些時間仔細的記錄下來，有些細節沒有常常使用或複習真的很容易就忘記了。希望自己可以繼續加油！