VSCode 的推薦實用設定

前言

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

開啟小白點(空白換行)

以往我們在使用預設的 VSCode 的時候,基本上你不太會看到小白點(空格與定位點),所謂的小白點是什麼呢?例如:

小白點

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

renderControlCharacters

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

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

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

LF 與 CRLF 差異

預設行尾字元

如果你是一名前端工程師,又剛好有在使用 ESLint 的話,往往我們開啟檔案時可能會是 CRLF 換行方式,而這種狀況大多都是出在 Window,因此你可以進入到 setting 中加入以下這一個屬性:

1
"files.eol": "\n",

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

eol

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

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

editor.tabSize

終端機預設字型大小

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

terminal.integrated.fontSize

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

emmet 啟用

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

emmet

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

includeLanguages

懶人包:

1
2
3
4
5
6
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"plaintext": "jade",
"ejs": "html",
},

預設 Emmet 變數

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

emmet.variables

滾輪放大視窗字型

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

mouseWheelZoom

懶人 json 包

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

懶人包:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
// 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,
}

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ