VSCode (Visual Studio Code) おすすめの拡張機能 便利なプラグイン

その他・ツール類

VSCode 導入しておくと便利な拡張機能・おすすめプラグイン

VSCodeはインストールした初期状態でも高機能なテキストエディタでそのまま利用できますが、いくつかのプラグインを入れることでより便利に使えるようになります。

今回は、HTML/CSSを学び始めたばかりの方やコーディング作業を効率化したい方のために、おすすめのプラグインをいくつかご紹介します。

VSCodeは開発が進んでおりデフォルトでも十分高機能になっているため、それほど多くのプラグインを入れる必要はなくなってきています。

とはいえ、作業を効率化するためにプラグインはあったほうが便利なので、最低限必要な機能に絞ってご紹介していきます。

「Japanese Language Pack for Visual Studio Code」

VSCodeは初期状態では英語表示になっています。「Japanese Language Pack for Visual Studio Code」は、VSCodeのUI(ユーザーインターフェース)を日本語化してくれるプラグインです。

VSCodeをインストール・設定したら、まず初めにこのプラグインを入れます。英語ができる方はプラグインを入れずそのまま使うこともあるでしょう。

「Live Server」

「Live Server」は、ローカル上(ご自身のパソコン)でブラウザをプレビューする機能を持つプラグインです。

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

「Live Server」 を使うと ボタン一つで変更の確認ができるので、コーディングが捗ります。作業の効率化に必須のプラグインでしょう。

VSCode画面下のステータスバーにある「Go Live」ボタンを押すと、ブラウザが立ち上がり、ページをブラウザで閲覧することができます。

VSCode画面下、ステータスバーにある「Go Live」ボタンを押すと…

Live Server機能でブラウザで見た様子
Webブラウザが表示される

SASS/SCSSを利用の場合

SASS/SCSSを利用してCSSを記述する方は、Live Sass Compilerも入れておくと便利です。

Visual Studio Code内でsass/scssファイルをcssファイルにリアルタイムでコンパイルしてくれます。

「HTMLHint」

「HTMLHint」は、記述ミスを教えてくれるプラグインです。波線で表示された箇所にマウスを合わせると、エラーの理由と何行目が間違えているかを教えてくれるので親切です。

全てのエラーを教えてくれるとは限らないので、信頼しすぎ過ぎは禁物ですが、エラーを見つけやすくなるので便利です。

「bad.html」ファイルに3か所のミスがあること、その場所と理由を教えてくれている

「HTML CSS Support」

「HTML CSS Support」は、HTMLを書くときにクラス名の候補を出してくれるプラグインです。

入力した文字に該当するクラス名が表示されるので、スペルミスを防ぐことができます。コーディングを早くする手助けにもなります。

CSSファイルにクラスを作っておくと…

CSSファイルに記述しているクラス名を入力候補として補完してくれます。

クラス名「practice」の「p」を打ち込んだだけでクラス名が表示される

「CSS Peek」

「CSS Peek」は、HTMLコード上でCSSのプロパティ(値)を表示させるプラグインです。

HTMLファイルに書かれたクラス名にマウスを合わせ「Ctrl」キーを押すとスタイルを確認できます。そのままクリックすると、CSSファイルのクラスが書かれた箇所にジャンプします。

HTMLタグにどんなスタイルが当たっているのか思い出せないとき、わざわざCSSファイルを開いて探す手間がなく、コーディングの効率化につながります。

クラス名にマウスを合わせ「Ctrl」キーを押すとCSSのプロパティが表示される

「Auto Rename Tag」

「Auto Rename Tag」 は、開始タグまたは閉じタグの中を変えると、対になってるタグも自動的に変えてくれるプラグインです。記述忘れを防止することができます。

開始タグ(または終了タグ)を書き変えると対になっているタグも変わる

まとめ

まとめです。今回はVisual Studio Codeを初めて使う人向けにおすすめの拡張機能・プラグインをいくつかご紹介しました。

便利なプラグインはたくさんありますし、記述する言語によっては追加で導入しておきたい拡張機能もあるでしょう。

必要が出てきたときに目的に応じたプラグインを探しましょう。

今回は以上になります。最後までご覧いただきありがとうございました。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressホームページの作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2021年版】WordPress(ワードプレス)の使い方総まとめ

WordPress(ワードプレス)の使い方  総まとめ版

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-その他・ツール類