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