Web制作で便利なVSCodeの拡張機能

Live Server
Live Sass Compiler
PHP Intelephense
WordPress Snippet
JS & CSS Minifier (Minify)
IntelliSense for CSS class names in HTML

Web制作でよく使っているVSCodeの拡張機能(プラグイン)について紹介します。Web制作で役立つ拡張機能を探している人は参考にしてください。

拡張機能は個別に設定項目があります。設定したときは理解していても、後で見ると内容が分からなくなるので、個人的な備忘録として記事を書いています。

Live Server
Live Sass Compiler
PHP Intelephense
WordPress Snippet
JS & CSS Minifier (Minify)
IntelliSense for CSS class names in HTML

Live Server

ライブリロード機能を持つローカルサーバーを立ち上げてくれる拡張機能です。HTMLを編集した後、リロードを押す必要がなくなり自動でページが更新されます。

使い方はCtrl+Oでフォルダを開いてGo Liveを押すだけ。とても簡単で設定も特に必要ありません。

Web制作ではデザインカンプからHTMLを作成するときに使います。Live Serverは他のライブリロード系拡張機能のベースになっていたりもするのでぜひ導入しておくことをおすすめします。

Live Sass Compiler

ライブリロード機能を備えたSASS・SCSSのコンパイラです。導入するだけでSASSが使えるようにります。CSSファイル出力時に圧縮すること可能。主な機能は次の通りです。

SASS・SCSSのコンパイル
出力時のファイル圧縮(style.min.css)
コンパイル時のライブリロード
ベンダープレフィックスの自動追加

ライブリロードを使うには上で紹介したLive Serverが必要です。

Live Sass Compilerの設定

設定はsettings.jsonに書き込みます。settings.jsonの場所・編集方法については設定をsettings.jsonに記述するを参照してください。

ここではよく使用するLive Sass Compilerの設定を紹介します。

設定名	説明
liveSassCompile.settings.formats	出力フォーマット・出力ファイル名・出力パスの設定
liveSassCompile.settings.generateMap	.mapファイルを出力するかどうか。デフォルト(true)
liveSassCompile.settings.autoprefix	自動ベンダープレフィックスの設定

すべての設定はLive Server Compiler settings doc、自動ベンダープレフィックスの記述方法はbrowserlistを参照。

以下はsettings.jsonへの記入例です。

}
  //Live Sass Compiler
  "liveSassCompile.settings.formats": [
    {
      //expanded, compact, compressed or nested
      "format": "compressed",
      //出力ファイルの拡張子
      "extensionName": ".css",
      //出力先のパス
      "savePath": null
    }
  ],
  //.mapファイルの生成
  "liveSassCompile.settings.generateMap": false,
  //ベンダープレフィックスの自動追加設定(ブラウザシェア1%以上かつIE11を含めない)
  "liveSassCompile.settings.autoprefix": [
    "> 1%",
    "not IE 11",
  ],
}