【VSCode】拡張機能おすすめ20選 [2019年最新]

vscode

こんにちは。菜笑[なえ] (@nae310_)です。

Visual Studio Code(VSCode) を使っていると
・拡張機能たくさんあるけど、どれを使えばいいの?
・自分にオススメの拡張機能ってどれだろう。
・拡張機能を使って効率よく開発を進めたい!
という気持ちになってくると思います。

本記事では、こういった悩みに答えていきます。

本記事の内容

  • Visual Studio Codeを使う全ての人にオススメ拡張機能 6選
  • HTML & CSSを使う人にオススメ拡張機能 6選
  • Ruby on Railsを使う人にオススメ拡張機能 5選
  • あると便利!なオススメ拡張機能 3選

自分はエンジニアとして毎日VSCodeを使ってコードを書いているので、その経験を元に使える拡張機能をオススメしていきます。

Visual Studio Codeを使う全ての人にオススメ拡張機能 6選

Japanese Language Pack for Visual Studio Code

みなさんご存知の日本語にしてくれるものですね。
英語で使いたくない方は全員入れましょう。
入れ方はこちらを参考にしてみてください。

vscode-icons

各フォルダ・ファイルにアイコンが付いて、見やすく見ていて楽しくなります。

vscode-icons

zenkaku

全角スペースをしてくれます。
コードの中に全角スペースが入るエラーになり、発見までに途方もない時間がかかるので絶対に入れることを強くオススメします!

zenkaku

Duplicate action

右クリックして「Duplicate file or directory」を選ぶだけでファイルやディレクトリを複製できます。
これがないとファイルを作成して、コピペしてと面倒なので重宝しています。

Duplicate action

indent-rainbow

インデントに色付けをしてくれます。
結構カラフルな感じになるので、色が多いのが嫌いじゃなければ入れてみるといいと思います。

indent-rainbow

Bracket Pair Colorizer

カッコの対応がわかりやすくなります。
初心者の方は、どのカッコが対応しているか追うのが大変だと思うのでオススメです。
ただこれもカラフルになるので、多彩な感じが嫌いじゃなければ。

Bracket Pair Colorizer

HTML & CSSを使う人にオススメ拡張機能 6選

Live Server

HTMLやCSSを修正したのに反映されてない!ってなるときは、だいたい更新忘れてますよね。
これを入れておけば、自動で更新してくれるので安心!ラク!

Live Server

Auto Rename Tag

HTMLの開始タグ・終了タグを一緒に変更できます。
地味に嬉しい機能です。もうなかった頃には戻れません。

Auto Rename Tag

IntelliSense for CSS class names in HTML

HTMLにクラスを記入するとき、CSSにあるクラス名を表示してくれます。
入力の手間も省けて、スペルミスも防げて一石二鳥です。

IntelliSense for CSS class names in HTML

HTMLHint

HTMLの入力チェックを行ってくれます。
最初はスペルミスに気づきにくいと思うので入れておくといいですね。

HTMLHint

CSSTree validator

CSSの入力チェックを行ってくれます。
最初はスペルミスに気づきにくいと思うので入れておくといいですね。

CSSTree validator

css-auto-prefix

prefixを自動で補完してくれます。
でもちゃんと補完されない時もあるので気休め程度で。

css-auto-prefix

Ruby on Railsを使う人にオススメ拡張機能 5選

Ruby

Rubyのいろいろを便利にしてくれます。
とりあえず入れておけば間違い無いです。

endwise

endが必要なときに自動挿入されます。
あとで書こうとすると忘れたりするので、あると安心できます。

endwise

Ruby Solargraph

Rubyの入力補完をしてくれます。
あとは、それぞれの説明ボックスみたいなのも表示してくれます。

Ruby Solargraph

ruby-rubocop

rubocopを実行してくれます。
自分の書き方が正しいのかどうか客観的に判断できるのでありがたいですね。
rubocop.yml を使ってカスタマイズも可能です。

ruby-rubocop

Rails

Railsのいろいろを便利にしてくれます。
とりあえず入れておけば間違い無いです。

あると便利!なオススメ拡張機能 3選

Regex Previewer

正規表現にマッチするかチェックできます。
⌘ + option + M で正規表現チェック用のファイルを開いて、そこにチェックしたい文字列を入れれば、何個でもチェックできる優れものです。
/gmとして、全てがチェックできるようにすることを忘れないよう注意です。

Regex Previewer

Rainbow CSV

CSVファイルを見ることがあれば必須です。
きれいに色付けされ、幸せな気持ちでCSVファイルを見ることができます。

Rainbow CSV

SFTP

VSCodeからSFTPを便利に使いたときに入れてください。
ファイル保存で自動アップロードとかもできちゃいます。

まとめ

今回はVisual Studio Code(VSCode) のオススメ拡張機能を20個紹介しました。

自分に合うかな?必要かな?と思った場合はとりあえず入れてみると良いかなと思います!

使ってみないとわからないこともあるとおもうので、入れてどうするか考える。くらいのスタンスで試してみましょう。

VSCode 関連記事

SNS

Twitter:@nae310_
Instagram:310nae