この記事では、あんまりコード書くのに慣れてない人や、手間を減らす感じの便利な拡張機能をまとめました。
なお、拡張機能のインストールの仕方はこちらからどうぞ。
→Visual Studio Code拡張機能のインストール方法
では、ここから拡張機能の紹介です。
Visual Studio Codeのおすすめ拡張機能
これからコーディングをはじめるという人が、最初に入れておくとよいVSCodeの拡張機能は以下の６つです。
- 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
スペルミスっぽいのがあると知らせてくれます。
コードは1文字間違うだけで動かなくなるので結構役立ちます。
公式ページ：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のおすすめ拡張機能２
ついでに、ちょっとコーディングに慣れてきたら、入れておきたい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のおすすめ拡張機能の紹介は以上です。
最初のうちはあまり実感がわかないかもしれませんが、コードを書いているうちに便利さがわかってくると思います。
ミスをなくし、効率的なコーディングをするためにも拡張機能を活用しましょう。
