コーディングにおすすめのVScodeの拡張機能一覧

HTML.CSSコーディングにおいて、入れておくと便利な拡張機能を紹介します。

VScodeの拡張機能の入れ方はこちらの検索窓に以下の名前を入れて、インストールを押します。

おすすめのプラグイン一覧

  • Live Sass Compiler
    Sassファイル(scssファイル)のコンパイル(scssファイルをcssファイルに自動で変換してくれる)を行ってくれる拡張機能です。 Sass(=scss=サス)については下記で説明させて頂きます。 本記事でのコードの解説はscssファイルでのコーディングを前提としていますので、ご自身の環境でまだscssファイルのコンパイル環境がない場合、本拡張機能を導入するのが良いかと思います。
  • Live Server
    htmlファイル、cssファイルを更新した時に、自動でブラウザを最新に更新してくれます。 簡単にいうとindex.htmlファイルをブラウザで開きながらコーディングすると、ファイルを変更するたびに手動でブラウザを更新しないと最新情報が表示されませんが、Live Serverでブラウザを表示するとファイルを変更した時に自動でブラウザも更新されます。 便利です。必須ですd( ̄  ̄)
  • Auto Close Tag
    htmlのとじタグを自動で記述してくれます。 例えば<div>と書いた時に</div>を自動で生成してくれます。 便利です。あった方が良いです。
  • Prettier – Code formatter
    html,css,scssでコードの整形をワンクリックでできるようになります。 インデントをつける、つけない。タブかスペースかなど論争はありますが、納品するコードが汚いはありえないことなので、普段から綺麗にコードを書くためにコーディングが一区切りしたタイミングでインデントを整理する癖をつけた方が良いかと思います!
  • W3C Validation
    HTMLの文法チェッカーです。 例えば<section>タグの中に<h1 ~ 6>の見出しタグがない時に警告を出力してくれます。 この拡張機能だけで全てまかなえるものでもないのが辛いところですが、入れておいて損はないです。
  • zenkaku
    全角スペースを強調表示してくれます。 基本的にインデントやタグ内のスペースは半角スペースで記述しましょう。 全角スペースが混じっているせいでうまくWebサイトが表示されないなんてことも稀にあるので、あった方が良いかと思います。