これからVSCodeをはじめる人におすすめするプラグインをまとめました。
まずは導入したいプラグイン
Japanese Language Pack for Visual Studio Code
VSCodeの表記を日本語に変換してくれる。
インストールURL
Japanese Language Pack for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja
使い方
・インストールしてVSCodeを再起動
HTML,CSS開発に便利なプラグイン
Highlight Matching Tag
選択したものに対応する開始タグまたは閉じタグをハイライト（下線）してくれる。
phpファイルにも対応している。
インストールURL
Highlight Matching Tag
https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
使い方
・「Highlight Matching Tag」をインストール
Auto Rename Tag
タグを変更した際に、それに対応する開始タグ・終了タグも連動して自動変更される。
インストールURL
Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
使い方
・「Auto Rename Tag」をインストール
Live Preview
VSCodeでサイトのプレビュー画面が見れる。
ファイル保存をせずに、リアルタイムでプレビューを更新してくれる。
JavaScript開発で便利なデバッグモードプレビューが可能。
※phpでは使えない。
インストールURL
Live Preview
https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server
使い方
こちらの記事に記載しています！
PHP開発に便利なプラグイン
PHP Intelephense
PHPの構文チェックとコード補完機能がある。
PHPコードを自動フォーマットしてくれる。
インストールURL
PHP Intelephense
https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client
使い方
・「PHP Intelephense」をインストールして有効にする
フォーマッターについてはこちらの記事にも記載しています！
Sass開発に便利なプラグイン
Live Sass Compiler
Sassを自動でコンパイルしてくれる。Dart Sassもコンパイルできる。
インストールURL
Live Sass Compiler
https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass
（作者：Glenn Marks）
使い方
こちらの記事に記載しています！
あるとより便利なプラグイン
Project Manager
一覧から選ぶだけで、複数のプロジェクトを簡単に切りかえられる。VS Codeの標準機能にあるワークスペースよりもシンプル操作。
インストールURL
Project Manager
https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
使い方
・コマンドパレットを開き、「Project Manager: Save Project」を入力して選択またはEnterで実行
・「Project Name」の入力欄がでるので、任意のプロジェクト名を入力してEnterで実行
・Project Managerのサイドバーに登録したプロジェクト名が追加される
・プロジェクト名をクリックすることで複数のプロジェクトを切り替え可能。また、プロジェクト名の右側の「Open in New Window」アイコンをクリックすると新規ウィンドウでプロジェクトを開くことができる。
vscode-icons
VSCodeのファイルエクスプローラーに表示される各ファイルやディレクトリのアイコンを変更するプラグイン。
インストールURL
vscode-icons
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
使い方
・「vscode-icons」をインストール
・ドロップダウンリストから「VSCode Icons」を選択
選択を逃した場合は、「vscode-icons」のプラグインページを開き、「ファイルアイコンのテーマを選択」をクリックして選択しなおす
