Visual Studio Codeのおすすめ拡張機能【初心者向け】

この記事では、あんまりコード書くのに慣れてない人や、手間を減らす感じの便利な拡張機能をまとめました。

なお、拡張機能のインストールの仕方はこちらからどうぞ。
Visual Studio Code拡張機能のインストール方法

では、ここから拡張機能の紹介です。

Visual Studio Codeのおすすめ拡張機能

これからコーディングをはじめるという人が、最初に入れておくとよいVSCodeの拡張機能は以下の6つです。

  • Japanese Language Pack for Visual Studio Code
  • Code Spell Checker
  • Auto Rename Tag
  • Bracket Pair Colorizer 2
  • Path Autocomplete
  • IntelliSense for CSS class names in HTML

Japanese Language Pack for Visual Studio Code

VSCodeを日本語表示にできます。

これはお好みでどうぞ。僕は英語になれたいのであえて入れてません。

公式ページ:Japanese Language Pack for Visual Studio Code

Code Spell Checker

スペルミスっぽいのがあると知らせてくれます。

公式ページ:Code Spell Checker

Auto Rename Tag

タグを修正すると、閉じタグも自動的に修正してくれます。

公式ページ:Auto Rename Tag

Bracket Pair Colorizer 2

ペアになっている括弧を同色にしてくれます。入れ子が深いときとかとても役立ちます。

公式ページ:Bracket Pair Colorizer 2

Path Autocomplete

パスの入力を補助してくれます。

画像ファイルとか入れるときにパスやファイル名を調べなくて済むのでとても便利です。

公式ページ:Path Autocomplete

IntelliSense for CSS class names in HTML

htmlタグにクラスを付ける時に、CSSファイルにあるクラス名を補完してくれます。

公式ページ:IntelliSense for CSS class names in HTML

ここまでが、まず最初に入れておきたいVSCodeの拡張機能です。

Visual Studio Codeのおすすめ拡張機能2

ついでに、ちょっとコーディングに慣れてきたら、入れておきたいVSCodeの拡張機能も紹介しておきます。

  • Live Sass Compiler
  • Live Server
  • WordPress Snippets
  • EJS Language Support

Live Sass Compiler

複数のSassファイル(CSSを効率的に書けるファイル)を一つのCSSファイルにまとめてくれます。

SassファイルでCSSを書くと効率的なのですが、ブラウザはSassファイルを読み込めないので、SassファイルをCSSファイルに変換しないといけません。

それを自動的に行ってくれるのがLive Sass Compilerです。

ちょっとコーディングができるようになったら、確実に使うことになると思います。

公式ページ:Live Sass Compiler

Live Server

HTMLやCSSファイルを更新すると、自動でブラウザを更新してくれます。

自分でブラウザのリロードをしなくてすむので効率的です。

これは、1つ前に紹介した「Live Sass Compiler」をインストールすると自動的に入ってきます。

どちらもRitwick Deyさんが作成されています。

公式ページ:Live Server

WordPress Snippets

WordPressのテンプレートタグを補完してくれます。

手打ちのミスをなくすためにもWordPressで開発をするなら入れておきたい拡張機能です。

公式ページ:WordPress Snippets

EJS Language Support

VSCodeでEJSに対応するための拡張機能です。

デフォルトでVSCodeはELSに対応していないので、必要な時にインストールしてください。

公式ページ:EJS Language Support

拡張機能を使って効率的にコーディングしよう

Visual Studio Codeのおすすめ拡張機能の紹介は以上です。

最初のうちはあまり実感がわかないかもしれませんが、コードを書いているうちに便利さがわかってくると思います。

ミスをなくし、効率的なコーディングをするためにも拡張機能を活用しましょう。

VSCodeについて、備忘録をかねて以下の記事にまとめています。よかったら↓こちらからご覧ください。