предисловие

Предыдущая статья 【Тема VScode и конфигурация эффекта ввода, сделайте ваш VScode живым "🔥"] Она всем понравилась, а также были выдвинуты некоторые требования. Эта статья в основном является дополнением к предыдущей. Надеюсь, она сможет решить все проблемы, а также является совершенством для конфигурации VScode.

конфигурация шрифта

Настройка шрифтов на самом деле относительно проста, но найти понравившийся шрифт сложно, особенно когда обнаруживаешь, что шрифт платный и за него нужно платить, выбирая слева направо, еще больше впадаешь в депрессию. нашел несколько шрифтов, провел тест, и я думаю, что шрифт «FiraCode» подходит.

Сначала перечислите несколько шрифтов, которые я нашел:

• cascadia-code
• jetbrains
• Hack
• FiraCode
• Adobe Fonts(Это коллекция шрифтов со многими шрифтами,source-code-proОтносительно использовал больше)

На самом деле шрифтов много, но после некоторого поиска и сравнения я чувствую, что программисты имеют относительно высокий уровень использования. cascadia-codeа такжеFiraCodeЗатем используйте их в качестве учебника

1. Сначала загрузите шрифт:

После загрузки Unzip файла, а затем откройте папку, а затем откройте установку напрямую выберите все шрифты

После завершения установки появится папка со шрифтами после успешной установки.

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）
        },
    ]

Рендеринг на одном экране

Два рендера экрана
Два экрана — это эффект, который автоматически увеличивает и уменьшает масштаб в зависимости от размера экрана.

Рендеринг на трех экранах
Три экрана — это эффект тайлинга, я лично считаю, что тайлинг не рекомендуется для написания кода, если только нет действительно такой картинки, которую вы так сильно любите😄

Вот и все, надеюсь вам понравилось 😍

добавлено позже

После публикации статьи она всем понравилась, здесь обновлены некоторые конфигурации, добавлено изображение конфигурации. Непрофессиональный дизайнер, пряжка с изображением не очень хорошая, просто смиритесь с этим.Если у вас есть хорошая картинка, вы можете поделиться ею со мной, большое спасибо.Получить ресурсы изображения