vscode美化方法以及定製主題插件

 

首先是學會調整字體和字體大小

換成你看着舒服的字體和字體大小,固然,一般狀況下默認的就很好看,但每一個人的顯示屏參數不一樣顯示起來的效果因人而異,若是你有更好的方案不妨設置一下

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這個主題裏面就沒有活動標籤頁

"editorIndentGuide.activeBackground"

這個時候就只能本身去查手冊或者是在別的代碼裏經過名字辨別或者經過關鍵字補全找到而後再添加進去

若是要修改某一部分的顏色

好比要修改標題框的顏色

修改 "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