前言
本文參考的是Jinkey大神的原創(chuàng)文章如何配置透明發(fā)光的騷氣 vscode —— Jinkey 原創(chuàng)。本文中目錄結(jié)構(gòu)與原創(chuàng)中大同小異，但加上了一些自己的理解和新手用Mac的一些快捷鍵提示，以及如何給Vscode 加上背景圖片。產(chǎn)權(quán)無價，支持原創(chuàng)。
What do I want ?
Is this...
This is too cool !??
1. 在vscode上安裝自定義JS和CSS的插件
在vscode的擴(kuò)展頁面搜索下載以下插件
Custom CSS and JS Loader
2. 安裝vscode發(fā)光主題
SynthWave '84
3. 下載相關(guān)的vscode樣式
完成上述兩個步驟之后，我們可以自定義一些樣式使我們的vscode看上去更加酷炫。
首先要在你電腦的本地上選擇一個文件目錄用來放你的自定義JS和CSS文件。
一般可以就放在vscode的安裝文件夾下，或者自己找得到的文件夾下。
我這里為了配置方便，定義了一個config文件夾專門存放一些配置文件。
并在config中創(chuàng)建一個名為vscode-transparent-theme的文件夾，將以下配置文件放入其中。
配置文件直接要感謝Jinkey大神整理好的配置，下載地址:https://github.com/Jinkeycode/vscode-transparent-glow
將下載下來的文件放入相應(yīng)的文件夾下：
各個文件的作用這里就不一一做介紹了，大概的作用就是能改變vscode本身的一些樣式，以及代碼文字的樣式等等...
4. 修改vscode的相關(guān)配置
打開vscode的setting.json文件，這個文件可以在左下角的設(shè)置中找到，用來配置用戶的自定義屬性。
打開之后，將以下內(nèi)容全部復(fù)制到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
選中你的文件夾然后使用上面的快捷鍵，文件夾的路徑就復(fù)制到了你的粘貼板上了。
例如我這里就是/Users/lindaidai/config/vscode-transparent-theme
file:// 這個前綴記得加上。
若是你的setting.json中原本就有配置內(nèi)容的話，比如有設(shè)置vscode字體大小的配置：
{
"editor.fontSize": 16
}
那就直接在它下面加上配置就行了，如下：
{
"editor.fontSize": 16,
"vscode_custom_css.imports": [...],
...
}
5. 重新加載vscode
配置保存好上面的setting.json之后，需要重新加載vscode才能看到效果。
按下 Ctrl + Shift + P(MacOS下為Shift+commoand+P)，運(yùn)行 "Reload Custom CSS and JS", 重啟 vscode 即可。如果提示VSCode 已經(jīng)損壞，選擇右上角齒輪“不再提示”即可。
部分電腦提示 reload 失敗的，請以管理員模式運(yùn)動 vscode
sudo code --user-data-dir="~/.vscode-root"
最終看到的效果和配置就是這樣：
editor.tokenColorCustomizations那個配置是我看成功之后注釋的字體顏色太淡了，很難看清，所以加的配置。comments代表的就是配置注釋的字體顏色，這個可以自己發(fā)揮。
6. 安裝背景插件
完成上面的步驟就已經(jīng)實(shí)現(xiàn)了你的vscode透明發(fā)光的效果了，要是還想再炫一點(diǎn)的話，要不給它加個背景圖？
安裝以下背景插件
background
安裝成功之后重新加載vscode就可以看到右下角有一個默認(rèn)的背景圖片。
當(dāng)然你也可以把vscode整體想象成一個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 //是否使用默認(rèn)圖片
}
background.customImages 就是你自定義背景圖片的絕對路徑，它是一個數(shù)組，最多支持3張背景圖片。
背景圖片的樣式可以在background.style中配置。
最終效果：
注意
以上教程是基于 MacOS 的；Windows 的electron暫不支持vibrancy模式，可以使用插件 GlassIt-VSC 設(shè)置透明。
