【VSCode】配置設定分享

更新於 2024/11/24閱讀時間約 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
13會員
64內容數
遇到的坑、解過的題、新知識的探索、舊時代的遺毒!? 工作後我發現,文件更新往往跟不上新需求的更迭,犯錯的歷史總是不斷重演。因此,我改變了方式,蒐集從程式上、系統上的每一次異常處理過程,好讓再次遇到相同的問題時能快速應變。此專題就是我的錯題本,期待日後不管在工作上或交流上遇到難題,都能輕鬆地應答:有什麼難的,我都踩過。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Err500 的其他內容
2024-04-26晚上跟到了在twitch上的直播,ThePrimeagen邀請到了Uncle Bob進行訪談—沒錯,就是那位《Clean Code》、《Clean Architecture》、《Clean Agile》等書的作者Robert C. Martin。
上次完成到基本的CRUD及權限控制,後面花了點時間把排序、分頁、圖表總覽的部分做完,其他細節是佈署上線,一般在公司內有專屬的部門處理,僅了解一下流程。
原本的計畫是寫系列文,一天嗑一點,雖然完整影片約17小時,分批消化卻花了我近10天,現在回去看我第一天寫的草稿,編輯時間已經是半年前...。
前年第一次藉公司機會,參加了DevOpsDay的活動。雖然devOps一詞各自表述,大多狀況還是偏向維運會遇到的技術為主,做為平時開發、跟使用者訪談需求的工作內容來說,參加聚會如果沒有一定的知識,對講者所提到的狀況比較難有共鳴...
學習Spring Boot是Java工程師必備技能,文章分享瞭如何自學並快速上手Spring Boot開發,包括架構、開發工具、專案建立以及實作過程。
在過年期間,利用集中時間跟完Mosh Hamedani的Next.js課程,掌握了前端至後端的技術應用。本文分享了學習過程中的收穫與成果,以及對於未來應用的展望。
2024-04-26晚上跟到了在twitch上的直播,ThePrimeagen邀請到了Uncle Bob進行訪談—沒錯,就是那位《Clean Code》、《Clean Architecture》、《Clean Agile》等書的作者Robert C. Martin。
上次完成到基本的CRUD及權限控制,後面花了點時間把排序、分頁、圖表總覽的部分做完,其他細節是佈署上線,一般在公司內有專屬的部門處理,僅了解一下流程。
原本的計畫是寫系列文,一天嗑一點,雖然完整影片約17小時,分批消化卻花了我近10天,現在回去看我第一天寫的草稿,編輯時間已經是半年前...。
前年第一次藉公司機會,參加了DevOpsDay的活動。雖然devOps一詞各自表述,大多狀況還是偏向維運會遇到的技術為主,做為平時開發、跟使用者訪談需求的工作內容來說,參加聚會如果沒有一定的知識,對講者所提到的狀況比較難有共鳴...
學習Spring Boot是Java工程師必備技能,文章分享瞭如何自學並快速上手Spring Boot開發,包括架構、開發工具、專案建立以及實作過程。
在過年期間,利用集中時間跟完Mosh Hamedani的Next.js課程,掌握了前端至後端的技術應用。本文分享了學習過程中的收穫與成果,以及對於未來應用的展望。
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
首先要安裝vscode : Visual Studio Code - Code Editing. Redefined 安裝後我們就可以把她打開來,接著去檔案 -> 喜好設定 -> 設定檔(預設) -> 你就會看到設定裡面的 settings.json,就可以開始你的設定拉(主要是依照個人的喜好設定
Thumbnail
Visual Basic for Applications(VBA)是一種功能強大的程式語言,廣泛用於自動化 Microsoft Office 應用程式中的重複性任務。在這篇教學文章中,我們將介紹如何使用 VBA 來新增、刪除和移動檔案。
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
工具功能 (1) 彈性任意查詢檔案,如對來源目錄設定,檔案修改日期 設定,檔名特定字串或副檔名設定後,自動查出明細,並可展開至各階子目錄處理     (2) 依查詢後結果,可產出 LIST ,提供查詢結果之確認,再依此對檔案作複 (3) 可對檔案作移動,複製至別處,刪除處理,使電腦可騰出硬碟空間
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
到存放虛擬機的磁碟處\點選想要註冊的機器\註冊機器(登錄虛擬機器)
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
首先要安裝vscode : Visual Studio Code - Code Editing. Redefined 安裝後我們就可以把她打開來,接著去檔案 -> 喜好設定 -> 設定檔(預設) -> 你就會看到設定裡面的 settings.json,就可以開始你的設定拉(主要是依照個人的喜好設定
Thumbnail
Visual Basic for Applications(VBA)是一種功能強大的程式語言,廣泛用於自動化 Microsoft Office 應用程式中的重複性任務。在這篇教學文章中,我們將介紹如何使用 VBA 來新增、刪除和移動檔案。
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
工具功能 (1) 彈性任意查詢檔案,如對來源目錄設定,檔案修改日期 設定,檔名特定字串或副檔名設定後,自動查出明細,並可展開至各階子目錄處理     (2) 依查詢後結果,可產出 LIST ,提供查詢結果之確認,再依此對檔案作複 (3) 可對檔案作移動,複製至別處,刪除處理,使電腦可騰出硬碟空間
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
到存放虛擬機的磁碟處\點選想要註冊的機器\註冊機器(登錄虛擬機器)