Visual Studio Code（VSCode）は無料で使えるコードエディタの定番だ。素のままでも十分使えるが、拡張機能を入れることで作業効率が大幅に上がる。
この記事では「とりあえずこれだけ入れておけ」という初心者向けの拡張機能を厳選して紹介する。言語を問わず使えるものと、Web制作（HTML/CSS/JS）で役立つものを中心にまとめた。
Japanese Language Pack
まず最初に入れるべき拡張機能。VSCodeのUIを日本語化してくれる。インストールして再起動するだけでメニューやエラーメッセージが日本語になる。英語のままでも使えるが、最初のうちは日本語の方が迷わなくて済む。
Prettier – Code formatter
コードを自動で整形してくれる拡張機能。インデントのズレや改行の乱れを保存時に自動で直してくれる。HTML・CSS・JavaScript・JSONなど幅広い形式に対応している。チームで開発する場合はコードのスタイルを統一するためにほぼ必須と言える。
設定で「Format On Save」をONにしておくと、ファイルを保存するたびに自動整形されるので便利だ。
Live Server
HTMLファイルをブラウザでリアルタイムにプレビューできる拡張機能。ファイルを保存するたびにブラウザが自動でリロードされるので、HTMLやCSSを触っているときに毎回手動でリロードする手間がなくなる。
右下に表示される「Go Live」ボタンをクリックするだけで起動できる。Web制作の入門段階で特に重宝する。
Auto Rename Tag
HTMLのタグを編集するときに、開始タグを変更すると終了タグも自動で変わる拡張機能。たとえば<div>を<section>に変更すると、対応する</div>も自動で</section>になる。地味だが毎回手動で直す手間がなくなるので入れておいて損はない。
indent-rainbow
インデント（字下げ）を色分けして表示してくれる拡張機能。ネストが深いコードでも、どのブロックにいるのかが一目で分かるようになる。特にHTMLのネスト構造を追うときに役立つ。
Path Intellisense
ファイルパスを入力するときに自動補完してくれる拡張機能。CSSで画像のパスを書くときや、JavaScriptでファイルをimportするときなど、パスを手打ちする場面で候補を表示してくれる。タイプミスによるパス間違いが減る。
HTML CSS Support
CSSで定義したクラス名をHTMLファイルで補完してくれる拡張機能。class=""の中を入力するとき、すでに書いたCSSのクラス名が候補として出てくる。クラス名を覚えていなくても補完で選べるので便利だ。
GitLens
Gitの情報をVSCode上で視覚的に確認できる拡張機能。コードの各行に「誰がいつ何を変更したか」が表示されるようになる。Gitを使い始めたばかりでも、変更履歴が追いやすくなるのでオススメだ。
Material Icon Theme
ファイルの種類ごとにアイコンを表示してくれる拡張機能。HTMLファイルにはHTMLのアイコン、CSSにはCSSのアイコンというように、ファイルツリーが視覚的に分かりやすくなる。機能面での変化はないが、ファイルの見分けがつきやすくなり作業がしやすくなる。
ESLint
JavaScriptのコードの問題点を自動で検出してくれる拡張機能。文法エラーやよくある書き間違いをリアルタイムで指摘してくれるので、実行して初めてエラーに気づくという状況が減る。JavaScriptを書くなら入れておいて損はない。
まとめ
紹介した拡張機能をまとめる。
- Japanese Language Pack — UI日本語化
- Prettier — コード自動整形
- Live Server — ブラウザリアルタイムプレビュー
- Auto Rename Tag — HTMLタグ自動リネーム
- indent-rainbow — インデントの色分け
- Path Intellisense — ファイルパス補完
- HTML CSS Support — CSSクラス名補完
- GitLens — Git履歴の可視化
- Material Icon Theme — ファイルアイコン表示
- ESLint — JavaScript構文チェック
全部入れても動作が重くなるわけではないので、とりあえず全部インストールしてしまうのがオススメだ。使わなければ無効化すればいい。
Add comment