如何配置透明发光的骚气 VSCode —— Jinkey 原创

1 安装自定义 JS 和 CSS 插件

2 安装发光主题

3 添加样式配置文件

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

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

vscode-vibrancy-style.css这里使用  @孤狼[3] 大佬提供的样式

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

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

4 修改 VSCode 配置文件

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

5 重加载

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

6 总结

成品效果如图,不懂的可以添加小助手微信号 udujjb,拉你进群交流

以上教程是基于 MacOS 的,Linux 用户如何开启透明请参考,Windows 的electron暂不支持vibrancy模式。 Custom CSS and JS Loader 配置[4]  Linux 透明窗口[5]

References

[1]Github-Jinkeycode: https://github.com/Jinkeycode_`[2]`vscode-transparent-glow:  _https://github.com/Jinkeycode/vscode-transparent-glow_`[3]`@孤狼: _https://blog.evolify.cn/[4]Custom CSS and JS Loader 配置: https://github.com/be5invis/vscode-custom-css#getting-started[5]Linux 透明窗口: https://github.com/sergei-dyshel/vscode/blob/master/README.fork.md

原文链接:mp.weixin.qq.com

上一篇:造轮子 - EGGJS的MySQL操作库
下一篇:vue.js中vue.config.js的配置说明(如:端口号、proxy...)

相关推荐

  • 高效使用VSCode的9点建议

    译者按: 充分利用其特性,你会觉得 VSCode 非常强大! 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。 在开源 IDE 市场,最近几年 Visual St...

    1 年前
  • 那些你应该考虑卸载的 VSCode 扩展

    这篇文章可能会得罪一部分 VSCode 扩展的作者,但是我实在是看不惯网上很多的文章还在推荐一些已经过时的扩展,我觉得作为 VSCode 的老粉,我有必要写一篇文章科普一下。

    2 个月前
  • 记 vscode 搭建 Typescript+React+Dva 开发环境

    作为2018年前端最应该学的技术 , Typescript 确实惹火, 这两天崩崩也是自学了一下 ts. 并且配置了一个简单的基于 DvaReactTypescriptTslint 的环境, 由于...

    2 年前
  • 解决vscode 开发react 导入绝对路径 无法跳转的问题

    相对路径可正常跳转 但是在webpack配置alias使用绝对路径后无法跳转 webpack配置: // 文件导入 解决办法: 需要添加一个jsconfig文件,如下: 参考...

    1 年前
  • 自制一个自动导入( auto import )的vscode插件

    遇到的问题 使用vue时,每次导入组件都十分的麻烦,得先写明组件标签,然后在script标签中import导入,在components中显式声明。。。遇到这种劳动重复性问题时,我都会想是否能用脚本...

    1 年前
  • 编辑器VSCode使用心得

    工欲善其事必先利其器,趁手的工具会使我们开发事半功倍。 市面上的编辑器我用过许多, 编辑器使用经历 Notepad,(开源)这个应该是最轻量级的吧,查看代码还好,编辑代码就算了 官网地址:htt...

    1 年前
  • 用vscode开发vue应用

    现在用VSCode(https://code.visualstudio.com/)开发Vue.js(https://cn.vuejs.org/index.html)应用几乎已经是前端的标配了,但很多时...

    1 年前
  • 最新vscode+eslint 自动格式化vue 配置

    新装的vscode以前的配置不能用了,经过一番折腾,这个配置可以使用 ...

    22 天前
  • 更友好的管理VSCODE代码片断

    写在前面 对于我这种严格依赖 VSCODE 的人来说,会更努力的寻找释放生产力的方式,而代码片断是我日常最常用的功能之一。 从官网的 Creating your own snippets(htt...

    1 年前
  • 提高 JavaScript 开发效率的高级 VSCode 扩展!

    Quokka.js Quokka.js(https://quokkajs.com/docs/) 是一个用于 JavaScript 和 TypeScript 的实时运行代码平台。

    1 年前

官方社区

扫码加入 JavaScript 社区