このページではVS codeの便利な拡張機能について紹介しております。
Laravelを学習する場合はもちろんですが、HTMLやCSSなどを学習する際にも使用できる拡張機能を紹介しております。
このページは随時更新していきますので、便利な拡張機能を発見次第、追加していきます。
特におすすめの拡張機能は赤文字で表示しておりますので、これからLaravelを学習していく方はぜひとも導入をご検討ください。
VS Code UI
| パッケージ名 |
概要 |
| Japanese Language Pack |
VS Codeを日本語化する |
| vscode-icons |
ファイルにアイコンが表示されるようになる |
| Material Icon Theme |
ファイル・フォルダのアイコンを分かりやすく表示 |
| Monokai-Japan Theme |
日本語環境向けに最適化されたMonokaiテーマで視認性向上 |
| indent-rainbow |
インデントを色分けし、ネストを視覚的に把握 |
Material Icon Theme(モダンデザイン)とvscode-icons(クラシカルデザイン)はどちらかお好みで1つ追加するのがおすすめです。
HTML / CSS
| パッケージ名 |
概要 |
| Prettier – Code formatter |
コードを自動整形し、可読性を高める |
| Live Server |
HTML・CSSの変更を即ブラウザに反映 |
| Live Preview |
VS Code内でHTML・CSSのプレビュー表示 |
| Auto Close Tag |
開始タグ入力時に自動で閉じタグを補完 |
JavaScript
| パッケージ名 |
概要 |
| Emmet JSS |
JSS/JSXでEmmetを活用し、タグ入力を高速化 |
| Better Comments |
コメントを色分けして重要度や意図を見える化 |
| styled-jsx |
Next.js標準のCSS-in-JSをサポート |
PHP / Laravel
| パッケージ名 |
概要 |
| PHP Intelephense |
PHPの補完・定義ジャンプ・静的解析を強化 |
| Laravel Blade Snippets |
Blade構文の補完でビュー作成を効率化 |
| Laravel Extra Intellisense |
EloquentやFacadeの補完を強化 |
| DotENV |
.envファイルのシンタックスハイライト（Laravel向け） |
| PHP Debug |
Xdebug連携でブレークポイントを使ったデバッグ |
| PHP CS Fixer |
PSR規約に沿って自動整形し、統一された書き方に |
| PHP DocBlocker |
PHPDocコメントを自動生成し、補助情報を整備 |
| Better PHPUnit |
VS CodeからPHPUnitテストを実行・確認 |
Git
| パッケージ名 |
概要 |
| GitLens |
変更履歴・作者表示でコード理解を深める |
| Git Graph |
ブランチ・コミット履歴をグラフ表示 |
| Git History |
ファイルや行単位の変更履歴をGUIで確認 |
その他
| パッケージ名 |
概要 |
| GitHub Copilot |
AI補完で学習時の試行錯誤を支援 |
| IntelliCode |
型・関数・変数の補完精度が向上 |
| Auto Import |
未インポートの関数や型も補完対象に |
| Path Intellisense |
import文の補完が強化される |
| ErrorLens |
エラーや警告を行全体に強調表示し、見逃しを防ぐ |
| Trailing Spaces |
行末スペースを可視化・削除で差分の無駄を防ぐ |
| Zenkaku |
全角スペースを強調表示し、意図しないエラーを回避 |
| SQLTools |
DB接続・クエリ実行でSQL理解を促進 |
| Thunder Client |
VS Code内でAPIリクエストを手軽にテスト |
| YAML (Red Hat) |
YAMLファイルの補完・Lint・スキーマ検証 |
次章：#3 GitとGithubについて に進む
