VSCodeの背景画像を設定してテンションを上げる(拡張機能を使用)
目次 [隠す]
本記事の目的
VSCodeのエディタ背景に好きな背景画像があるとテンションが上がるからそうしよう。
※VSCodeサポート対象外の拡張機能を使用します。
試す際は自己責任に於いて行ってください。
環境
OS
- Windows10 + Ubuntu 20.04LTS on WSL2
- Ubuntu 20.04LTS
VSCode
version 1.64.0
実践
拡張機能インストール
VSCodeのエディタ背景は以下のスタイルシートを修正する必要がある。
<path to VScode>\resources\app\out\vs\workbench.desktop.main.css
※「<path to VScode>」の部分は、Windows 10であれば「%USERPROFILE%/AppData/Local/Programs/Microsoft VS Code」、Ubuntu 20.04LTSは「/usr/share/code」
複数の環境でVSCodeを使用している場合、それぞれでこのファイルを修正するのは面倒だ。
この面倒を解決してくれるのがこの拡張機能「background」
background - Visual Studio Marketplace
これをVSCodeにインストールする。
インストールすると、この拡張機能は上述したインストールディレクトリ内のcssファイルに影響するため、下記のポップアップが起動のたびに出る。
歯車アイコンから再表示しないようにすることもできるのでご検討を。
また、冒頭で示したとおりインストールディレクトリ内に変更をおよぼす拡張機能のため、タイトルバーに「サポート対象外」と表示されるようになる。
どうしても気になる場合は、下記拡張機能で消すことが可能なようだ。(試していない)
Fix VSCode Checksums - Visual Studio Marketplace
また、拡張機能の設定を変更するたびに下記ポップアップが表示されるが無視して次へ進む。
settings.jsonを修正
「Ctrl + Shift + p」から「settings.json」を開き、例として以下のように設定してみる。
// 複数定義可、ファイルパスはこんな感じ
// Ubuntu → file:///home/neputa/pictures/ghost-in-the-shell.jpg
// Windows → file:///c:/Users/neputa/Pictures/ghost-in-the-shell.jpg
"background.customImages": [
"file:///home/neputa/pictures/first-picture.jpg",
"file:///home/neputa/pictures/second-picture.jpg",
],
"background.style": {
"content": "''",
"pointer-events": "none",
"position": "absolute",
"width": "100%",
"height": "100%",
"z-index": "99999",
"background-repeat": "no-repeat",
"background-size": "cover",
"opacity": 0.1
},
"background.useFront": false,
"background.useDefault": false,
"background.loop": false,
// customImagesは環境によってパスが異なるため私は同期対象外にしている
"settingsSync.ignoredSettings": [
"background.customImages"
],
各定義の内容は以下の通り
※参考:shalldie/vscode-background - github.com
Name | Type | Description |
---|---|---|
background.enabled |
Boolean |
この拡張機能の有効・無効フラグ |
background.useDefault |
Boolean |
デフォルトで設定される画像の使用有無フラグ |
background.customImages |
Array<String> |
カスタム画像のファイルパス(配列で複数定義可) |
background.style |
Object |
背景画像のスタイル |
background.styles |
Array<Object> |
複数画像使用時の個々のスタイル |
background.useFront |
Boolean |
画像の設置位置(ソースコードの前後)フラグ |
background.loop |
Boolean |
複数の画像パスを指定している場合、ループするかフラグ |
「Ctrl + Shift + p」から「Reload Window」をすると、こんな具合に背景が設定された。
余談だが、私は技術が実現すれば「迷わず全身義体化を希望する派」です。
Ubuntuの場合、追加作業
UbuntuなどのLinuxマシンの場合、VSCodeのインストールディレクトリの権限を変更しないと拡張機能が動作しないので注意。
sudo chown <your_username>/usr/share/code -R
chmod ugo+rwx /usr/share/code
backgroundをアンインストールする際の注意
公式に以下の説明がある。
Set the config {"background.enabled": false} in settings.json, then uninstall the plugin.
shalldie / vscode-background - github.com
settings.jsonで設定した「background.enabled」を「false」にした状態で拡張機能をアンインストールしないと、デフォルトで設定されるこの拡張機能のアイコン画像が背景に設定されたままになってしまうので注意。
さいごに
冒頭にも書いたが、本記事で使用した拡張機能はインストールディレクトリ内に影響がある。
万一問題が起き、VSCodeを再インストールする必要が起こったりすることもありうるので、お仕事で使用している環境だったりする場合は避けた方がよいかもしれない。
Windows Terminalのように、いずれ公式で背景画像が設定できるといい。やっぱ背景あると気分があがるもの。
お役に立ちましたら、この記事をシェアしていただけたりすると泣いて喜びます。
参考サイト
How to change VSCode background - LinuxPip
「VSCode」関連の記事
「Ubuntu 20.04LTS(日本語Remix)」にアプリをインストールする(LibreOffice、VSCode、Joplinなど) | neputa note
先日、購入した中古のノートPCに「Ubuntu 20.04LTS(日本語Remix版)」をインストールした。続けてOS周りの設定作業を行った。今回は必要なアプリケーションをインストールした作業の備忘録
editorconfig for VSCode でコーディングルールを 統一する【C#】 | neputa note
前回記事のStyleCopは、C#や.NETのコーディングスタイルを規定するため、警告を表示してくれるツールでした。今回のeditorconfigは、C#や.NETはもちろん、VSCodeのエディタ全
VSCodeでもStyleCopを使いたい【C#】 | neputa note
VisualStudioでC#を記述する際に「StyleCopAnalyzers(以降StyleCop)」というコード解析ツールを使用しています。チーム開発ではもちろん、個人開発においても整ったコーデ
多階層の要素を一括削除したい【VSCode - Vim】 | neputa note
例えばこんなHTMLコードがあった場合、大外のdivを含む全コードを少ない手数で削除したい。Vimの場合matchit.vim をONにしていれば、Visualモードで開始タグを選択し、終了タグまで「
Comments
0 件のコメント :