? ? 寫前端代碼時(shí)，用過webstorm,sublime,vscode,最終還是選擇了vscode，主要原因是（好看）簡潔的編程環(huán)境，豐富的插件功能，活躍的社區(qū)。不過無論是哪一個(gè)編輯器，長時(shí)間看著黑色/白色的背景難免單調(diào)，喜歡折騰（不專心寫代碼）的我開始想著給vscode換個(gè)背景，百度了一下，還真有人寫了這樣的一個(gè)插件--background。

? ? 閑話少敘，開搞。

1.安裝并正常工作

這一步很簡單，直接在拓展界面搜background就行。

就是圖上這個(gè)了

????安裝完成后，重啟vscode，進(jìn)入U(xiǎn)ser Settings用戶設(shè)置，在搜索框中打background，應(yīng)該就能看到這樣的設(shè)置了。

以上就是background插件的全部自定義設(shè)置了

? ? 一般來說，這時(shí)候插件就正常工作了。效果如下：

抱歉，這里偷懶直接了別人的圖

沒正常工作的關(guān)掉vscode,右鍵以管理員身份運(yùn)行。這個(gè)在作者的插件說明里也有。

????實(shí)際上vscode的內(nèi)核是chromium，chrome的先行版。因此vscode里面的顯示實(shí)際上是網(wǎng)頁的模式。因此可以從這里出發(fā)來給vscode加背景。實(shí)際上background是通過修改vscode的css文件來運(yùn)行的,所以要當(dāng)設(shè)置變動(dòng)要管理員身份運(yùn)行才有效果。

2.選自己的圖片

? ? 這個(gè)也許是最難的，畢竟每個(gè)的審美不一樣。這里筆者用的是這一張。

不要吐槽筆者的審美。。。

實(shí)際上即使給vscode加了背景，vscode也是用來編程的，還是推薦大家使用簡單一點(diǎn)的圖片，不然容易看不清代碼???。

?找好后。進(jìn)行如下修改：

"background.useDefault": false? ? ? //是否使用默認(rèn)圖片，改成false，不默認(rèn)，我們要設(shè)置自己的！

"background.customImages": ["file:///D:example/../example.jpg"]? ? //設(shè)置自己的圖片位置。

最后就是background.style了，大家看著設(shè)置就好了，這里是CSS語法?；静挥酶?。可能需要設(shè)置的是? ? "opacity": 1? ? ?//透明度。

附上筆者的效果圖：

自我感覺良好，哈哈哈???

? ? 自此大功告成，可以安心（欣賞壁紙）寫代碼了。