1. 首页
  2. 工具类
  3. Visual Studio Code

如何配置透明发光的骚气 vscode

1 安装自定义 JS 和 CSS 插件

插件截图

2 安装发光主题

插件截图

3 添加样式配置文件

在 VSCode 安装目录(自己随便选择一个文件夹也可以),放入以下文件。 为了方便下载,文件整理到了 Github-Jinkeycode/vscode-transparent-glow,欢迎 star。

enable-electron-vibrancy.js 开启 electron 透明支持

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区,你想要的,在这里都能找到

如何配置透明发光的骚气 vscode

vscode-vibrancy-style.css

如何配置透明发光的骚气 vscode

synthwave84.css 文字发光样式,样式请在 Github 获取。如果要不发光的,可以使用 synthwave84-noglow.css。可以 watch github.com/robb0wen/sy… 保持更新通知。

toolbar.css 引入以上大神的样式配置之后,左边导航栏有部分标题还是未透明状态,我自己修改了配置,引入即可。

如何配置透明发光的骚气 vscode

terminal.css 使 vscode 内置的终端透明

如何配置透明发光的骚气 vscode

终端光标颜色修改,由@manonloki 提供


.panel.integrated-terminal .xterm-cursor, .xterm-cursor-block { background: rgb(210, 0, 252) !important; }

4 修改 VSCode 配置文件

如何配置透明发光的骚气 vscode

点击上图 在 setting.json 中编辑,打开后加入配置(不需要大括号,直接把 key-value 加入原有 json 即可):

setting.json

5 重加载

按下 Ctrl + Shift + P,运行 “Reload Custom CSS and JS”, 重启 vscode 即可。如果提示VSCode 已经损坏,选择右上角齿轮“不再提示”即可。

部分电脑提示 reload 失败的,请以管理员模式运动 vscode


sudo code --user-data-dir="~/.vscode-root"

6 总结

成品效果如图,不懂的可以加小助手微信 udujjb 拉你进群询问

如何配置透明发光的骚气 vscode

以上教程是基于 MacOS 的,Linux 用户如何开启透明请参考;Windows 的electron暂不支持vibrancy模式,可以使用插件 GlassIt-VSC 设置透明。

Custom CSS and JS Loader 配置

Linux 透明窗口

Windows 只能透明 + 发光

一、安装插件:

1.SynthWave ’84

2.Custom CSS and JS

3.GlassIt-VSC

二、下载配置文件(两个方法二选一):

1.git命令安装 git clone github.com/Jinkeycode/…

2.浏览器访问 codeload.github.com/Jinkeycode/…

三、修改vscode的配置文件setting.json(在setting.json文件中加入下面代码):

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区,你想要的,在这里都能找到


"vscode_custom_css.imports":[ "file:///C:/Users/Administrator/AppData/Roaming/Code/User/vscode-transparent-glow-master/synthwave84.css", ]

“……………/Code/User/vscode-transparent-glow-master/”这个替换成你步骤二中下载到的文件所在位置

四、使配置生效 按下 Ctrl + Shift + P,运行 “Reload Custom CSS and JS”, 重启 vscode 即可。

原文链接:https://jinkey.ai/post/tech/ru-he-pei-zhi-tou-ming-fa-guang-de-sao-qi-vscode

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文来源于网络,其版权属原作者所有,如有侵权,请与小编联系,谢谢!

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:如何配置透明发光的骚气 vscode

链接:https://www.javascriptc.com/2044.html

原文链接:https://juejin.im/post/5cdbe78cf265da034d2a3910

« 写给前端开发者不一样的VSCode配置(JS/React)
能让你开发效率翻倍的 VSCode 插件配置(中)»

相关推荐

QR code