VS Codeのおすすめプラグイン

コードを書いていると閉じタグがわからなくなった。全角スペースでコードが動かない。量が多くてコードの見た目が汚い。などいろいろな小さなストレスがあると思います。

VS Codeには様々なプラグインがあり簡単に快適にコードを書くための環境を作ることができますので、インストールすしましょう。

目次

おすすめプラグイン

indent-rainbow

インデントに色を付けてみやすくしてくます。

開始タグを終了タグや入れ子構造をわかりやすくするためにインデントを合わせますがコードの行数が多くなると、列がわかりにくくなりますがこれがあれば解決です。

Bracket Pair Colorizer

カッコの開始と終了をハイライトしてくれます。

jsやphpなどの処理を書くとカッコが大量発生し、閉じわすれなどが発生することでエラーの原因になります。

このプラグインがあればカッコの関係性をわかりやすくしてくれるので修正が楽になります。

Auto Close Tag

開始タグを書くと終了タグを自動で書いてくれます。

終了タグを書くのはめんどくさいですよね。これがあればそんな手間もはぶけ、コードを書くスピードが上がります。

Auto Rename Tag

開始タグを変更すると閉じタグも自動で変更してくれます。

途中でタグ名を変更したくなることは多々あります。

タグ名を変更すると終了タグの名前の変更しなければいけません。コードが大量になると閉じタグを探すのも一苦労ですし、間違って異なるタグの名前を変更してしまったら表示が崩れタイムロスです。

Code Spell Checker

スペルをチェックしてくれます。

英語のスペルミスは人にコードを見せるときに恥ずかしいですよね。このプラグインがあればスペルミスを知らせてくれるのでいちいち「あってるかな…」と翻訳機で調べる必要ななくなります。

TODO Highlight

TODO:と記載した部分をハイライトしてくれます。

複数人で開発する際やレビューしたコードを人に渡すとき、後で自分で見返すメモなど、見逃したくない場合に活躍します。

Trailing Spaces

不必要なスペースを赤く表示してくれます。

無意味なスペースかいていませんか?より上を目指すなら不要なスペースにもこだわっていきたいです。このプラグインを使えば赤いのが気になって不要なスペースを消す癖がつきます。

zenkaku

全角スペースをハイライトしてくれます。

全角のスペースと半角のスペースってほとんど見分けがつかないですよね。

IntelliSense for CSS class names in HTML

cssの名をアシストしてくれる

Path Intellisense

パスを記載する際にアシストしてくれる

SCSS IntelliSense

scssの記載をアシストしてくれる

Live Share

コードをライブで共有できる

Japanese Language Pack for Visual Studio Code

日本語訳してくれる

まとめ

以上、おすすめのプラグインでした。ほかにも便利なプラグインは沢山存在するのでググって自分だけの完璧な開発環境を目指していきましょう。

ちなみにscssを使いはじめるとscssをコンパイルするプラグインなどを使用するようになりますが、全てyarnというタスクランナーで自動化します。

ですのでインストールは不要です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

プログラムちょと書ける。
いまはバリ島でスクール作っている。
プログラムちょっとできる。

目次