VSCode（Visual Studio Code）は拡張機能を追加することで、より便利に利用できます。
しかし初心者の方は、
という方も多いと思います。
今回は、実際に私が利用しているVSCodeのおすすめ拡張機能を紹介します。
1. Japanese Language Pack for Visual Studio Code
VSCodeを日本語化する拡張機能です。
インストールするだけでメニューや設定画面が日本語になります。
初心者の方は最初に導入しておくのがおすすめです！
2. Prettier
コードを自動で整形してくれる拡張機能です。
HTMLやCSS、JavaScriptを書いているとインデントが崩れることがあります。
Prettierを使うとワンクリックで見やすいコードに整形できます。
3. Minify
HTML・CSS・JavaScriptを圧縮できる拡張機能です。
不要な空白や改行を削除し、ファイルサイズを小さくできるため、ページ表示速度の向上につながります！
公開用ファイルの作成時に便利です。
簡単に方法を下記記事でまとめているのでご参照ください！
4. PHP Server
PHPファイルをローカル環境で簡単に実行できる拡張機能です。
XAMPPなどを使わなくても簡易的な確認ができます。
PHP学習中の方におすすめです。
設定方法は下記記事をご参照ください！
5. Git Graph
Gitの履歴を視覚的に確認できる拡張機能です。
GitHubを使用して管理している方はこれを入れるとすごく楽です！
ブランチやコミットの流れがグラフで表示されるため、とても分かりやすくなります。
コマンド操作をせずに同期したりできるので、初心者にとってとても便利な拡張機能だと思います。
6. Claude Code（有料）
AIを活用しながら開発できるツールです。
Claude Codeは無料では使用できず、月に4000円弱かかるProプランから使用できるので、実質有料の拡張機能になります。
少しお金がかかりますが、コード作成や修正、エラー解析などをサポートしてくれるのでかかせない存在です。
最近ではChatGPTと並んで利用している開発者も増えています。
詳しい導入方法はこちらの記事で解説しています。
また、モデル確認方法がわかりにくかったのでこちらの記事もご覧ください。
7. Print
VSCodeのコードを印刷できる拡張機能です。
プログラミング学習中にコードを紙へ印刷したい方に便利です。
私は学習ノートへ貼り付けるためによく利用しています。
詳しい使い方はこちらの記事で解説しています。
8. Live Server
HTMLを保存すると自動でブラウザが更新されます。
ページ表示確認する時に便利です！
さらに入れておきたいおすすめ拡張機能
私自身はまだ導入していませんが、よくおすすめされている拡張機能です。
Error Lens
エラー箇所を分かりやすく表示してくれます。
Auto Rename Tag
HTMLタグの開始タグと終了タグを自動で同期してくれます。
まとめ
VSCodeは拡張機能を導入することで作業効率が大きく向上します。
上記拡張機能を使ってみてください！
特にWeb制作やPHP学習をしている方にはおすすめです。
少しずつ自分に合った環境を整えて、快適な開発環境を作っていきましょう。
