これだけあれば大丈夫!コーダーに必要なVSCodeプラグイン

VSCodeのインストール・設定

VSCode(Visual Studio Codeの略)は更新が活発で、今まで使っていたプラグイン(拡張機能)が不要になるのが早い!ので作業周辺の情報収集や見直しは定期的にしたほうがいい。入れているプラグインが不具合の原因になる可能性もある。

プラグインは整理しておかないと後で「これ何のために入れたんだっけ?」となることが私はよくあるのでメモに取っておくようにしている。

プラグインのインストール方法

プラグインのインストール方法は簡単。まずプラグインのアイコンをクリックしてサイドバーを開く。

プラグインのアイコンをクリックするとサイドバーが開く

もしプラグインのアイコンが見当たらない場合は、画面右上にあるレイアウトのカスタマイズのアイコンをクリック(またはメニュー→表示→外観)

画面右上の一番端にあるアイコンからレイアウトのカスタマイズができる(メニューからもできる)

レイアウトのカスタマイズが開いたら、アクティビティバー/プライマリサイドバーを表示にする。

非表示になっていると、目みたいなマーク(?)に斜線が入っている

サイドバーが開いたら、入力欄にプラグイン名やキーワードなど入力して検索。

入力欄にプラグイン名などを打って検索

入力すると、それに関連したプラグインの一覧が表示される。

入力欄にjapanの「jap」まで入力したところで日本語パックの候補が表示された

プラグインを選んだら「インストール」と書かれた青色のボタンをクリックしてインストール完了。

どちらのインストールボタンをクリックしてもよい

HTML/CSSコーディングに必要な7つのプラグイン

必ずしもこれ全部入れなきゃいけないわけではないが、これだけ入れておけば快適にコーディングできるプラグインたち。

「Japanese Language Pack for Visual Studio Code」

「Japanese Language Pack for Visual Studio Code」は、VSCodeと同じくMicrosoft社が開発したプラグイン。日本語表示がいい人は絶対必要なやつ。

ただし日本語のプラグインに限っては、以下の画面のようにVSCodeの初期設定で入れてしまう場合がほとんどだろう。

VSCodeのインストール・設定
VSCodeインストール後の最初の画面

「Live Server」

「Live Server」は、ローカル(インターネット上ではなくパソコン上)でサイトを確認表示したいときに便利な、プレビュー機能を持つプラグイン。

プラグインを使わなくてもブラウザを表示して確認することはできるが、コーディングしたものを変更や保存のたびに、ファイルを開いたりページをリロードして確認するのは大変。「Live Server」を使えばリアルに変更の確認ができて、コーディング作業が捗るので必須。

画面右下にある「Go Live」ボタンを押すとウェブブラウザが立ち上がりプレビューできる

「HTMLHint」

「HTMLHint」は、記述ミスを教えてくれるプラグイン。もちろん全てのエラーを教えてくれるとは限らないので、自分で気をつけながらコーディングすることが大事だけど、入れておくと安心だ。

「HTML CSS Support」

「HTML CSS Support」は、HTMLコーディングするときにクラス名(CSSファイルに記述してあるクラス名)の候補を表示してくれるプラグイン。コーディングの効率化と、スペルミスでスタイルが反映されないのを防ぐことに繋がるので結構重要。

「CSS Peek」

「CSS Peek」は、HTMLファイルでさっとスタイルを確認できるプラグイン。わざわざCSSファイルを開いて探さなくても、HTMLファイル上でクラスを右クリック(またはF12キー)で確認したり変更したりできるので便利。

これだけあれば大丈夫!コーダーに必要なVSCodeプラグインとエメット

「Auto Rename Tag」

「Auto Rename Tag」は、開始タグまたは閉じタグを変えたとき、対になってるタグ名も書き換えてくれるプラグイン。ありがちな記述ミスを防げる。

「Live Sass Compiler」

「Live Sass Compiler」は、SASS/SCSSファイルをボタンひとつでCSSファイルにコンパイルしてくれる、初心者にはとってもありがたいやつ。最初のころはがんばってgulp使ってみたり、他のGUIツールなども使ってみたが、ずっとこれのお世話になりっぱなし。

New Live Sass Compiler

見た目がほとんど同じだけど旧Live Sass Compilerと間違えないように注意。よく見ると名前のところが違う。

旧Live Sass Compiler

その他、これはVSCodeのプラグインではないが、コンパイルするのにPrepros(プリプロス)というアプリも便利。英語のみだが、コンパイルだけでなく、スマホからQRコードを読み込んで実機確認できたり、エラーを教えてくれたりと親切で機能が豊富。初学のころよくお世話になったものだ。

「Prepros」公式サイト

コーディングをしていると何かと英語でエラーが表示されるので、エラーが怖いなと思うかもしれないが(私のこと…)、別に無理して英語を覚えようとしなくてもスマホの翻訳アプリを活用すれば便利だし、やる気低下に繋がらなくて済むので頼っちゃうのも良いかと思う。

プラグインが不要になったら削除する方法

プラグインが不要になったときは「アンインストール」と書かれた青色のボタンをクリック。

「アンインストール済み」になればOK