一般來說，剛安裝好的 Visual Studio Code 就已經相當完整，內建 emmet、各種常見語言的色彩標示、程式碼折疊、所在行標示、HTML & CSS 語法及屬性的下拉選項、支援 Markdown 等等…對一個網頁設計師來說，如果沒有特別的需求，幾乎可以馬上用來開發。話說如此，但總還是有一些小細節不是那麼完美，就像買了最潮的球鞋，裡頭卻有顆小石頭，穿起來總是刺腳。所幸 Visual Studio Code 提供極為豐富的設定，幫助你打造屬於自己的編輯器。下面有一些我們推薦的設定，讓你的 Visual Studio Code 不只是潮，用起來更是舒適。
在進入正式的文章前需要先請你記住一組快速鍵：Ctrl+,。或點選「檔案」->「喜好設定」->「設定」。它會呼叫 Visual Studio Code 的設定畫面，你會在接下來的文章中經常使用到。
一、取消 Visual Studio Code 的 Hover 提示
Visual Studio Code 內建標籤的提示說明！說實在，這功能對剛入門的新手也許有點幫助，但對熟練的使用者來說著實有點雞肋，而且非常妨礙閱讀。因為當你在編輯或修改頁面的語法，滑鼠總會時不時觸發到 Hover 的提示，編輯器的工作區就會被提示的區塊所遮擋，進而影響編碼的流程。因此會比較建議將這個功能關閉，讓你的工作流程不至於被這些提示框給打斷。
關閉的方式也非常簡單，先開啟 Visual Studio Code 設定的畫面，接著在搜索欄位輸入 editor.hover，完成後你會看到下面的畫面，最後將 Editor.Hover: Enabled 勾選的項目取消即可。
二、選擇一套適合在編輯器上使用的字型
由於編輯器的字型尺寸通常不會太大，而西文中有些字母的大小與數字寫極易混淆，特別是當你同時將 HTML、CSS 及 Javascript 混編在同一個頁面時，內容被清楚的標示對你的工作及除錯效率會有質量上的提昇。因此，在選用編輯器使用的字型時有幾個特點需要注意：
- 清楚的區分字母與數字的細微差異，如 oO0D iITlL1jJ g9qCGQ8B
- 出於辨識上的考量，請避免選用太密集的字型，通常等寬字型會是編輯器的首選，它可以在字母與字母之間保留固定且寬敞的閱讀空間，藉此降低擁擠造成誤判的情況。
如果你沒有特別喜好的等寬字型，可以先到 Programming Fonts 試試，支援線上預覽，找到喜歡的再下載，個人推薦使用 Source Code Pro，它除了滿足上述的優點外還有下列優勢：
- 使用 SIL 開源字型授權
- 有多種字重可以選擇
在了解為什麼需要選擇一套適合編輯器使用的字型後，請先行將字型安裝完成，接著進入 Visual Studio Code 的設定畫面，並在畫面上方的搜索欄輸入 font family，完成後你會看到下面的畫面：
然後在 Editor: Font Family 的欄位裡輸入：Source Code Pro，並將它排到最前面即完成，畫面如下：
三、設定預設文件的格式
由於 Visual Studio Code 支援多種程式語言，如果沒有特別的設定，Visual Studio Code 預設是開啟純文字檔。但由於開發上的需要，習慣上都會將之改成常用的格式，如網頁設計師比較適合的預設文件是 HTML，工程師可能是 PHP、C#、Java 等等，Visual Studio Code 可以根據需要去調整。
設定方式一樣先開啟 Visual Studio Code 的設定畫面，接著在搜索欄位輸入 default language，請在 Files: Default Language 輸入你要的格式，這裡以 HTML 為例，畫面如下：
四、修改 HTML 預設的 lang 屬性
由於 Visual Studio Code 預設的 HTML lang 屬性是 en，以至於每次開啟新的 HTML 檔時，都需要以手動的方式自行修改，如果你也是前端工程師或網頁設計師，經常有 HTML 的專案要製作，強烈建議更新 lang 的預設值，方式如下
首先，先開啟設定畫面，接著在搜索欄輸入 emmet.variables，看到下面的畫面後點選新增項目，在項目的地方輸入 lang，值的地方輸入 zh-Hant-TW 即可
五、將字級調整到適合螢幕閱讀的大小
由於螢幕的規格並不同一，市面上有各種不同的螢幕尺寸，螢幕的解析度也不一樣，加上 Visual Studio Code 是微軟所開發，預設的字級都是以西文符號為主，這樣的文字尺寸對中文內容的編輯者來說往往過小。因此我們在安裝完 Visual Studio Code 後，會根據當時的螢幕規格，調整一個適合自己閱讀的字級，調整的方式如下：
首先，先開啟 Visual Studio Code 的設定畫面，並在畫面上方的搜索框輸入 font size，接著在 Editor: Font Size 的欄位輸入你喜歡的字級，單位是像素，改完後就可以立即開一個檔案預覽。
六、開啟 Format on Poste 的功能
實務上，我們在編輯網頁的時候常常會使用到外部的套件，或者工作時遇到盲點，在與同事討論後得到部份片段的程式碼，這些程式碼的排版與自己的縮排習慣不一定相同，如果直接貼到專案上，Code 的編排就會十分凌亂。雖然不會影響功能，但出於後續維護及閱讀上的考量，會比較建議將它們重新排版。而 Format on Poste 就是自動將這些編排不統一的外部程式碼，在貼到我們的專案後會自動重新縮排，進而得到縮排統一的檔案。
啟用的方式一樣是先開啟 Visual Studio Code 的設定畫面，接著在畫面上方的搜索框輸入 format on paste，並在畫面 Editor: Format on Poste 的欄位中將之勾選。
七、開啟 Format on Save 的功能
它與第五點有點相似，差別只在於 Format on Poste 只影響到剛貼入的程式碼片段，而 Format on Save 則是在你存檔的同時，對「整份文件」進行重新縮排的動作。
啟用的方式一樣是先開啟 Visual Studio Code 的設定畫面，接著在畫面上方的搜索框輸入 format on save，並在畫面 Editor: Format on Save 的欄位中將之勾選。
另外，有一點需要注意！如果你的工作性質比較偏向維護既有的網站，如維護品牌客戶的官網，它們的網站往往會外包給不同的團隊且在不同的時間點進行維護，程式碼的可讀性一般較差，除錯也會極花時間，為了避免重新縮排後出現不可預期的錯誤，導致維護成本的提升，會比較建議關閉 Format on Save 的功能。
八、關閉 minimap 的功能
minimap 的用途是呈現目前頁面的概況，它會固定佔用右側欄位的空間，讓可編輯的區域縮減。一般我們在編輯頁面的 code 時，都會希望將 code 以外的干擾都排除，所以會比較建議將 minimap 的功能關閉。但如果你習慣透過 minimap 快速移動頁面的位置則可以保留，Visual Studio Code 預設是開啟 minimap 的功能，這點可依自己的編輯習慣調整。
關閉的方式一樣是先開啟 Visual Studio Code 的設定畫面，接著在畫面上方的搜索框輸入 minimap，並在畫面 Editor，minimap: Enabled 欄位中的勾選取消。
九、設定自己喜歡的主題外觀
Visual Studio Code 預設多款主題樣式，大致可分成淺色主題、深色主題及高對比主題三大類型，你可以根據自己的喜好挑選一個順眼的，預設的主題中 Monokai 是很多人的首選，如果你沒有特別的喜好，建議可以先從 Monokai 開始玩起。
挑選預設的主題樣式可先按 Ctrl+K 接著再按 Ctrl+T，然後再出現的選單中逐一測試並選擇即可，畫面如下圖：
如果你在預設的主題樣式中找不到喜歡的風格，也可以到 Excensions 下載其它主題樣式，你可以按 Ctrl+Shift+X，或直接點選下圖 1 的 ICON，並在畫面左上角的搜索欄 (2 的位置) 輸入你喜歡的主題樣式名稱即可。如果你沒有特別喜歡的主題，強力建議下載 Atom One Dark Theme 試試。
十、開啟自動折行的功能
我身邊的朋友對這個設定反應比較兩極，主要的差異點在於捲軸對內容的影響。
贊成開啟自動折行的人覺得在工作的可視區內應該要呈現所有的內容，捲軸會破壞內容的完整性。
反對自動折行的人則覺得一行就因該敘述一個完整的段落，自動折行會破壞段落的完整，且畫面看起來也比較乾淨整齊。
兩邊都有一定的道理，個人是比較偏向開啟自動折行的功能。Visual Studio Code 預設自動折行是關閉的，如果你比較喜歡後者的觀點，則不需要做任何改變。反之，如果你想開啟自動折行的功能，可以開啟 Visual Studio Code 的設定畫面，接著在畫面上方的搜索框輸入 word wrap，並在畫面 Editor: Word Wrap 的下拉欄位選擇 on。如下圖：
常用 Extensions 套件推薦：
- Auto Rename Tag：同時更新開始標籤及結束標籤
- Beautify：將程式碼重新編排，如果你安裝兩種以上的排版樣式，可以透過 Ctrl+Shift+P，之後點選 Format Document...，接著會列出目前可套用的樣式列表，挑選其中一個即可。
- Material Icon Theme：檔案格式的 ICON
- Path Intellisense：檔案路徑提示
- Atom One Dark Theme：深色的佈景主題
最後，找到屬於自己的設定
文章讀到這裡，在調整 Visual Studio Code 的過程中，應該已經發現它的設定面板裡有高達上百種的設定，可自訂性非常高，用以滿足不同開發者的使用情境。我們很難用一套標準去規範不同使用者的需求，這篇文章提供的建議也只是根據自身的需要及使用經驗，歸整出比較常用的設定，並不一定可以滿足你的開發需求。
如果你是一名有經驗的開發者，應該早就有一份屬於自己順手的設定。但如果你是剛加入 Visual Studio Code 的新夥伴，希望這篇文章可以提供一個參考的方向。日後，你可以根據自身的需要去測試，找到最適合自己的設定方案，讓 Visual Studio Code 變成你在開發上的倚天劍、屠龍刀。
最後，分享是進步的超能力，也歡迎大家在下面的留言區聊聊自己的設定，希望這篇文章對你有所幫助，咱們下回見。
您好!! 請問intellisense的內容要顯示中文, 不知道該如何處理?? 上網查了很多, 也都試了, 都無法成形.
目前是使用 VSCode (v1.52) + Python Extension; Python v3.9.1
希望能獲得協助, 謝謝~
從你提到 Python，我猜你想問的因該不是 Path intellisense 這個 Extensions。
因此對於你的問題不是很清楚。
我在微軟的官網找到下面三篇文章，內容是針對 Visual studio，也許可以當成一個 VSCode 的切手點：
沒幫上什麼忙，希望這些資訊可以對你有些幫助。