你的vscode本能夠這麼炫

前言

記錄霖呆呆第一臺 Mac Pro上Vscode的主題配置，參考的是Jinkey大神的原創文章如何配置透明發光的騷氣 vscode —— Jinkey 原創。本文中目錄結構與原創中大同小異，但加上了一些本身的理解和新手用Mac的一些快捷鍵提示，以及如何給Vscode 加上背景圖片。產權無價，支持原創。

What do I want ?

Is this...

This is too cool ! 🙊

1. 在vscode上安裝自定義JS和CSS的插件

在vscode的擴展頁面搜索下載如下插件

Custom CSS and JS Loader

2. 安裝vscode發光主題

SynthWave '84

3. 下載相關的vscode樣式

完成上述兩個步驟以後，咱們能夠自定義一些樣式使咱們的vscode看上去更加酷炫。

首先要在你電腦的本地上選擇一個文件目錄用來放你的自定義JS和CSS文件。

通常能夠就放在vscode的安裝文件夾下，或者本身找獲得的文件夾下。

我這裏爲了配置方便，定義了一個config文件夾專門存放一些配置文件。

並在config中建立一個名爲vscode-transparent-theme的文件夾，將如下配置文件放入其中。

配置文件直接要感謝Jinkey大神整理好的配置，下載地址:github.com/Jinkeycode/… 將下載下來的文件放入相應的文件夾下：

各個文件的做用這裏就不一一作介紹了，大概的做用就是能改變vscode自己的一些樣式，以及代碼文字的樣式等等...

4. 修改vscode的相關配置

打開vscode的setting.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(MacOS下爲Shift+commoand+P)，運行 "Reload Custom CSS and JS", 重啓 vscode 便可。若是提示VSCode 已經損壞，選擇右上角齒輪「再也不提示」便可。 部分電腦提示 reload 失敗的，請以管理員模式運動 vscode

sudo code --user-data-dir="~/.vscode-root"
複製代碼

最終看到的效果和配置就是這樣：

editor.tokenColorCustomizations那個配置是我當作功以後註釋的字體顏色太淡了，很難看清，因此加的配置。comments表明的就是配置註釋的字體顏色，這個能夠本身發揮。

6. 安裝背景插件

完成上面的步驟就已經實現了你的vscode透明發光的效果了，要是還想再炫一點的話，要不給它加個背景圖？ 安裝如下背景插件

background

安裝成功以後從新加載vscode就能夠看到右下角有一個默認的背景圖片。 固然你也能夠把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 //是否使用默認圖片
}
複製代碼

background.customImages 就是你自定義背景圖片的絕對路徑，它是一個數組，最多支持3張背景圖片。 背景圖片的樣式能夠在background.style中配置。

"editor.tokenColorCustomizations": { "comments": "#72777b" } 這項配置是我的以爲註釋的顏色有點淺看不清，因此修改了一下注釋字體的顏色。

最終效果：

後記

參考資料： 如何配置透明發光的騷氣 vscode —— Jinkey 原創