ツール

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

2019年7月19日

vscode

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

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

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

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

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

Japanese Language Pack for Visual Studio Code

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

vscode-icons

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

vscode-icons

Tabnine

ざっくり言うと、いろんなコードを補完してくれるツールです!
次こんなこと書くよね?と予測して提案してくれるので、効率アップです。

zenkaku

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

zenkaku

Duplicate action

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

Duplicate action

indent-rainbow

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

indent-rainbow

Bracket Pair Colorizer

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

(2021年9月更新)
こちらは拡張機能をいれなくても、VSCodeの設定でできるようになりました!
設定で editor.bracketPairColorization.enabled をオンにすると設定できます。
もしくは設定の検索で「かっこのペア」とかで探しても見つかります。

Bracket Pair Colorizer

Code Spell Checker

英単語のミスを指摘してくれます!
なんとなくスペルこんな感じだっけ?と書いてるときに、すぐ違うってわかるのは便利ですね。

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のいろいろを便利にしてくれます。
とりあえず入れておけば間違い無いです。

設定からruby.intellisenseの設定値を rubyLocate に変更するのがオススメです!
これでメソッドの定義元にジャンプできるようになります。

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) のオススメ拡張機能を22個紹介しました。

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

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

-ツール
-