VSCode関連で独自にちょっとだけカスタマイズした環境設定を晒す(part. 1/3)

# はじめに
初投稿です！
自分が主にMacで使ってるテキストエディタ[VSCode](https://code.visualstudio.com/)を使用しながら設定を少しずつ弄ったきたので、色々学習してきた内容を書きはじめる前に、まずはその紹介と使ってみた感想を述べていきます(長くなりそうなので、３回に分けて記事を書きます)。



# 前提条件

- macOS Catalina ( バージョン 10.15.7 )
- Visual Studio Code.app ( バージョン 1.55.0 )

※これらのバージョンはこの記事を書いた時のものであり、設定時のバージョンはこれよりも古い可能性があります。



# 環境設定
主に、以下の5つを実施しました。
1. 拡張機能の追加
2. テーマ(拡張機能の一つ)の実装
3. 表示されるプロンプトを短くかつ見やすくする
4. 設定項目一覧から幾つかの項目を変更
5. キーバインド

ここでは上の５つの内から、
1. 拡張機能の追加
2. テーマ(拡張機能の一つ)の実装
について書いていきます。


### 1. 拡張機能の追加

- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
インデントを虹色で表示。不適切なインデントは赤色で表示。

- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
様々な言語のコードを自動整形してくれるフォーマッタ。

- [Rufo](https://marketplace.visualstudio.com/items?itemName=jnbt.vscode-rufo)
Ruby専用の自動整形フォーマッタをVSCodeで使えるようにする。これとはまた別に、Rubyフォーマット用のgemで同名の[Rufo](https://github.com/ruby-formatter/rufo)を別途インストールしなければならない。ターミナルで`gem install rufo`と入力する。うまく機能すれば、`option + shift + f`で自動整形される。

- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
簡易的なローカルサーバを立ち上げ、HTMLやCSSのファイルの変更をリアルタイムでブラウザに反映させる。

- [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
日本語化。インストール後にVSCodeを再起動すること。

- [HTML Snippets](https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets)
HTMLとCSSとSCSSの自動補完機能。

- [Ruby](https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby)
Rubyのインテリセンス[^1]を有効化させる等。

- [VSCode Ruby](https://marketplace.visualstudio.com/items?itemName=wingrunr21.vscode-ruby)
上記の[Ruby](https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby)を導入すると、自動的にインストールされる。RubyとERBのシンタックスハイライト[^2]を有効にする。

- [zenkaku](https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku)
入力された全角スペースを検知して表示させる。インストールしただけだと使えないので、`command + shift + p`でコマンドパレットを開き、`Enable Zenkaku`と入力して実行後にVSCodeを再起動する。うまく機能すれば、全角スペースが入力されている箇所が強調表示される。

- [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
()や{}や[]などの括弧の対応関係を色分けして分かりやすくする。現在[無印版](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)とこれの２種類あるが、括弧の解析を行うエンジンがVSCodeと同じものになりパフォーマンスが向上されているらしいので、こちらを採用。

- [Better Haml](https://marketplace.visualstudio.com/items?itemName=karunamurti.haml)
Haml専用のシンタックスハイライト[^2]等。


### 2. テーマ(拡張機能の一つ)の実装
GitHub公式からリリースされた、[GitHub Theme](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme)の**ダークモード**を使用しています。

https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme


## 設定後の感想とこれからの課題
上記の環境でしばらく使ってみましたが、`indent-rainbow`と`Bracket Pair Colorizer 2`は外しても良いかなと思いました。なんせ、シンタックスからインデント、括弧類の記号までありとあらゆるものがカラフルになりすぎて、逆に分かりづらくなっている気がするからです。特に入れ子構造が変わると、コードのシンタックス部分は同じ色なのに括弧の色だけ変わるのが不自然に感じました。
![JSファイルを例とする](https://i.gyazo.com/75f2dc19e13500fe0f174ab42f9e41d8.png "Bracket Pair Colorizer 2を有効にした場合")
インデントは上の画像のようにデフォルトで可視化されていて、対応する括弧もカーソルを当てれば一目瞭然とは言えないものの教えてくれるので、今のところはこのままで良いような状態です。後は慣れ。
また、`Prettier`や`Rufo`などのフォーマッタも要らないかなぁと思いました。勝手にシングルクォート`''`がダブルクォート`""`に変化したり、JSコードの**function()**が**function ()**という風に間に半角スペースが入ったりするのが個人的にあまり好きではありません。改行すると自動的にインデントが入るので、ショートカットキーを駆使して自分で適切な位置に調節すれば良いからです。逆にチーム開発とかではこういった書式はルールを決めて統一させておいた方が良いので、このようなフォーマッタは便利だと思います。因みにRubyのフォーマッタに関して言えば、[Ruby専用のPrettierプラグイン](https://github.com/prettier/plugin-ruby)があるようなので、こちらを代わりに使ってみるのも良いかもしれません。
`zenkaku`に至っては、普段からIMEで[Google 日本語入力](https://www.google.co.jp/ime/)を使ってる自分の環境では、設定で全角モードになっていても半角スペースが入力されるようにしているので、いよいよ要らなくなりました。
そして、このカスタマイズを実施したのがHaml/SCSSによるフロントエンド実装時なんですが、一番ワクワクしていた`Live Server`もHamlには対応していないようなので、これも保留...HTMLでフロント実装する際は、ぜひ試してみたいです！
結果、最終的に有効化している拡張機能はほんの一握りとなりました。しかし、これはあくまでも個人かつ小規模な学習レベルの開発を前提とした場合の設定なので、チームだったりビッグなプロジェクトで開発する際は、この限りではありません。また、独自の設定項目がある拡張機能もあるようなので、その辺もいい感じにチェックしてみれば、より使いやすくなるような気がします。

次に、`GitHub Theme`についてですが、これはこれで結構気に入っているので、しばらく使い続けると思います。
背景の黒とテキストの白と行番号やコメント文なんかのグレーとのコントラストが何とも...(＊´﹃｀＊)



# 参考記事
- [VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか) - Qiita](https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234)
- [VSCode に必ず入れておきたい拡張機能 - Qiita](https://qiita.com/ucan-lab/items/e85931bf8276da43cc97)
- [VSCodeの拡張機能でRailsと仲良くなる - Qiita](https://qiita.com/hakshu/items/98ed12c32da97474b68d)


# 関連投稿記事
- [VSCode関連で独自にちょっとだけカスタマイズした環境設定を晒す(part. 3/3) - Qiita](https://qiita.com/tsutsumin_pro/items/79ef5eaac6a38d4af085)



# 次回予告
- [VSCode関連で独自にちょっとだけカスタマイズした環境設定を晒す(part. 2/3) - Qiita](https://qiita.com/tsutsumin_pro/items/4125a63798d24b09f609)



[^1]: Microsoft社のソフトウェア統合開発環境「Visual Studio」の入力支援機能。自動補完や後続要素の選択入力など

[^2]: テキストエディタ等における、言語の予約語等の文字を装飾する機能