最初に
環境:ubuntu 20.04
やりたいこと:jsxにわかりやすいアイコンを付けたい(jsxにかかわらずアイコンが設定されてない拡張子にアイコンを付けたい)
参考サイト:https://blog.robertelder.org/custom-mime-type-ubuntu/
注意:MIMEをいじります。どこかに副作用がでても自己責任でお願いします(__)。
ファイルのアイコンが汎用的なやつになるのが嫌だった
jsxファイルはubuntuの標準アイコンには搭載されていないため、JSファイルと違って汎用的なアイコンで表示される。ただこれでは正直見にくい。。
ちなみにVScodeで開くときにはわかりやすいアイコンがついている。こんな感じでわかりやすいアイコンを付けたい
※ちなみにreactのロゴは「react ロゴ svg」と検索すれば出てくる。アイコンで使うにはsvgである必要があるので注意。
初手:一ファイルづつアイコンを変える方法
ファイルを右クリック → プロパティ を選択すると、下のような画面が表示される。そこでアイコンをクリックすると、好きな画像を選択することができる。
画像のセット後
おお!ちゃんと変わっている!。
でも、これを全部のファイルにやるのはありえないよね...
どこかに、拡張子に応じてアイコンを割り振っている設定ファイルがあるはずだ。次はそれを探す旅に出た
2の策:設定ファイルに追記する
設定ファイルを見つけた
サイトを点々と巡ったところ、ファイルタイプの設定が書かれているものは
/usr/share/mime/packages
にあることがわかった
某サイトを参考にcustom-mine-javascriptXML.xml
というファイルを作成した
sudo vim custom-mine-javascriptXML.xml
↓custom-mine-javascriptXML.xmlの中身
<?xml version="1.0" encoding="UTF-8"?>
<mime-info xmlns='http://www.freedesktop.org/standards/shared-mime-info'>
<mime-type type="application/javascriptXML">
<comment>jsx File</comment>
<glob pattern="*.jsx"/>
</mime-type>
</mime-info>
次にこの編集を読み込んでもらうために次のコマンドを叩く
sudo update-mime-database /usr/share/mime
これで新しいファイル形式を登録することに成功する。
ただ、アイコンをセットするにはもう一つ設定しなければならない
ファイルアイコンを管理している場所(全てではない)
次にお邪魔するのは
/usr/share/icons/hicolor/scalable/mimetypes
だ。
ここに、アイコンで使うsvgファイルがいくつか保管されている。全てではないので他にもっと適切な設置場所があるのかもしれないが、一応上手く言ったのでそのまま書く。
sudo cp ~/React-icon.svg application-javascriptXML.svg
注意するべきは、画像の名前を、先のxmlで書いた「type="application/javascriptXML"」と似せて、
「application-javascriptXML.svg」というファイル名にしていることだ。
とりあえずxml側の「/」は、画像名では「-」に変換する必要がある。
それ以外は同じ名前を与えて、末尾に「.svg」を付けた画像名にすれば、システムが両者の関連付けを把握するようだ。
更新するために以下のコマンドを叩く
sudo update-icon-caches /usr/share/icons/*
次にjsxのあるフォルダを見に行くと...
来ました。すべてのjsxにreactのロゴが写りました!
最後に注意
これ、プロパティを見ると、ファイルタイプがxmlで適当に名付けた application/javascriptXML になってるんですよね。
ファイルタイプって結構大事らしいので、どこかで副作用が起きないか心配ではあります。詳しい方がいたら警告していただきたいです。
また、これに伴い最初にファイルを開こうとすると、
「これを開けるアプリケーションがないです」と返される。右クリックでVScodeなどを選択すれば普通に開けるが。。。
問題が起これば追記していきます。