【VSCode】配置設定分享

更新於 發佈於 閱讀時間約 7 分鐘

為什麼想記錄下來


事情是這樣的...

某天在檢視~/AppData/Roaming裡面的資料,看看有沒有垃圾要手動清理,一個不小心砍掉了VSCode的設定資料夾,以至於重新開啟後整個頁面跟剛下載來安裝後的編輯器沒兩樣,乾脆趁這機會整理一下日常配置設定,哪天換新機或是又手殘了也能快速復原歸位。


給時間寶貴的你


鍵入ctrl+p叫出搜索框,輸入>Preferences: Open User Settings(JSON)
直接照貼上去後,再來補上缺少的擴充套件吧!

{
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Catppuccin Mocha",
"terminal.integrated.defaultProfile.windows": "Git Bash",
"terminal.integrated.fontFamily": "'Cascadia Code', Consolas, 'Courier New', monospace",
"editor.fontFamily": "'Cascadia Code', Consolas, 'Courier New', monospace",
"editor.lineHeight": 1.5,
"editor.minimap.enabled": false,
"editor.formatOnSave": true,
"editor.fontLigatures": true,
"vim.smartRelativeLine": true,
"vim.useSystemClipboard": true,
"vim.handleKeys": {
"<C-d>": true,
"<C-s>": false,
"<C-z>": false,
"<C-x>": false,
"<C-c>": false,
"<C-v>": false,
"<C-p>": false,
"<C-f>": false
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.tabWidth": 4
}


擴充套件

主題樣式


分別在youtube上看了不同年度推薦的主題排名,有一段時間很喜歡NeoVim使用者的配置,就找看看VSCode有沒有類似的主題,從使用VSCode後一直以來都偏好使用深色主題,先後試用了GruvboxAtom One Dark最後落腳到了Catppuccin Mocha

專案檔案圖示通常也都跟著主題,只不過我已經習慣了material-icon-theme的圖示,就另外進行了更換。

字型


用了很長一段時間的Consolas,畢竟算是大多系統內建會有的字型,用起來也還順眼,要不是最近工作上有些字集的問題在處理,大概也不會有想要嘗試別的字型的興趣。

禮貌性徵詢一下Copilot的意見,回答如下:

寫程式時,選擇合適的字型可以大大提升閱讀和編寫的體驗。以下是幾款常見且受歡迎的程式碼字型:

1. Fira Code:這款字型以其連字造型(ligatures)著稱,能將常見的程式碼符號組合顯示為更直觀的符號,例如 != 會顯示為 ≠。
2. JetBrains Mono:由 JetBrains 開發,這款字型強調每個字母的清晰度和辨識度,特別適合長時間編寫程式碼。
3. Consolas:這是 Windows 系統內建的字型,易讀性高且不需要額外安裝。
4. Cascadia Code:由微軟開發的開源字型,具有現代感的外觀和良好的可讀性。
5. IBM Plex Mono:這款字型設計簡潔,適合喜歡簡約風格的開發者。


Fira CodeJetBrains Mono需要另外安裝檔案,直接在設定上輸入字型,雖然有變化但似乎沒裝好,只不過這幾款差異其實不算特別大。方便起見,我選擇了Cascadia Code,並且放大了列高。這款字型一樣支援fontLigatures,視覺上還是有稍稍美觀一點啦!

對於整天看程式碼的工程師們來說,除了快速達成功能外,每天要長時間面對的字體還是看了舒服才好。


排版工具


使用常用的prettier進行自動排版,更改將tab設定為4個空格。有時候從Log上抓出來的requestresponse是沒有排版過的json格式,直接建立一個markdown檔案撰寫json區塊,就可以使用快捷鍵對區塊內的程式進行格式化了。


快捷鍵


都用Vim了還需要什麼快捷鍵。

適應了一年多的vim motion,基本上寫程式不用滑鼠,加上機械鍵盤的加持,專注程度跟英打的手感都有一定的幫助。

工作上多多少少還是有些雜事需要剪剪貼貼,找檔案追程式,或是需要進行內容比對,剛開始使用的我感到非常不順暢,在鍵位功能衝突的狀況下,使用體感非常卡。直到我找到了這兩項配置:

  1. useSystemClipboard:使用系統剪貼簿。
    如此一來,ctrl+c複製下來的內容,就可以用p貼上了,反之在編輯時用d剪下的內容,也可以改用ctrl+v貼上。

  2. handleKeysvimvscode衝突的快捷鍵,透過設定決定使用哪一項。
    例如我把剪下、貼上、複製、還原、叫出搜索列、查找功能轉換為原本的功能鍵,翻頁功能改回用vim的動作。

Bonus


在擴充套件搜索GlassIt-VSC進行安裝後,就可以透過ctrl+alt+zctrl+alt+c調整背景透明度,搭上自己喜歡的桌布當背景,Nice!







留言
avatar-img
留言分享你的想法!
avatar-img
Err500
12會員
77內容數
遇到的坑、解過的題、新知識的探索、舊時代的遺毒!? 工作後我發現,文件更新往往跟不上新需求的更迭,犯錯的歷史總是不斷重演。因此,我改變了方式,蒐集從程式上、系統上的每一次異常處理過程,好讓再次遇到相同的問題時能快速應變。此專題就是我的錯題本,期待日後不管在工作上或交流上遇到難題,都能輕鬆地應答:有什麼難的,我都踩過。
Err500的其他內容
2025/03/28
本文章提供Neovim在Windows環境下的安裝教學與入門設定,從基本安裝、環境變數設定到使用kickstart.nvim套件快速配置IDE環境,降低新手入門門檻。文章也提及了進階設定與客製化的方向。
Thumbnail
2025/03/28
本文章提供Neovim在Windows環境下的安裝教學與入門設定,從基本安裝、環境變數設定到使用kickstart.nvim套件快速配置IDE環境,降低新手入門門檻。文章也提及了進階設定與客製化的方向。
Thumbnail
2025/03/15
本文比較IntelliJ IDEA、VSCode和Eclipse三種Java開發工具的優缺點,針對不同使用者族群提供建議。IntelliJ IDEA適合初學者,VSCode輕量且具彈性,Eclipse則適合舊專案開發。
Thumbnail
2025/03/15
本文比較IntelliJ IDEA、VSCode和Eclipse三種Java開發工具的優缺點,針對不同使用者族群提供建議。IntelliJ IDEA適合初學者,VSCode輕量且具彈性,Eclipse則適合舊專案開發。
Thumbnail
2024/02/05
巨集(Macro)是什麼? 第一次聽到這個詞是出現在excel,按下錄製鍵後,畫面上進行的操作會被記錄下來,可以重複回放執行前述操作。之後接觸C語言的#define,巨集又跟函數類似...
Thumbnail
2024/02/05
巨集(Macro)是什麼? 第一次聽到這個詞是出現在excel,按下錄製鍵後,畫面上進行的操作會被記錄下來,可以重複回放執行前述操作。之後接觸C語言的#define,巨集又跟函數類似...
Thumbnail
看更多
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
本篇將分享VSCode工作區的設定與功能,包括如何將資料夾新增到工作區、如何存檔、以及外掛推薦。這些小技巧能夠幫助您在使用 rushjs 能更輕鬆地管理 monorepo,提高工作效率。
Thumbnail
本篇將分享VSCode工作區的設定與功能,包括如何將資料夾新增到工作區、如何存檔、以及外掛推薦。這些小技巧能夠幫助您在使用 rushjs 能更輕鬆地管理 monorepo,提高工作效率。
Thumbnail
切換終端機、更改預設的終端機,詳細且附圖
Thumbnail
切換終端機、更改預設的終端機,詳細且附圖
Thumbnail
為什麼寫這麼基本的設定呢? 剛開始打字時預設內定為微軟注音,因為沒有全部設定好,導致後續寫稿時常常打錯字,也有是因為打注音時選錯字也有關。 雖然這個很基本,但也有滿多人不知道該怎麼設定,或常被微軟裡其設定繁雜而困擾,至少我找了一陣子......。 進入畫面右下方切換中英文(右鍵),叫出IME工
Thumbnail
為什麼寫這麼基本的設定呢? 剛開始打字時預設內定為微軟注音,因為沒有全部設定好,導致後續寫稿時常常打錯字,也有是因為打注音時選錯字也有關。 雖然這個很基本,但也有滿多人不知道該怎麼設定,或常被微軟裡其設定繁雜而困擾,至少我找了一陣子......。 進入畫面右下方切換中英文(右鍵),叫出IME工
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News