定制VSCode界面

Posted on

个人觉得颜值最高的一款编辑器，没有之一。

一、字体美化

“Fira Code”–为编程而生

在我们写代码的时候，经常会用到 ->、=>、::、>=、.= 等超过一个字符的操作符，但是这个操作符其实在现实生活中，很多都有与之对应的数学符号，只是因为不能通过常规的方式输入而选择用多个字符代表一个操作符。而 Fira Code 包含一组用于常见编程多字符组合的连字，它通过渲染，将我们输入的多个字符变为更有意义的数学符号，这有助于更快地阅读和理解代码。

下载地址

GitHub下载地址

字体安装

下载完成后，打开根目录下distr文件夹，选择其中otf文件夹的五个otf文件直接安装即可。

用户配置

1
2
3
4
"editor.fontFamily": " 'Fira Code' ,'Source Han Sans CN'", //设置的字体类型为 Fira Code
"editor.fontLigatures": true, //这个控制是否启用字体连字，true启用，false不启用
"editor.fontSize": 18, //设置字体大小
"editor.fontWeight": "normal"

效果预览

Markdown

二、背景美化

background–DIY个性主题

允许VSCode使用喜欢的本地图片作为背景。

下载安装

GitHub下载地址

VSCode Market下载地址

这里推荐直接在“扩展”中搜索”background”安装。

用户配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"background.customImages": [
    "file:///I:/Pictures/wlop/bg1.jpg" //添加自己喜欢图片的路径
],
"background.style": {
    "content": "''",
    "pointer-events": "none",
    "position": "absolute", //图片位置
    "width": "100%",
    "height": "100%",
    "z-index": "99999",
    "background.repeat": "no-repeat",
    "background-size": "100%,100%", //图片大小
    "opacity": 0.2 //透明度
},
"background.useFront": true,
"background.useDefault": false, //是否使用默认图片

效果预览

Markdown

三、主题美化

VSCode在扩展中提供了足够的主题插件。个人有个人的爱好，选择自己认为好看的就行了。

这里用的是One Dark Pro颜色主题和VSCode Icons图标主题。

Markdown