LoginSignup
29
19

More than 3 years have passed since last update.

VSCodeとターミナルに背景画像を加えたらプログラミングがちょっと楽しくなるよ

Last updated at Posted at 2019-11-15

初投稿です。

突然ですが、こちらのエディター(VSCode)、ターミナルをご覧ください。
まずVSCode。
スクリーンショット 2019-11-15 13.09.20.png
これはターミナルさん。
スクリーンショット 2019-11-15 13.13.06.png
最近このようにカスタマイズしてから、エディター開く時間が倍になりました。
つまり

なんかエディター好んで開きたくなる→コーディングに向き合う時間UP→スキルアップ

という壮大な仕掛けなのです。

画像をとにかく表示するだけの説明、それだけなのでシンプルにいきます

VSCodeにbackground-cover導入

まずは拡張機能を入れましょう。
background-coverで検索
スクリーンショット 2019-11-15 13.24.26.png

そしたら、vscodeの右下にこんなマーク出てますよね?これをクリックします。
スクリーンショット 2019-11-15 13.30.05.png
そのあと、
Select picture
を選択します。
スクリーンショット 2019-11-15 13.43.58.png
そのあとは、
Manual selection

スクリーンショット 2019-11-15 13.47.01.png
すると、画像選択になるので、よしななものをお選びください。
スクリーンショット 2019-11-15 13.47.24.png
ちなみに自動でいい感じに暗く半透明にしてくれるので、画像加工いりません
明るめの画像でおけ。

さあこれでいけたはず。
vscodeを再起動して確認してください。

setting.jsonを見てみると...

コードが追記されていますね。
スクリーンショット 2019-11-15 13.48.04.png

さあ次はターミナルですよ。

ターミナルに背景画像導入する

まず僕のターミナルはテーマにiceberg入れてますが、vscodeと違いターミナルはデフォルトでも背景画像を設定できます。

【iceberg参考記事は以下】
気分転換にTerminal.appの配色を変えてみる?暗青系のテーマ「Iceberg」を移植しました

ターミナル→環境設定
スクリーンショット 2019-11-15 14.07.31.png
そしたらこんな画面になるので、
スクリーンショット 2019-11-15 14.09.22.png
イメージをパパパってやって、終わり!閉廷!

明るすぎ問題

ちなみに、普通に画像を適用するとこうなります。
スクリーンショット 2019-11-15 14.14.28.png
「何も見えへんやんけ!」

落ち着いてほしい。
暗めの画像を各自用意してくれ。

そしたらさ、ほら。
スクリーンショット 2019-11-15 14.16.30.png
どうだ、暗くなったろう?

fun is God. fun is Everything.

プログラミング初心者こそ、まず形から入るのも悪くないと思ってます。

どれぐらいプログラミングと向き合えるか、その時間がプログラミング力に直結する中で、自然とエディターに向き合う活力をくれるこのカスタマイズは、ただの「背景画像変更機能」じゃない。

これはあなたの「未来を変える」ものだ

*ちなみに僕はごちうさ未視聴勢です

2020/08/25追記

その後ターミナルをiTerm2にしましたが、初期の真っ黒い画面に耐えきれず、背景画像を設定しなおしました。
もはや逃れられぬ...
スクリーンショット 2020-08-25 22.41.23.jpg

29
19
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29
19