身為開發者，我會建議你使用的 VSCode 的實用設定

前言

工欲善必先利其器，身為長期有在 VSCode 的工程師來講，如果可以多了解自己的編輯器設定，其實可以幫助自己在實際開發上的方便性以及除錯，因此這一篇我就紀錄與分享一下有哪些 VSCode 的實用設定吧！

顯示空格與定位點

以往我們在使用預設的 VSCode 的時候，基本上你不太會看到小白點(空格與定位點)，所謂的小白點是什麼呢？也就是以下這張圖的樣子：

這個功能在 VSCode 叫做「renderControlCharacters」，因此你可以進入到 VSCode 的設定搜尋「renderControlCharacters」

除此之外也會建議將「renderWhitespace」改成 All，這樣子就可以看到空格與定位點符號囉。

而這個功能在實際開發上非常重要，也因此會建議一定要開啟，這樣子才能夠知道自己目前到底使用的是空格還是定位點哩。

額外補充，一個小白點代表空格，而箭頭則是定位點，呈現方式如下圖：

預設行尾字元

如果你是一名前端工程師，又剛好有在使用 ESLint 的話，那麼這個設定我非常建議你要調整。

首先通常我們開啟檔案時可能會是 CRLF 換行方式，尤其是 Window 開發者最常見，但是許多規範，如 ESLint 都會建議你改成 LF，因此為了解決這個問題你可以進入到 setting 中加入以下這一個屬性：

"files.eol": "\n",

又或者是直接到 setting 中搜尋 eol 即可找到該設定：

這個設定是預設行尾字元，使用 \n 表示 LF，\r\n 表示 CRLF，而通常會需要調整這個設置是因為 CRLF 格式的縮排會導致開發者在換作業系統時，可能有機率性出現程式碼大跑版，因此通常許多規範都會建議使用 LF，畢竟 CRLF 只有在 Window 上。

額外補充，你也可以調整 tab 的一些設置，例如你期望 tab 等於多少空格，因此你可以搜尋「tabSize」試著調整看看

編輯器字型大小

有時候可能覺得預設字型太小，因此也可以透過在設定搜尋「terminal.integrated.fontSize」來調整字型大小

反之若要調整編輯器字型大小則是「editor.fontSize」。

Emmet

雖然 Emmet 基本上是預設會開啟的，但是還是會有機會遇到設置跑掉的狀況，所以也可以在設定中搜尋「triggerExpansionOnTab」，只需要確定它是否有打勾為主

另外 VSCode 的 emmet 預設只針對特定檔案格式展開，但是例如 .ejs、.vue 等可能就無法運作，因此就會建議搜尋「includeLanguages」，然後在底下新增即可

懶人包：

"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "vue-html": "html",
  "plaintext": "jade",
  "ejs": "html",
},

Emmet 預設值

當然 VSCode 還有額外一個強大的功能，有時候我們使用 !+tab 展開 HTML 樣板時，可能 lang 與 charset 都要調整一次，但是 VSCode 允許你預先設置好，之後展開就會呈現你調整的預設值，首先先在 VSCode 設定搜尋「emmet.variables」，並依照相對應設置即可：

滾輪放大視窗字型

這個設置也是非常實用的功能，以往我們在放大視窗時，可能要按著特定組合按鍵來放大，這樣子其實滿麻煩的，因此 VSCode 也有提供一個功能是按住 CTRL+滾輪放大 VSCode 視窗，可以在搜尋中搜尋「mouseWheelZoom」，並將它打勾即可：

懶人 json 包

下面這邊是我上面介紹的完整懶人包，只需要進入到 settings.json 複製貼上即可，但是這邊要注意，如果你有客製化自己的 settings.json，會建議你先複製出一份再個一個屬性貼進去會比較好。

懶人包：

{
    // emmet tab 展開
    "emmet.triggerExpansionOnTab": true,
    // 不支援的語言中啟用 Emmet
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "vue-html": "html",
        "plaintext": "jade",
        "ejs": "html",
    },
    // 開啟顯示空白(格)符號
    "editor.renderWhitespace": "all",
    "editor.renderControlCharacters": true,
    // 預設 HTML 樣板設置
    "emmet.variables": {
        "lang": "zh-Hant-TW",
        "charset": "UTF-8",
    },
    // tab 預設空格數量
    "editor.tabSize": 2,
    // 預設行尾字元，使用 \n 表示 LF，\r\n 表示 CRLF。
    "files.eol": "\n",
    // 編輯器字型大小
    "editor.fontSize": 16,
    // 終端機字型大小
    "terminal.integrated.fontSize": 16,
    // 滑鼠放大視窗字型(按著 CRTL + 滾輪)
    "editor.mouseWheelZoom": true,
}