ラブライブ!仕様開発環境 Visual Studio Code編

希「なーなー、絵里ち」
絵里「ん、どうしたの希」
希「ウチもちょっとエディタで遊んでみたんよ」

ラブライブ!仕様VisualStudioCode


絵里「Visual Studio Codeね・・・っていやいや、なんで海未なのよ。のぞうみとか大概レアよ」
希「絵里ちに見せたら喜ぶかなー思って選んだんよ。ほら、えりうみは芸術って言うやろ?」
絵里「誰が言ったのよ」
希「ウチや」
絵里「・・・はー」
希「ほのうみは友情、えりうみは芸術、ことうみは人生」
絵里「もういいから」

希「でな、VSCodeって、Atomと違って手のかかる子なんよ」
絵里「単純なユーザースタイルシートみたいなのがあるわけじゃないのね」
希「まあ、最終的にはCSSなんやけどね、エディタ本体のCSSに手を入れずにカスタマイズするのは案外面倒なんや」

希「すでにあるテーマを下敷きにして背景画像差し込む感じでいくで。まずVSCodeのインストールディレクトリにあるテーマを独自テーマ用にコピーしてやる」

C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions

希「多分このあたりにインストールされとるはずや。この中のtheme-で始まる適当なディレクトリを1つ選んで」

C:\Users\<USERNAME>\.vscode\extensions

希「ここへコピーしてやる。もしディレクトリがなかったら掘ればええ。で、適当に名前を変える。theme-umiとかな」

希「さて、今コピーしたテーマをそのまま使ってもええし、この際やから新しいテーマ入れるのもありや」

Colorsublime

希「ここに山ほどあるから選んだらええ。ちなみにさっきの画像は”Afterglow”ってテーマや」
絵里「ずいぶんたくさん・・・って、これSublime textのテーマが使えるってことなのね」
希「そういうことや。さて、ダウンロードすると.tmThemeって拡張子のファイルが落ちてくる。それを、さっきのtheme-umiの中のthemesに入れるんや。ついでに名前もumi.tmThemeにしておこうか」
絵里「元からあるやつは?」
希「消しちゃってええよ。じゃあ、そのテーマファイルを編集しよか」

希「最初の方しか載せてないけど、直すのは2箇所だけ。6行目の名前を変えるのと、13行目の背景色を変える。名前は、よくわからんけどファイル名と合わせておくと無難そうや」
絵里「背景色って・・・RGBの後って、透過?」
希「そうや。透過させないと画像見えへんしな。ここでは99にしてるけど数字はお好みや」

希「さて今theme-umiディレクトリにはJSONファイルが2つ入ってるはずや。OSSREADME.jsonpackage.json
絵里「あるわね。最初にコピーしてきたディレクトリに入ってたのが」
希「OSSREADME.jsonはスルーや。package.jsonを書き換えてやる」

希「直すのはnameと、contributes/themesの下の3つや。とりあえずpathさえ間違えなければ何とかなるで」
絵里「さっきのumi.tmThemeの場所を書けばいいのね」
希「これができたら、自前のテーマはできあがりや。あとは強引やけどVSCode本体のCSSを弄りにいくで」

C:\Program Files (x86)\Microsoft VS Code\resources\app\out\vs\workbench

希「対象のファイルはここにある。workbench.main.cssってやつや」
絵里「UAC有効だとそのまま編集できないところね・・・」
希「別のところにコピーして編集して戻す、ってやらんとだめやね」

希「中身は圧縮されとるから、読むのは諦めて最後にこれを書き足せば大丈夫や」

希「画像はこのCSSと同じディレクトリに置いてやる。調達は自前でな」
絵里「希はいかがわしいのいっぱい持ってそうよね・・・」
希「いつだかの取材の時だって、ちゃんと事前に取材するって言ったやん。いつどこで撮るとは言ってないけど」
絵里「いやそういうのが問題なのよ」

希「CSSのクラス名のvscode-theme-umi-themes-umi-tmThemeみたいなやつは、ディレクトリの階層とファイル名を反映してる、と思う」
絵里「theme-umi\themes\umi.tmThemeだからそうなるわけね」

希「これで完成や。面倒やろ?」
絵里「そうね・・・」
希「まあVSCodeもまだ新しいエディタやし、そのうちちゃんとした編集機能が付くかもね」


希「ウチ、VSCodeをメインエディタにしてみようと思ってるん」
絵里「あら、結局のぞうみでいくの?」
希「そんなん決まってるやろ?画像は絵里ちに差し替えるって」
絵里「・・・ばか」


LINEで送る
Pocket


返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です