vscodeおすすめプラグイン

Web制作者のほとんどの方が使用しているVSCode。最近使い始めた方も、リリース当時から使用している方もプラグインは使用していますか?ここでは実際の現場で使われているプラグインや面白いプラグインをご紹介いたします。ぜひ自分のお気に入りのプラグインを見つけて作業効率をアップさせましょう!

vscodeインストール方法

まずはプラグインのインストール方法です。ここではVSCodeをダウンロードしてみたけどまだなにもプラグインを入れたことがない方に操作方法を説明していきます!

とても簡単なのでぜひ一緒にやってみてください。

まずはVSCodeを起動させて最初に出てくるこのページの左側にある赤矢印の部分をクリックしてください。

vscodeインストール方法1

すると検索窓が出てくるのでこちらにプラグイン名を入力し、Installをクリックします。

vscodeインストール方法2

インストールが完了したら一度VSCodeを閉じて再起動させてください。

※必須ではありませんが、プラグインによっては再起動を促すメッセージが出てしまうことがあるため再起動を推奨しています。

検索窓にインストールした時と同じプラグイン名を入力して、アンインストールの文字が出てきたらプラグインのインストールは完了です!

vscodeインストール方法3

2.基本的なプラグイン

ここでは初めに入れておくことをおすすめする基本的なプラグインを紹介します。まだプラグインを使ったことがないという方はぜひこの機会にぜひインストールしてみてください。

VSCodeがとても使いやすくなると思います!

Japanese Language Pack for Visual Studio Code

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

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

Live Server

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

毎回ファイルをブラウザにドラックアンドドロップせずにブラウザに表示できるのはとても助かりますよね。急いでいる時に画面の上の方にドロップさせてしまってもう一度…なんてこともなくなります。

ちなみにOpen a folder or workspace… (File -> Open Folder)というエラーが右下に出てしまったという方は、左上のファイルからフォルダを選択してみてください。Live Serverを使用する場合、HTMLのファイルのみを選択するのではなく、HTMLのファイルが入っているフォルダごと選択する必要があります。

live-server

Beautify

インデントをきれいに揃えてくれます。インデントはとても大事です!インデントが揃っていないとタグの親子関係がわかりにくくなるので、コーディング作業のしやすさなどにも影響してきます。そのため、気が付いたらBeautifyを使用してもよいかもしれません。

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

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

3.便利なプラグイン

便利なプラグイン

基本的なプラグインを入れてコーディングにも慣れてきたら作業効率も気になってくると思います。さらにできることが増えていく分、コードがごちゃごちゃしてわかりづらいということも。

そこで便利なプラグインを活用してミスをなくしたり、作業効率をアップさせたりしましょう。

Bracket Pair Colorizer 2

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

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

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

bracket-pair-colorizer2

indent-rainbow

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

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

indent-rainbow

Auto Rename Tag

ペアになっているHTMLのタグを自動的に書き換えてくれるプラグインです。一度記述したタグを変更する際、片方のタグを書き換えると、もう片方のタグを自動的に書き換えてくれます。

開始タグを書き換えた後に閉じタグを書き換えることも、閉じタグがどこにあるのかを探さなくても良くなります。ちなみに、開始と終了どちらのタグを編集してもペアのタグを同じタグに書き換えてくれます。

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

open in browser

最初の方にLive Serverを紹介しましたが、こちらのプラグインはalt+Bを押すだけで編集中のファイルをブラウザに表示することができます。どちらも簡単にブラウザ表示ができますので、ご自身が使いやすい方を使ってみてください。

Highlight Matching Tag

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

highlight-matching-tag

CharacterCount

こちらは画面の下部バーに文字数を表示してくれます。Web制作の仕事に携わっている方であれば、業務で使用する機会も多いかと思いますので、業務効率をアップさせるために入れておくことをおすすめします。ちなみに、メモ帳代わりにエディタを使う時などにも便利です。

テキスト校正くん

これまでに紹介したプラグインの名称は英語が多かったですが、こちらは珍しく日本語名称のプラグインです。こちらのプラグインは日本語の文章をチェックしてくれます。間違いがある場所には赤線でエラーを表示してくれます。正しく入力すると赤線のエラーが消えるので、とてもわかりやすく校正できます。

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

zenkaku

全角スペースを可視化してくれるプラグインです。何回確認しても記述は間違っていないはずなのに、エラーが出てしまった結果、原因が全角スペースだったなんて…。

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

zenkaku

CSS Peek

HTMLファイルから適用しているCSSを表示して、その場で編集または、ファイル先へ飛ぶことができます。記述したファイルを探す手間を省くことができますので、CSSやSCSSのファイル数が多くなった時はとても便利かと思います。

タグをクリックすると適用されているスタイルを確認することができ、そのまま編集ができます。右側に対象ファイルも表示されるので、そちらをクリックするとファイルに飛ぶこともできるのでそちらも便利です。

htmltagwrap

選択したタグを親要素で囲ってくれるプラグインです。ある程度タグを記述した後にやはりdivで囲いたくなることは多々あると思います。タグをつけ足すこと自体は簡単ですが、インデントが少し大変になってきますよね。こちらは選択したタグのインデントも自動的に行ってくれます。

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

htmltagwrap01
htmltagwrap02htmltagwrap01

Code Spell Checker

こちらはスペルチェックを行ってくれるプラグインです。クラス名をつける時など、念のために確認しておこうかな、という作業がなくなります。

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

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

code-spell-checker01
code-spell-checker02

4.削除方法

これまでインストール方法を紹介しましたが、似たようなプラグインをインストールした際や、やはり違うな。と思った時の削除方法をご紹介いたします。

まずは削除したいプラグインの名前を検索窓に入力します。選択するとアンインストールの文字が出てきますのでこちらをクリックします。

『再読み込みが必要です』をクリックして完了です。

5.VSCodeのショートカットキー(作業効率アップ!)

vscodeショートカットキー

こちらではVSCodeのショートカットキーについてご紹介いたします。

コードを書きながらマウスを使うのは結構大変ですし、時間もかかってしまい、さらには開始タグと閉じタグの間にカーソルを合わせるのもなかなか神経を使うと思います。そんな時に便利なのがショートカットキーです。

初めは覚えるのが大変かもしれませんが、覚えると間違いなく作業スピードが上がります!一つずつでもいいので覚えていきましょう。

Ctrl+X選択している行の削除をしてくれます。
Alt+カーソルキー選択している行を丸ごと移動してくれます。これはとても便利です。
Alt+Shift+カーソルキー選択している行を丸ごとコピーして貼りつけます。
Ctrl+shift+enter上に行を作ることができます。
Ctrl+[]選択したところをインデント、インデントを削除することが可能です。
Home行の先頭にカーソルを移動できます。
End行の末尾にカーソルを移動できます。
Ctrl+homeファイルの先頭に移動します。
Ctrl+endファイルの末尾に移動します。
Ctrl+カーソルキー上下カーソルの位置はそのままで画面をスクロールできます。
Ctrl+K+Sショートカットキーの一覧です。覚えるまではここで確認してみてください。

6.まとめ

今回紹介したプラグインで作業効率を上げることはできましたでしょうか?

簡単にインストールができる、さらにアンインストールも簡単にできるので入れない手はないですよね!

VSCodeには今回紹介したプラグイン以外にもいろいろなプラグインがありますので、ぜひ自分の用途に合ったプラグインを探してみてください!

PAGE TOP