你剛裝好 VS Code，跟著 YouTube 教學影片操作，但畫面怎麼看起來跟影片完全不一樣？程式碼不會自動存檔、字體小到看不清楚、辛苦寫了 30 分鐘的程式碼因為忘記按 Ctrl+S 就這樣消失了。
聽起來很熟悉嗎？
其實，VS Code 的預設設定是為了有經驗的開發者設計的。大多數教學都會跳過這個關鍵的設定步驟，假設你已經知道怎麼調整編輯器了。
花 5 分鐘改這 7 個設定，就能避免好幾週的挫折感。不需要裝任何擴充套件，只要調整內建設定就好。
為什麼這些設定很重要？
VS Code 功能很強大，但對新手來說也很容易迷失方向。預設設定假設你知道自己在做什麼，這對初學者來說反而增加了不必要的困擾。
這 7 個設定可以解決我最常看到新手遇到的問題：程式碼遺失、排版混亂、眼睛疲勞、縮排錯誤。你可以用兩種方式改設定：透過設定介面或直接編輯 JSON 檔案。我會兩種都教你。
先不用擔心要完全理解每個設定，跟著做就對了，馬上就能感受到差異。
如何開啟設定？
在開始之前，先教你怎麼打開 VS Code 的設定：
三種方法：
- 鍵盤快捷鍵：
Ctrl+,（Windows/Linux）或Cmd+,（Mac） - 選單： File → Preferences → Settings
- 命令面板：
Ctrl+Shift+P→ 輸入「settings」
進入設定後，可以直接搜尋設定名稱。開始吧！
設定 1：自動存檔 — 再也不怕忘記存檔
問題是什麼？ 你寫了一個小時的程式碼，電腦突然當機，才發現忘記存檔。全部都不見了。
我剛開始學程式時也遇過好幾次這種狀況。VS Code 預設不會自動存檔，也就是說你的每一行程式碼都仰賴你記得按 Ctrl+S。
解決方法： 開啟自動存檔，設定延遲 1 秒。
步驟：
- 開啟設定（
Ctrl+,） - 搜尋「Auto Save」
- 將下拉選單從「off」改成「afterDelay」
- 搜尋「Auto Save Delay」並設定為 1000（代表 1000 毫秒，也就是 1 秒）
VS Code auto save setting.jpg
VS Code afterdelay setting.jpg
或是用 JSON 設定：
打開設定 JSON（Ctrl+Shift+P → 「Open Settings (JSON)」）並加入：
{
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000
}
你會發現： 檔案分頁上的白點（代表未儲存的變更）會在你停止輸入 1 秒後自動消失。你的工作會持續在背景自動儲存。
這個設定幫我省下無數小時的心血。設定好就不用管了。
設定 2：儲存時自動格式化 — 不用再擔心程式碼排版
問題是什麼？ 你的程式碼看起來亂七八糟，空格和縮排不一致。你花更多時間在調整格式，而不是寫程式。
專業的程式碼不只是邏輯正確就好，還要容易閱讀。但對新手來說，記得每一行都要正確縮排實在太累了。
解決方法： 開啟「儲存時自動格式化」，讓 VS Code 每次存檔時自動整理程式碼。
步驟：
- 在設定中搜尋「Format On Save」
- 勾選核取方塊
VS Code format on save setting.jpg
或是用 JSON 設定：
{
"editor.formatOnSave": true
}
你會發現： 每次存檔（或自動存檔觸發時），程式碼會立刻重新排列，變成完美的縮排和間距。亂七八糟的程式碼瞬間變得乾淨又專業，完全不用你動手。
小訣竅： 這個功能使用 VS Code 內建的格式化工具就能運作。之後你可以安裝 Prettier 擴充套件，支援更多程式語言的格式化。
這就是讓專業程式碼看起來專業的秘訣。一致的格式 = 更容易閱讀的程式碼。
設定 3：字體大小 — 讓寫程式變舒服
問題是什麼？ 整天盯著小到看不清的文字？兩小時就開始眼睛痠痛？
VS Code 的預設字體大小是 14，在某些螢幕上可能還好，但在其他螢幕上就會覺得很擠。用太小的字體寫好幾個小時的程式碼，會導致頭痛和疲勞。
解決方法： 把字體放大到舒適的閱讀大小。
步驟：
- 在設定中搜尋「Font Size」
- 從 14 調整到 16 或 18（或任何你覺得舒服的大小）
VS Code font size setting.jpg
或是用 JSON 設定：
{
"editor.fontSize": 16
}
你會發現： 文字立刻變大，更容易閱讀。不用再湊近螢幕或瞇著眼睛看變數名稱了。
從 16 開始試試看，寫一天程式碼後再往上或往下調。理想的大小取決於你的螢幕尺寸、解析度和坐姿距離。沒有「正確」答案，只有你眼睛覺得舒服的大小。
設定 4：自動換行 — 不用再左右捲動
問題是什麼？ 很長的程式碼會跑到螢幕右邊看不見。你必須一直左右捲動才能看完整行。
在讀文件說明、長字串或有很多屬性的 HTML 時特別煩人。看不到完整的一行就會失去前後文。
解決方法： 開啟自動換行，讓長的程式碼自動折到下一行。
步驟：
- 在設定中搜尋「Word Wrap」
- 將下拉選單從「off」改成「on」
VS Code word warp setting.jpg
或是用 JSON 設定：
{
"editor.wordWrap": "on"
}
你會發現： 長的程式碼會自動折到下一行，而不是延伸到螢幕外。不用再左右捲動了，所有內容都會保持在可見範圍內。
這對 Markdown 檔案、長的註解說明和 HTML 特別有用。程式碼保持可讀性，不用再做滑鼠左右橫移的舞蹈了。
設定 5：Tab 大小 — 修正縮排混亂
問題是什麼？ 你的程式碼在你的螢幕上看起來很完美，但分享給別人時卻亂成一團。縮排到處都是，你的協作夥伴看得一頭霧水。
不同的程式語言和社群有不同的慣例。有些偏好 2 個空格，有些偏好 4 個。如果編輯器沒設定正確，你的程式碼就不會符合專案的風格。
解決方法： 設定一致的 Tab 大小（根據你的程式語言選擇 2 或 4 個空格）。
步驟：
- 在設定中搜尋「Tab Size」
- 設定為 2（JavaScript、CSS、HTML）或 4（Python、Java）
VS Code tab size setting.jpg
或是用 JSON 設定：
{
"editor.tabSize": 2,
"editor.insertSpaces": true
}
你會發現： 當你按 Tab 鍵時，每次都會得到一致的間距。你的縮排會符合程式語言社群的期待。
語言說明： JavaScript 社群通常偏好 2 個空格。Python 需要一致的縮排（通常是 4 個空格）。如果不確定，查查你的程式語言慣例。
VS Code 右下角的狀態列會顯示目前的 Tab 設定，找「Spaces: 2」或「Tab Size: 4」。
設定 6：插入空格 — 避開 Tab vs 空格大戰
問題是什麼？ 你分享程式碼時縮排就跑掉了。不同編輯器顯示 Tab 字元的方式不一樣，讓你漂亮的程式碼在別人螢幕上看起來亂七八糟。
這是程式設計界最古老的爭論之一，但業界大多已經選擇空格了。空格在所有編輯器和平台上的顯示都一樣。
解決方法： 設定 VS Code 在你按 Tab 鍵時插入空格。
步驟：
- 在設定中搜尋「Insert Spaces」
- 勾選核取方塊
VS Code insert space setting.jpg
或是用 JSON 設定：
{
"editor.insertSpaces": true
}
你會發現： 當你按 Tab 時，VS Code 會插入你在 Tab Size 設定的空格數量，而不是 Tab 字元。你的程式碼在任何地方看起來都一樣——在 VS Code、在 GitHub、在同事的編輯器，到處都一樣。
右下角的狀態列會顯示「Spaces: 2」，確認你使用的是空格而不是 Tab。
為瞭解決不同寫程式語言的空間設定，博主使用.editorconfig來解決它，隨後的博主將詳細介紹它。
VS Code tab and space editorconfig example.jpg
設定 7：顏色主題 — 減少眼睛疲勞
問題是什麼？ 預設主題太亮（或太暗）了。寫幾個小時程式碼後，眼睛痛還頭痛。
你會盯著程式編輯器好幾個小時。如果顏色不舒服，你就會很痛苦。
解決方法： 選一個適合你環境和個人喜好的舒適主題。
步驟：
- 按
Ctrl+K Ctrl+T（先按 Ctrl+K，再按 Ctrl+T） - 用方向鍵預覽主題
- 找到喜歡的就按 Enter
新手友善的熱門選項：
- 淺色主題：「GitHub Light」（乾淨又熟悉）
- 深色主題：「Dark+（預設深色）」或「One Dark Pro」
你會發現： 視覺立刻變舒適了。顏色應該要讓眼睛舒服，不是造成壓力。程式碼應該要容易閱讀，對比度要夠。
白天試試淺色主題，晚上試試深色主題。你隨時都可以切換，多試幾個找到適合你的。
VS Code one dark thenme setting.jpg
快速設定：一次搞定 7 個設定
想在 30 秒內全部設定好？複製這個完整的 JSON 設定：
{
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
"editor.formatOnSave": true,
"editor.fontSize": 16,
"editor.wordWrap": "on",
"editor.tabSize": 2,
"editor.insertSpaces": true
}
使用方法：
- 按
Ctrl+Shift+P開啟命令面板 - 輸入「Open Settings (JSON)」並選擇
- 把這段設定貼到大括號
{}裡面 - 存檔並關閉
VS Code json setting.jpg
完成！7 個設定幾秒鐘就搞定了。
常見問題
問：這些設定會搞亂我現有的程式碼嗎？
不會。這些設定只會影響未來的編輯和儲存。你現有的檔案會保持原樣。
問：如果不喜歡某個設定，可以改回來嗎？
可以。搜尋該設定並改回預設值，或從 settings.json 檔案中刪除該設定。
問：需要安裝擴充套件才能運作嗎？
不需要。這 7 個設定都是 VS Code 內建的，不需要任何擴充套件就能立即使用。
你剛完成了什麼
花 5 分鐘，你就把 VS Code 從令人困惑變成舒適好用。你的工作會自動存檔。程式碼會自動格式化。螢幕好讀易看。你準備好真正開始學程式了，而不是在跟工具奮戰。
接下來：
- 用你的新設定開始寫程式——打開一個專案，感受一切變得多順暢
- 接著學習 VS Code 的鍵盤快捷鍵，進一步提升生產力
- 把設定頁面加入書籤，等你更熟悉後可以繼續調整
新手開發者和自信開發者之間的差異，往往就在設定這一步。你剛剛跳過了好幾週的挫折。現在去寫程式吧！
有沒有哪個 VS Code 設定改變了你的寫程式人生？ 在留言分享吧！讓我們一起幫助更多新手更快上手。
