mixiユーザー(id:468835)

Javascript の設定が無効になっているため、一部の機能を利用できません。

詳細はヘルプをご覧ください。

2020年03月23日01:28

344 view

Visual Studio Code　配布配色テーマは使わずに自分色に染め上げる！

全部で5日かかったゾ＼(＾O＾)／

カスタマイズが簡単？！
どこが？！

sublimeに比べたら、ってこと？

初めてやるには、全然簡単じゃなかったわ！ヽ（｀Д´）ノ

すんごい苦労したんで、未来の忘れたころの自分のためにやりかたを残しておこうと思う＾＾；

どうしても昔のDWが忘れられなくて、できるだけその配色に近づけたい、という、無謀な目標が私にはあった。
そんな無謀な目標さえなければ、苦労はしなくてもいい＾＾；

苦労したくない方は、豊富に配布されてるテーマから選ぶのが無難(・ω・)ノ
https://vscodethemes.com/

では本題。
「自分で配色をカスタマイズする方法」は、自分が調べた限りは2種類ある。

「TmTheme Editor」を使う方法
解説サイト：https://qiita.com/JunSuzukiJapan/items/1f19b440ad1d33cf4421

これができるなら、これがすごくいいと思う。

が！
私は、この方法は、使えなかった。

というのは、「Yo Code - Extension Generatorをインストールします。」の後がさっぱり理解不能 ┐(´∇｀)┌

「インストールができたら、$ yo code　とすると、」
うん？　どこで？

で、Google先生に、「Yo Code　使い方」で聞いてみたんだが、出てくるサイトはどれも意味不明 ┐(´∇｀)┌

最初に出てきたサイト
https://www.atmarkit.co.jp/ait/articles/1511/30/news030.html

「Node.jsとnpmが必要なので、これらもPCにインストールされていて、パスが通っている必要がある。」

あー？？？？？？（・´ω・）
なんですと？！

ってことで、ここで諦めた・・・orz

VS Codeに元々同梱されているデフォルトテーマをコピーしてカスタマイズ

自分はこの方法でカスタマイズしたんだが、これが無茶苦茶大変だった（´д｀；）

最初、デフォルトテーマではなくダウンロードテーマのほうでカスタマイズしようと何度も挑戦してしまった＾＾；

ダウンロードテーマは、どうも、デフォルトテーマと扱いが違うらしくて、カスタマイズできなかった。
そのことに気づくまでに計3時間ほど奮闘した・・・orz

参考にしたサイト：https://wemo.tech/1065

ちなみに、このサイトのWinの「配色テーマフォルダへのパス」は間違ってます＾＾；
おかげでむっちゃ探すハメに。。。orz

正しくは
C:\Users\ユーザー名\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\theme-〇〇〇

「AppData」は、隠しファイルなんで、表示させる設定に変更しとかないと見えない。

っていう初歩的なこと書いてくれてるサイトも全然なかった＾＾；
ここで詰まる人もいるのでは？！
自分は、DWの設定をいじくりまわしたときに、「AppData」を普通に触ってたんで全く問題なくたどったが。

参考サイトでは、「theme-monokai」を編集しているが、私は背景がダーク系なのがイヤだったんで、ライト系の「theme-solarized-light」をコピって編集した。

皆、何でダーク系が好きなんだろう？

サイトって、大半が白系の明るい色が背景だから、ブラウザとエディタを行ったり来たりしてると、エディタの背景がダーク系って、目がものすごいチカチカするんだが＾＾；

まあ、どのテーマを元に使っても大丈夫なんだが、「theme-defaults」だけは色んな色のファイルがワンセットにされてるせいで、中身がよくわっからなかった＾＾；

これ以外のテーマを選ぶことをおすすめするｗ

で、使うテーマを決めたら、参考サイトにあるように、まずはフォルダーをコピってフォルダ名を変更する。

次に、フォルダの直下にある「package.json」の「name」と「label」を変更する。

編集する本体のファイルは「themes」の中にあるのだが、このファイル名も変更したい場合は「path」のファイル名も変更しておく。

そして、いよいよ編集の本体である「themes」フォルダの中のファイルを編集していく。
ファイルを開くとこんな感じ↓

参考サイトには「PHPタグの赤色を変更する」「関数名の緑色を変更する」として、対象のコードを書いてくれているが、、、

正直、このコードが何を意味しているのか、さっぱり分からない＼(＾O＾)／

しかし、よくよく見ると、全部同じ法則で書かれていることに気づく。

「｛」で始まって、「｝」で終わっている。
その中身は「name：」「scope：」「settings：」となっている。

「settings：」は、表示される文字の色や太さ、サイズの指定で間違いない。

そうなると、「name：」が、どのコードか、という名称を示している？

「scope：」は・・・なんじゃろ？？？

これに関しては、アドバイスを求めた、かつての上司が教えてくれた。
「scope：」が、どのコードを指しているかの名称。
「name：」は、任意なんで、ぶっちゃけ何でもいいらしい。

ということは、「scope：」さえ分かれば、好きなようにカスタマイズが出来る。

とりあえず、参考サイトにある「PHPタグの赤色を変更する」をやってみようと、scope名の「punctuation.definition.template-expression」と「punctuation.section.embedded」を探してみる。

が！
無い！Σ（゜д゜lll）

これもまたかつての上司が教えてくれたんだが、なければ追加で書き加えればいいそうだ。

赤枠がひとかたまりなので、ピンクの枠に収まるように、赤枠は書き加えていいそうだ。
で、最後のひとかたまりの赤枠の「｝」の後ろには「，」はつけない。

ってことで、参考サイトの「PHPタグの赤色を変更する」のところのコードをマルっと追加してみたのだが、、、反応がないΣ（゜д゜lll）

何がどう間違ってるのか分からず途方に暮れる・・・（・　ω　・；）ﾎﾟｶｰﾝ

それから数時間、色んなことを試してみて分かったのが、「scope：」というのはどうも1つではないらしい、ということ。

同じところを指していても、名称が複数あるらしく、優先順位もあるらしい。

何がどういう優先順位なのかは全く分からなかったが＾＾；

「scope：」の名称に関しては、①の方法を試したときに使わせてもらった「TmTheme Editor」で調べることができる。

「TmTheme Editor」のテーマも色々あるんで、テーマによっていじれるコードの種類が違ってるので、私が主にお世話になったのは、
http://tmtheme-editor.herokuapp.com/#!/editor/theme/Zeus%20Sublime%20Text%20Lighter

右下の選択枠で、コードの種類を選択して（この場合はHTML↓）、該当コードをダブルクリック（この場合はspan）

scopeが分かるんで、同じ名称のscopeを自分が編集してるjsonファイル内に有るか検索。
あれば、それを編集。
無ければ追加。
追加しても反応がなければ違うテーマでspanをダブルクリックしてみて、別名のscopeが出てこないか探す。別名で出てきたら、それをjsonファイル内に有るか検索。

という具合に変更していく。

scopeに関する詳細な法則は、sublimeと一緒だとかなんとか。
と、公式に書いてあるっぽかったが、英語を翻訳したんで正確なところは不明＾＾；
https://www.sublimetext.com/docs/3/scope_naming.html
翻訳しても半分以上、意味不明だが＾＾；

各種コードの変更に関してはこんな感じなんだが、エディタそのもの背景色とかを触る場合の箇所については親切な日本語サイトがあった＾＾
https://mykii.blog/?p=225
ありがとう！日本語！

完成品。

PHP＆HTML

HTMLは、ほぼ紺色で統一。
PHPは当初の目標どおり、「＜？php 」「？＞」は赤の太字、それ以外は赤系統の色で統一して、HTMLに埋もれないようにした。

CSS

外注のやらかしコードの場合、よくHTMLの中にscript直書きされてたりするんで、こちらもHTMLとは全く違う色の緑系で統一。
「@media」は何故だか、PHPの「if」や「while」と同じscopeが割り当てられててこんな色になってるのだが、ここは目立ってくれてOKなんで、これで良しとした。

贅沢言うなら、「@media」の開始と終了のタグを昔のDWみたいに太字で違う色にできればよかったんだが、そんな難しい方法が分かるわけもなく＾＾；

まあ、DWと違って、開始と終了の色はふられてるから、まだ分かりやすいかな。

0 0