vscode更换主题的插件_vscode美化方法以及定制主题插件

1920*1080分辨率的用户,安装好vscode的第一件事情

将字体大小调整为15,可能是微软那一帮子工程师人手一个suface吧,那货就没有分辨率<=1k的

默认字体大小为14屏幕显示起来会显得模糊

下面展示我的浅色主题和深色主题

深色

浅色

其实没什么万能的方法可言

好不好看都是根据个人审美而定

想拥有一个让自己满意的主题只能自己修改

先找到一个大体符合自己心意的主题

我的两个修改好的主题基础部分是Github和Monokai

修改配色必须修改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(插件的名字)

displayName(插件在vscode中显示的名字)

publisher(插件作者)

themes下的 label (主题显示的名字)

必须保持正确的东西

themes选项中的uiTheme(深色或是浅色主题,只有vs和vs-dark两种选择分别对应浅色和深色)

themes选项中的path(主题json文件的路径,一般用相对路径,可以之后再纠正)

剩余选项的影响几乎可以忽视

同时,themes是一个主题列表,列表的每项对应一个主题,我的配置文件中就有两个主题,一个浅色一个深色

现在可以在之前心仪的主题的基础上进行修改

先将基础主题的json文件找到复制进我们刚刚创建的themes文件夹

顺便改一个名字,当然也可以不改

然后将package.json中themes中对应主题的path路径订正为对应的themes文件夹下对应文件的路径名

然后用vscode打开文件

会看到密密麻麻的列表文件

前半截是描述的页面的配色

后半截是描述的代码配色

页面相应的部分鼠标移动到那里会显示注解,出现英文的注释的话你需要安装一个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,点击首选项和主题

如果出现了自定义的主题,那么就表示能使用这个主题了

然后点击插件,如果能看到我们刚刚定制的插件的话,就表示大功告成了

原文：https://www.cnblogs.com/TAMING/p/9766377.html