【Mac】VisualStudioCodeに独自テーマを設定してみた

f:id:eisukenakanishi:20170629171503p:plain

はじめに

今回トライアルでVisualStudioCode(以下：VSCode)を使ってみようと思って、インストールしてみた。
ここまでは良かったのだが、その先にモチベーションを上げるトリガーでもあるテーマの変更で思いっきりつまずいたので、備忘録として書いておく。
Windowsの指定方法は鬼詳しく書いてあったのに、Macに関する資料がまとまっていなかったので、まとめてみた。

まずはお気に入りのテーマを探す

まずは、ColorSublimeというサイトでお気に入りのテーマを探します。
僕はblockninjaという中二病ムンムンなテーマが色味的に気に入ったので、こちらを採用。
ダウンロードまではうまくいきました。

しかし、その先にApply、いわゆる反映するところで思いっきりつまずきました。

前準備として、npmを入れる必要がある

こちらの記事にも記載してあるとおり、npmは事前にインストールしておきます。
Npmをインストールする前に、必ずnodejsを入れておきます。

https://nodejs.org/からインストール、もしくはHomebrewでインストール。コマンドは以下。

brew install node

こちらでインストール。僕は後者のHomebrewでインストールしております。
インストールが完了したら、

export PATH="/usr/local/share/npm/bin:$PATH"

こちらをzshなら~/.zshrc、bashなら~/.bash_profileに追記します。
これでnpmも使えるようになります。

PATHの理由としては、npmを使ってインストールするときに”npm install -g”とかのグローバルオプションが付いた場合デフォルトで上記のPATHに入るから、とだけ覚えておけばいいです。
Nodejsとnpmの準備が整ったら、早速VSCodeにテーマを反映していきましょう。
ちなみに、Nodejs入れればnpmコマンドは使えるようになります。
ややこしい！！

テーマを反映する前にもう一工程

yo command not found

とならないように、yoを入れます。
Yoコマンドがないyoだと、テーマは永遠に入れられ(なかった)ないかも。

npm install -g yo

として、yoを入れるyo!!
次によくわからないけど、code-generatorというものを入れます。
ちなみにコードは逆なので戸惑わないでください。

npm install -g generator-code

generator-codeなので、お気をつけください。

いよいよVSCodeを立ち上げます

ここに来るまで立ち上げなくても大丈夫です。
謎〜！

立ち上げたら、コマンドラインツールを立ち上げます。
Ctrl＋`で立ち上がります。

そして、

yo code

と入力します。
そうするとオプションが出てきます。

その中から、

New Color Theme

を選択。このあたりは、カーソルキーで選択します。
キーボードの矢印ですね。そして、間違えてはいけないのが、必ず

~/.vscode/extentions

のディレクトリでこの

yo code

を実行してください。ホームディレクトリでやるととんでもないことになります。(永遠にできない)

❯ Import an existing theme but keep it as tmTheme file.

こちらを選択して、ColorSublimeでダウンロードしたテーマをドラッグ＆ドロップでもいいのでパスを追加します。
その後はガイドに従って(AuthorとかDescriptionとか)進めていきます。

最終的にすべてのコマンドを終わらせると、先ほどの

~/.vscode/extentions

に命名したフォルダが入っております。
それを確認した上で、VSCodeのメニューバーから、
Code⇒Preference⇒Color Themeを選択します。

今までだとデフォルトしか入っていませんが、上記の行程がうまくいっていれば、あなたの命名しフォルダが選択肢にあるはずです。

ようやく実装完了です。