предисловие
Запись Лин Дуана на первый Mac ProVscodeКонфигурация темы ссылкиJinkeyОригинальная статья Великого БогаКак настроить прозрачное свечение vscode - Jinkey original. Структура каталогов в этой статье похожа на исходную, но с некоторыми моими собственными представлениями и некоторыми советами по сочетаниям клавиш для новичков, использующих Mac, и как датьVscodeДобавьте фоновое изображение. Права собственности бесценны и поддерживают оригинальность.
What do I want ?
Is this...
1. Установите пользовательские плагины JS и CSS на vscode
Найдите и загрузите следующие плагины на странице расширения vscode.
Custom CSS and JS Loader
2. Установите тему свечения vscode
SynthWave '84
3. Загрузите соответствующий стиль vscode
После выполнения двух вышеуказанных шагов мы можем настроить некоторые стили, чтобы наш vscode выглядел более круто.
Во-первых, выберите каталог файлов на вашем компьютере, чтобы поместить ваши собственные файлы JS и CSS.
Как правило, его можно поместить в папку установки vscode или в папку, которую вы можете найти самостоятельно.
Для удобства настройки я определил папку конфигурации для хранения некоторых файлов конфигурации.
и в конфиге создай файл с именемvscode-transparent-themeпапку, поместите в нее следующие файлы конфигурации.
Профиль напрямую спасибоJinkeyКонфигурация организована Богом, адрес загрузки:GitHub.com/код ключа jin/…Поместите загруженные файлы в соответствующую папку:
Функция каждого файла не будет здесь описываться по отдельности, общая функция заключается в изменении некоторых стилей самого vscode, а также стиля текста кода и т. д.
4. Измените соответствующую конфигурацию vscode
открыть vscodesetting.jsonфайл, этот файл можно найти в левом нижнем углунастраиватьНаходится в , используется для настройки пользовательских свойств пользователя.
setting.jsonсередина:
{
"vscode_custom_css.imports": [
"file:///Users/lindaidai/config/vscode-transparent-theme/vscode-vibrancy-style.css",
"file:///Users/lindaidai/config/vscode-transparent-theme/synthwave84-noglow.css",
"file:///Users/lindaidai/config/vscode-transparent-theme/toolbar.css",
"file:///Users/lindaidai/config/vscode-transparent-theme/terminal.css",
"file:///Users/lindaidai/config/vscode-transparent-theme/enable-electron-vibrancy.js"
],
"vscode_custom_css.policy": true,
"terminal.integrated.rendererType": "dom",
"workbench.colorTheme": "SynthWave '84",
}
file:///Users/lindaidai/config/vscode-transparent-themeЭто абсолютный путь, по которому вы храните эти файлы конфигурации.MacOSПолучите ярлык пути к папке или файлу:
Option+Command+C
Выберите свою папку и используйте указанную выше комбинацию клавиш, путь к папке будет скопирован на монтажный стол.
Вот, например, я/Users/lindaidai/config/vscode-transparent-theme
Не забудьте добавить префикс file://.
если вашsetting.jsonНапример, если есть содержимое конфигурации в Китае, есть конфигурация для установки размера шрифта vscode:
{
"editor.fontSize": 16
}
Затем просто добавьте конфигурацию непосредственно под ним, как показано ниже:
{
"editor.fontSize": 16,
"vscode_custom_css.imports": [...],
...
}
5. Перезагрузите vscode
Сохраните конфигурацию вышеsetting.jsonПосле этого вам нужно перезагрузить vscode, чтобы увидеть эффект.
Нажмите Ctrl + Shift + P (Shift+commoand+P в MacOS), чтобы запустить"Reload Custom CSS and JS", перезапустите vscode. Если появится сообщение о том, что VSCode поврежден, выберите шестеренку в правом верхнем углу и «Больше не запрашивать».
Некоторые компьютеры сообщают, что перезагрузка не удалась, запустите vscode в режиме администратора.
sudo code --user-data-dir="~/.vscode-root"
Окончательный эффект и конфигурация таковы:
editor.tokenColorCustomizationsКонфигурация заключается в том, что цвет шрифта аннотации после того, как я ее вижу, слишком светлый, ее трудно увидеть, поэтому добавляется конфигурация.commentsОн представляет собой цвет шрифта аннотации конфигурации, который можно воспроизвести самостоятельно.
6. Установите фоновый плагин
После выполнения вышеуказанных шагов вы добились эффекта прозрачного свечения вашего vscode.Если вы хотите, чтобы он был более ослепительным, вы хотите добавить к нему фоновое изображение? Установите следующие фоновые плагины
background
divэлемента, а затем настроить стиль фонового изображения для этого элемента.
и пользовательское фоновое изображение, как у меняsetting.jsonКонфигурация:
{
"editor.fontSize": 16,
"editor.tokenColorCustomizations": {
"comments": "#72777b"
},
"vscode_custom_css.imports": [
"file:///Users/lindaidai/config/vscode-transparent-theme/vscode-vibrancy-style.css",
"file:///Users/lindaidai/config/vscode-transparent-theme/synthwave84-noglow.css",
"file:///Users/lindaidai/config/vscode-transparent-theme/toolbar.css",
"file:///Users/lindaidai/config/vscode-transparent-theme/terminal.css",
"file:///Users/lindaidai/config/vscode-transparent-theme/enable-electron-vibrancy.js"
],
"vscode_custom_css.policy": true,
"terminal.integrated.rendererType": "dom",
"workbench.colorTheme": "SynthWave '84",
"material-icon-theme.activeIconPack": "vue",
"background.customImages": [
"file:///Users/lindaidai/config/vscode-background-image/timg3.png"
],
"background.style": {
"content":"''",
"pointer-events":"none",
"position":"absolute",//图片位置
"width":"100%",
"height":"100%",
"z-index":"99999",
"background.repeat":"no-repeat",
"background-size":"25%, 25%",//图片大小
"opacity":0.2 //透明度
},
"background.useFront": true,
"background.useDefault": false //是否使用默认图片
}
background.customImages— это абсолютный путь к вашему пользовательскому фоновому изображению, которое представляет собой массив и поддерживает до 3 фоновых изображений.
Стиль фонового изображения можно найти вbackground.styleв конфигурации.
"editor.tokenColorCustomizations": { "comments": "#72777b" }Эта конфигурация связана с тем, что лично мне кажется, что цвет аннотации немного неясен, поэтому я изменил цвет шрифта аннотации.
окончательный эффект:
постскриптум
Использованная литература:Как настроить прозрачное свечение vscode - Jinkey original