首先是學會調整字體和字體大小
換成你看着舒服的字體和字體大小,當然,通常情況下默認的就很好看,但每個人的顯示屏參數不同顯示起來的效果因人而異,如果你有更好的方案不妨設置一下
Consolas在windows下是一款很好看的字體
同時兩款值得推薦的字體是 Source Code Pro和Fira Code
下面是我的淺色主題和深色主題
深色
淺色
暖色調:
好不好看都是根據個人審美而定可能某些地方不符合你的想法我們可以手動修正
但全新制作是很費事的我們可以先找到一個大體符合自己心意的主題
比如我的設計的主題基礎部分是Github和Monokai和Solarized Light
修改配色必須修改json文件
從插件商店下載的主題插件的存放路徑是
C:\Users\%username%\.vscode\extensions
下對應的文件夾
默認自帶的主題插件的存放路徑是
C:\Users\%username%\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions
路徑下對應的文件夾
為了使得主題不被vscode或者插件更新而回復原樣,我們需要創建自己的主題插件
在C:\Users\%username%\.vscode\extensions路徑下創建一個文件命名為合理的名字
創建一個能讓vscode識別到的插件需要有一個package.json
為了能讓你的vscode的插件管理能識別到你自定義的插件,需要有一個package.nls.json文件
以及一個用來存放配色的文件夾themes
首先編寫package.json
{ "name": "theme-tangming", "displayName": "%displayName%", "description": "%description%", "version": "1.0.0", "publisher": "tangming", "engines": { "vscode": "*" }, "contributes": { "themes": [ { "label": "Tangming Dark", "uiTheme": "vs-dark", "path": "./themes/tangming-dark.json" }, { "label": "Tangming Light", "uiTheme": "vs", "path": "./themes/tangming-light.json" } ] } }
其中,你需要修改的部分或者不修改但必須有的部分
name(插件的名字)
publisher(插件作者)
themes下的 label (主題顯示的名字)
必須保證正確的東西
themes選項中的uiTheme(深色或是淺色主題,vs和vs-dark兩種分別對應淺色和深色,其實還有一個丑爆的高對比度)
themes選項中的path(主題json文件的路徑,一般用相對路徑,可以之后再糾正)
剩余選項的影響幾乎可以忽視
同時,themes是一個主題列表,列表的每項對應一個主題,我的配置文件中就有兩個主題,一個淺色一個深色
現在可以在之前心儀的主題的基礎上進行修改
先將基礎主題的json文件找到復制進我們剛剛創建的themes文件夾
順便改一個名字,當然也可以不改
然后將package.json中themes中對應主題的path路徑訂正為對應的themes文件夾下對應文件的路徑名
然后用vscode打開json文件
會看到密密麻麻的列表文件
半截是描述的頁面的配色
另外半截是描述的代碼配色
頁面相應的部分鼠標移動到那里會顯示注解,出現英文的注釋的話你需要安裝一個chinese插件
首先確定主題為深色還是淺色主題然后在package.json的uiTheme處填vs(淺色)或者vs-dark(深色),或者是高對比度丑出新高度?
在package.json內選擇的uiTheme填入的vs 和 vs-dark會給全部可定制部分帶來一個默認配色
也就是說我們這里的修改,類似於是在默認的基礎上進行覆蓋
同時也會有一個問題
可能有的屬性原作者未曾修改,然后代碼里沒有出現,比如Monokai這個主題里面就沒有活動標簽頁
修改 "titleBar.activeBackground" 屬性
定制頁面的大體流程就是這樣
然后是定制代碼樣式
一般通過定制的基本屬性有顏色,加粗,傾斜,下划線
類似於上圖
name是起給自己看的名字
scope是settings作用的范圍
settings是要自定義的內容
fontstyle控制加粗(bold)傾斜(italic)下划線(underline),可以多選
fontground是字體顏色
類似於
可以追加
比如
{ "name": "A", "scope": "support.type, support.class", "settings": { "fontStyle": "italic", } }, { "name": "B", "scope": "support.type, support.class", "settings": { "fontStyle": "bold", } }
一切修改好后重啟vscode,點擊首選項和主題
如果出現了自定義的主題,那么就表示能使用這個主題了
最后再填寫package.nls.json
修改displayName(顯示的插件名字)
{ "displayName": "tangming Theme", "description": "tangming theme for Visual Studio Code" }
再次重啟
然后點擊插件,如果能看到我們剛剛定制的插件的話,就表示大功告成了
你也可以把自己的主題通過vsce打包然后在marketplace發布到應用商店里然后以后就能像我一樣直接在應用商店下載到
或者備份到自己的github上在有需要時拷貝到插件存放位置
當然你如果喜歡我的配色你可以直接去插件商店下載我的主題插件 tangming-Themes