VSCodeに入れておきたい仕事で使えるおすすめプラグイン

Japanese Language Pack for Visual Studio Code

まずはこちらのプラグイン。
コードを書き始めた頃はただでさえ見たことのない文字が羅列されているところに説明も英語だとコードとの距離を感じますよね…

しかし、こちらを入れておけばある程度日本語にしてくれるので、操作に慣れていなくても安心して使うことができます。

Live Server

右下のGo Liveの部分をクリックするとブラウザに表示することができます。

毎回ファイルをブラウザにドラックアンドドロップせずにブラウザに表示できるのはとても助かりますよね。

急いでいる時に画面の上の方にドロップさせてしまってもう一度…なんてこともなくなります。

ちなみにOpen a folder or workspace… (File -> Open Folder)というエラーが右下に出てしまったという方は、左上のファイルからフォルダを選択してみてください。

Live Serverを使用する場合、HTMLのファイルのみを選択するのではなく、HTMLのファイルが入っているフォルダごと選択する必要があります。

Beautify

インデントをきれいに揃えてくれます。

インデントはとても大事です！インデントが揃っていないとタグの親子関係がわかりにくくなるので、コーディング作業のしやすさなどにも影響してきます。

そのため、気が付いたらBeautifyを使用してもよいかもしれません。

ちなみにインストールをすれば、ctrl+shift+pで画面の上の方にプラグインが表示されるので、Beautifyが選択されていることを確認してenterを押すだけできれいに整います。

しかし、１つだけ懸念点として、会社ごとにインデントの余白が違うことがあります。そのため、むやみにBeautifyをかけるのはおすすめできません。

Bracket Pair Colorizer 2

カッコの色を変えてくれます。コーディングを進めるなかで、JavaScriptのような言語を記述しているとカッコを使う機会がたくさん出てくると思います。

まだJavaScriptを使う機会がない方でも、スマートフォン用に表示するメディアクエリなどは使うのではないでしょうか。カッコを誤って消してしまったり、、、

カッコの外に記述してしまったりなどのミスも減らせます。

さらにメディアクエリの中に書いた記述のカッコの色が変わるので、どのコードをスマートフォン用にしているのか一目でわかります。

indent-rainbow

インデントに色をつけてくれます。閉じタグがどこにあるのかもとてもわかりやすいですし、きれいにインデントができているかどうかが一目瞭然です。

こちらのプラグインをインストールしてからは、きれいにインデントされていないと違和感を抱くようになるので、インデントの意識を高めるためにもインストールをおすすめします。

Auto Rename Tag

ペアになっているHTMLのタグを自動的に書き換えてくれるプラグインです。

一度記述したタグを変更する際、片方のタグを書き換えると、もう片方のタグを自動的に書き換えてくれます。

開始タグを書き換えた後に閉じタグを書き換えることも、閉じタグがどこにあるのかを探さなくても良くなります。

ちなみに、開始と終了どちらのタグを編集してもペアのタグを同じタグに書き換えてくれます。

とても便利なプラグインなので、ケアレスミスを防ぐためにも間違いなくインストールすべきプラグインです。

open in browser

最初の方にLive Serverを紹介しましたが、こちらのプラグインはalt+Bを押すだけで編集中のファイルをブラウザに表示することができます。

どちらも簡単にブラウザ表示ができますので、ご自身が使いやすい方を使ってみてください。

Highlight Matching Tag

開始タグなどをクリックするだけでも薄く色づいてどのタグとセットなのかわかりますが、こちらははっきり色下線を引いて教えてくれます。

さらにミニマップ部分にも色をつけてくれるので、とてもわかりやすいです。

CharacterCount

こちらは画面の下部バーに文字数を表示してくれます。

Web制作の仕事に携わっている方であれば、業務で使用する機会も多いかと思いますので、業務効率をアップさせるために入れておくことをおすすめします。

ちなみに、メモ帳代わりにエディタを使う時などにも便利です。

テキスト校正くん

これまでに紹介したプラグインは英語の名称が多くありましたが、こちらは珍しく日本語名称のプラグインです。

こちらのプラグインは日本語の文章をチェックしてくれます。間違いがある場所には赤線でエラーを表示してくれます。

正しく入力すると赤線のエラーが消えるので、とてもわかりやすく校正できます。

先ほど紹介したCharacter Countと同様メモ帳代わりにエディタを使う時などにも便利です。ライターのお仕事もすることがある方には非常に助かるプラグインではないでしょうか。

zenkaku

全角スペースを可視化してくれるプラグインです。

何回確認しても記述は間違っていないはずなのに、エラーが出てしまった結果、原因が全角スペースだったなんて…。

そんな初歩的なミスをなくすためにもzenkakuは入れておきましょう。

CSS Peek

HTMLファイルから適用しているCSSを表示して、その場で編集または、ファイル先へ飛ぶことができます。

記述したファイルを探す手間を省くことができますので、CSSやSCSSのファイル数が多くなった時はとても便利かと思います。

タグをクリックすると適用されているスタイルを確認することができ、そのまま編集ができます。

右側に対象ファイルも表示され、そちらをクリックするとファイルに飛ぶこともできますのでそちらも便利です。

htmltagwrap

選択したタグを親要素で囲ってくれるプラグインです。

ある程度タグを記述した後にやはりdivで囲いたくなることは多々あると思います。

タグをつけ足すこと自体は簡単ですが、インデントが少し大変になってきますよね。こちらは選択したタグのインデントも自動的に行ってくれます。

補足ですが、ul,liタグなど初めから親要素と子要素のどちらも記述したい場合、カッコを記述せず、ul>li*5などと記述するとulタグの中にliタグが5つ記述されたコードが書けます。

便利なのでぜひ使ってみてください。

Code Spell Checker

こちらはスペルチェックを行ってくれるプラグインです。

クラス名をつける時など、念のために確認しておこうかな、という作業がなくなります。

また、簡単な単語のスペルミスをしてしまうという、ケアレスミスを防ぐこともできるようになります！

さらにこちらは、ソースコード専用のスペルチェッカーなので、ハイフンでつなげた単語や間に大文字を入れた記述などをスペルミスだと勘違いすることもありません。

このような便利機能もあるのでとてもおすすめです。