こんにちは。菜笑[なえ] (@nae310_)です。
Visual Studio Code(VSCode) を使っていると
・拡張機能たくさんあるけど、どれを使えばいいの？
・自分にオススメの拡張機能ってどれだろう。
・拡張機能を使って効率よく開発を進めたい！
という気持ちになってくると思います。
本記事では、こういった悩みに答えていきます。
自分はエンジニアとして毎日VSCodeを使ってコードを書いているので、その経験を元に使える拡張機能をオススメしていきます。
Visual Studio Codeを使う全ての人にオススメ拡張機能 8選
Japanese Language Pack for Visual Studio Code
みなさんご存知の日本語にしてくれるものですね。
英語で使いたくない方は全員入れましょう。
入れ方はこちらを参考にしてみてください。
vscode-icons
各フォルダ・ファイルにアイコンが付いて、見やすく見ていて楽しくなります。
Tabnine
ざっくり言うと、いろんなコードを補完してくれるツールです！
次こんなこと書くよね？と予測して提案してくれるので、効率アップです。
zenkaku
全角スペースをしてくれます。
コードの中に全角スペースが入るエラーになり、発見までに途方もない時間がかかるので絶対に入れることを強くオススメします！
Duplicate action
右クリックして「Duplicate file or directory」を選ぶだけでファイルやディレクトリを複製できます。
これがないとファイルを作成して、コピペしてと面倒なので重宝しています。
indent-rainbow
インデントに色付けをしてくれます。
結構カラフルな感じになるので、色が多いのが嫌いじゃなければ入れてみるといいと思います。
Bracket Pair Colorizer
カッコの対応がわかりやすくなります。
初心者の方は、どのカッコが対応しているか追うのが大変だと思うのでオススメです。
ただこれもカラフルになるので、多彩な感じが嫌いじゃなければ。
（2021年9月更新）
こちらは拡張機能をいれなくても、VSCodeの設定でできるようになりました！
設定で editor.bracketPairColorization.enabled をオンにすると設定できます。
もしくは設定の検索で「かっこのペア」とかで探しても見つかります。
Code Spell Checker
英単語のミスを指摘してくれます！
なんとなくスペルこんな感じだっけ？と書いてるときに、すぐ違うってわかるのは便利ですね。
HTML & CSSを使う人にオススメ拡張機能 6選
Live Server
HTMLやCSSを修正したのに反映されてない！ってなるときは、だいたい更新忘れてますよね。
これを入れておけば、自動で更新してくれるので安心！ラク！
Auto Rename Tag
HTMLの開始タグ・終了タグを一緒に変更できます。
地味に嬉しい機能です。もうなかった頃には戻れません。
IntelliSense for CSS class names in HTML
HTMLにクラスを記入するとき、CSSにあるクラス名を表示してくれます。
入力の手間も省けて、スペルミスも防げて一石二鳥です。
HTMLHint
HTMLの入力チェックを行ってくれます。
最初はスペルミスに気づきにくいと思うので入れておくといいですね。
CSSTree validator
CSSの入力チェックを行ってくれます。
最初はスペルミスに気づきにくいと思うので入れておくといいですね。
css-auto-prefix
prefixを自動で補完してくれます。
でもちゃんと補完されない時もあるので気休め程度で。
Ruby on Railsを使う人にオススメ拡張機能 5選
Ruby
Rubyのいろいろを便利にしてくれます。
とりあえず入れておけば間違い無いです。
設定からruby.intellisenseの設定値を rubyLocate に変更するのがオススメです！
これでメソッドの定義元にジャンプできるようになります。
endwise
endが必要なときに自動挿入されます。
あとで書こうとすると忘れたりするので、あると安心できます。
Ruby Solargraph
Rubyの入力補完をしてくれます。
あとは、それぞれの説明ボックスみたいなのも表示してくれます。
ruby-rubocop
rubocopを実行してくれます。
自分の書き方が正しいのかどうか客観的に判断できるのでありがたいですね。
rubocop.yml を使ってカスタマイズも可能です。
Rails
Railsのいろいろを便利にしてくれます。
とりあえず入れておけば間違い無いです。
あると便利！なオススメ拡張機能 3選
Regex Previewer
正規表現にマッチするかチェックできます。
⌘ + option + M で正規表現チェック用のファイルを開いて、そこにチェックしたい文字列を入れれば、何個でもチェックできる優れものです。
/gmとして、全てがチェックできるようにすることを忘れないよう注意です。
Rainbow CSV
CSVファイルを見ることがあれば必須です。
きれいに色付けされ、幸せな気持ちでCSVファイルを見ることができます。
SFTP
VSCodeからSFTPを便利に使いたときに入れてください。
ファイル保存で自動アップロードとかもできちゃいます。
まとめ
今回はVisual Studio Code(VSCode) のオススメ拡張機能を22個紹介しました。
自分に合うかな？必要かな？と思った場合はとりあえず入れてみると良いかなと思います！
使ってみないとわからないこともあるとおもうので、入れてどうするか考える。くらいのスタンスで試してみましょう。
