VScode 主题和打字特效配置，让你的VScode活“”起来 [ 二 ]

前言

上一篇文章 【VScode 主题和打字特效配置，让你的VScode活“🔥”起来】得到了大家的喜欢，也提出了一些需求，这篇文章主要是补充对上一篇的一个补充，希望能解决大家的问题，同时也是对VScode配置的一个完善吧。

字体的配置

配置字体其实比较简单，难的是找到一个自己喜欢的字体，尤其当你左挑挑右选选以后发现这个字体不是免费的需要付费的时候你就更郁闷了，这边我找了几个字体，做了一下测试，其中 “FiraCode” 这个字体我觉得还可以吧。

先列出几个我找到的字体：

• cascadia-code
• jetbrains
• Hack
• FiraCode
• Adobe Fonts (这是一个字体集合，里面有很多字体，source-code-pro 相对用的比较多)

字体其实比较多，但通过一番查找和对比感觉程序员使用率比较高的还是 cascadia-code 和 FiraCode 那下面就用他们做一下教程

1、首先下载字体：

下载完以后解压文件，然后打开文件夹直接全选然后打开安装字体

安装完以后会弹出你安装成功以后的字体文件夹

2、配置字体

配置字体有两种方式，其实也可以说就是一种方式

第一种直接修改配置

如图直接吧默认的字体改成你安装好的字体，比如我需要改成 FiraCode

这里需要注意的是这样修改的时候 “FiraCode” 前面一定不要留空格，有了空格设置就失效了，我当初就这样，弄的我重启好几次vscode，最后还是用第二种配置方法才发现前面有个空格。

第二种在配置文件 “settings.json” 中添加配置代码

    "editor.fontFamily": "Fira Code", // 设置的字体类型为：Fira Code
    "editor.fontLigatures": true, // 启用字体连字，true
    "editor.fontSize": 14, // 设置字体大小为14px 
    "editor.fontWeight": "normal", // 这个设置字体粗细 normal: 不加粗, bold： 加粗, 还可以设置：100、200、300、...、900 （最低100 最高900）

正常咱么配置完以后VScode会自动更替新字体，如果没有自动更替可以重启VScode看一下效果。下面咱们看一下修改字体前后的一个对比图

总体给我的感觉就是 “FiraCode” 这个字体相对圆润一些，看起来更舒服。

对于字体就先说这么多，想要什么字体其实在于你有什么字体。

希望大家都能找到自己喜欢的字体。

背景的设置

背景图片的设置相对于字体就比较简单了，咱们只需要借助插件 background 就可以轻松搞定，安装完以后需要重启VScode才能生效

如图就是配置完的效果，当然如果你不喜欢这个背景图的样式也可以自己通过配置文件重新配置一下，我这边我自己做了一个配置分享出来，希望大家喜欢

    "background.enabled": true, //开启background插件
    "background.useDefault": false, // 是否使用默认图片 （这里需要自己设置图片的就把默认的图片关闭 设置为false）
    "background.customImages": [ // 设置图片的路径 可以设置多张图片 对应的是VSCode 的分屏显示的图片 （网上有人说只能设置三张 我试了一下4\5\6\7张也是OK的） 一屏默认显示第一张
        "file:///Users/admin/DATA/lufei.png", // 本地路径
        "file:///Users/admin/DATA/xiaojiejie.png",  // 本地路径
        "https://img1.baidu.com/it/u=863693451,2091096535&fm=26&fmt=auto&gp=0.jpg", // 网上的图片路径
    ],
    "background.styles": [ // 每张图片对应的样式设置
        {
            "background-position": "right", // 以图片的中心点开始自适应
            // "background-repeat": "no-repeat", // 图片不平铺  需要图片平铺设置为 repeat
            "background-size": "auto 110%", // 把图片的宽高设置为等于VScode的宽高 分别是上下和左右两个值 范围 0-100%，auto是自适应的意思
            "opacity": 0.3 // 图片的透明度 （图片太亮影响写代码，可以设置透明度来解决 范围是0-1）
        },
        {
            "background-repeat": "no-repeat",
            "background-size":"40% auto",
            "opacity": 1
        },
        {
            "background-position": "center",
            "background-repeat": "repeat", // 图片不平铺  需要图片平铺设置为 repeat
            "opacity": 0.5 // 图片的透明度 （图片太亮影响写代码，可以设置透明度来解决 范围是0-1）
        },
    ]

一屏的效果图

两屏的效果图

两屏是一个会跟随屏幕大小自动放大缩小的效果

三屏的效果图

三屏是一个平铺的效果，我个人觉得写代码还是不太建议平铺，除非真的有那么一张图片让你爱的那么深沉😄

就这样吧 希望大家喜欢😍

后来补充的

文章发表以后看大家挺喜欢的，这边有更新了一些配置，并且加上了一下配置的图片。非专业设计师，图扣的不好，凑合着用吧 有好图也可以分享给我，非常感谢。获取图片资源

对应的掘金链接：https://juejin.cn/post/7007372938638786567 欢迎到掘金点赞加关注，感谢