1 安裝自定義 JS 和 CSS 插件

2 安裝發(fā)光主題

3 添加樣式配置文件

在 VSCode 安裝目錄(自己隨便選擇一個(gè)文件夾也可以)，放入以下文件。 為了方便下載，文件整理到了 Github-Jinkeycode/vscode-transparent-glow，歡迎 star。

enable-electron-vibrancy.js 開(kāi)啟 electron 透明支持

Js中文網(wǎng) – 前端進(jìn)階資源教程 www.javascriptC.com,typescript 中文文檔

一個(gè)幫助開(kāi)發(fā)者成長(zhǎng)的社區(qū)，你想要的，在這里都能找到

vscode-vibrancy-style.css

synthwave84.css 文字發(fā)光樣式，樣式請(qǐng)?jiān)?Github 獲取。如果要不發(fā)光的，可以使用 synthwave84-noglow.css。可以 watch github.com/robb0wen/sy… 保持更新通知。

toolbar.css 引入以上大神的樣式配置之后，左邊導(dǎo)航欄有部分標(biāo)題還是未透明狀態(tài)，我自己修改了配置，引入即可。

terminal.css 使 vscode 內(nèi)置的終端透明

終端光標(biāo)顏色修改，由@manonloki 提供

4 修改 VSCode 配置文件

點(diǎn)擊上圖 在 setting.json 中編輯，打開(kāi)后加入配置(不需要大括號(hào)，直接把 key-value 加入原有 json 即可)：

5 重加載

按下 Ctrl + Shift + P，運(yùn)行 “Reload Custom CSS and JS”, 重啟 vscode 即可。如果提示VSCode 已經(jīng)損壞，選擇右上角齒輪“不再提示”即可。

部分電腦提示 reload 失敗的，請(qǐng)以管理員模式運(yùn)動(dòng) vscode

6 總結(jié)

成品效果如圖，不懂的可以加小助手微信 udujjb 拉你進(jìn)群詢問(wèn)

以上教程是基于 MacOS 的，Linux 用戶如何開(kāi)啟透明請(qǐng)參考；Windows 的electron暫不支持vibrancy模式，可以使用插件 GlassIt-VSC 設(shè)置透明。

Windows 只能透明 + 發(fā)光

一、安裝插件：

1.SynthWave ’84

2.Custom CSS and JS

3.GlassIt-VSC

二、下載配置文件(兩個(gè)方法二選一)：

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

Js中文網(wǎng) – 前端進(jìn)階資源教程 www.javascriptC.com,typescript 中文文檔

一個(gè)幫助開(kāi)發(fā)者成長(zhǎng)的社區(qū)，你想要的，在這里都能找到

“……………/Code/User/vscode-transparent-glow-master/”這個(gè)替換成你步驟二中下載到的文件所在位置

四、使配置生效 按下 Ctrl + Shift + P，運(yùn)行 “Reload Custom CSS and JS”, 重啟 vscode 即可。

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

原文標(biāo)題：如何配置透明發(fā)光的騷氣 vscode - Js中文網(wǎng) · 前端進(jìn)階資源教程

總結(jié)

以上是生活随笔為你收集整理的js增加透明css样式,如何配置透明发光的骚气 vscode的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。