June 25, 2017

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)。不過回頭看自己寫的所有筆記,就會很慶幸當時花了那些時間仔細的記錄下來,有些細節沒有常常使用或複習真的很容易就忘記了。希望自己可以繼續加油!


No comments:

Post a Comment