コーディングをするうえで、これがあると便利だよっていうVSCodeの拡張機能を紹介したいと思います。
Japanese Language Pack for Visual Studio Code
ど定番の拡張機能で、日本語環境で使うなら必要です。
Microsoftの提供です。
メニューなど、ユーザーインターフェイス(UI)を日本語で使いやすくしてくれます。
![](https://369code.tokyo/wp-content/uploads/2022/10/s156.jpg)
PHP Intelephense
PHPを使う人には必須かもしれない拡張機能。
コード補完とコードチェック、コードの参照や移動をしてくれます。
サクサク動作するのでおすすめです。
![](https://369code.tokyo/wp-content/uploads/2022/10/s157.jpg)
PHP Debug
PHPのデバッグ作業に必須の拡張機能。
XAMPPの設定でXdebugが使用できるようになっている必要があります。
設定がやや面倒ですが、できてしまえば、これほど使いやすいデバッグツールは無いかも。
![](https://369code.tokyo/wp-content/uploads/2022/10/s158.jpg)
PHP DocBlocker
Dock コメントの入力補完。
@param、@returnなどの自動補完。
![](https://369code.tokyo/wp-content/uploads/2022/10/s159.jpg)
Visual Studio IntelliCode
Microsoftが提供しているコード補完の拡張機能。
C#, C++, TypeScript/JavaScriptをサポートしています。
![](https://369code.tokyo/wp-content/uploads/2022/10/s160.jpg)
WordPress snippets
WordPressのファンクション・クラス・定数を入力補完してくれる拡張機能。
WordPressを触る人なら入れておきたい。
![](https://369code.tokyo/wp-content/uploads/2022/10/s161.jpg)
Format HTML in PHP
この拡張機能は、PHPファイル上で書かれたHTMLタグのフォーマットを行ってくれます。
![](https://369code.tokyo/wp-content/uploads/2022/10/s162.jpg)
Laravel Snippets
Laravelでの開発を行うなら必須の拡張機能。
コード補完・入力補助等、これがあると楽ちんです。こんな良いものがあったなんて最近まで知りませんでした。今はもうこれを使わないことが考えられない感じ。
![](https://369code.tokyo/wp-content/uploads/2022/10/s163.jpg)
Laravel Extra Intellisense
Laravelの入力補完・参照ができる拡張機能。
Laravel Snippets とセットで使用すると最強。
書き間違いが無くなる。
![](https://369code.tokyo/wp-content/uploads/2022/10/s164.jpg)
Laravel blade snippets
Laravelのbladeファイルの入力補完をしてくれる拡張機能。
次のBlade Spacerとセットで使うと良いかも。
![](https://369code.tokyo/wp-content/uploads/2022/10/s165.jpg)
Laravel Blade Spacer
LaravelのBladeファイルで使用するタグの入力補完。
意外と使える。
![](https://369code.tokyo/wp-content/uploads/2022/10/s166.jpg)
DotENV
見づらいENVファイルをカラフルにしてくれる。
![](https://369code.tokyo/wp-content/uploads/2022/10/s169.jpg)
Auto Rename Tag
HTMLでタグを修正するとき、同時に対のタグも直してくれる。
開始タグをdivからpに変えたとすると、閉じタグもpに自動で直してくれる。
これが非常に便利。
![](https://369code.tokyo/wp-content/uploads/2022/10/s167.jpg)
CSS Peek
CSS上で、HTMLのタグに使用されているスタイルを簡単に確認できる。
タグのクラス名や属性値にマウスを当てるだけで参照できる。
![](https://369code.tokyo/wp-content/uploads/2022/10/s168.jpg)
HTML CSS Support
HTML/CSSのIDとclass属性の入力補完をしてくれる拡張機能。
![](https://369code.tokyo/wp-content/uploads/2022/10/s170.jpg)
HTML Snippets
HTMLのタグの入力補完をしてくれる拡張機能。
![](https://369code.tokyo/wp-content/uploads/2022/10/s171.jpg)
IntelliSense for CSS class names in HTML
CSSにあるクラス名やID名をHTMLタグに入力する際、入力補完してくれる拡張機能。
書き間違いが無くなります。
![](https://369code.tokyo/wp-content/uploads/2022/10/s172.jpg)
Material Icon Theme
エディター左ブロックのファイル一覧のツリーが、カラフルで見やすくなります。
![](https://369code.tokyo/wp-content/uploads/2022/10/s173.jpg)
Setting.json の変更で変えれるもの
設定のsetting.jsonを変更することで、VSCodeの設定を変更できます。
//setting.json
"files.autoSave": "afterDelay"
いきなりPCが落ちたとか、間違ってウィンドウを閉じたときも安心。
ファイルの変更部分があっただけで保存してくれます。
"editor.bracketPairColorization.enabled": true,
対のタグや{}の色を同色にしてくれます。見やすい。
![](https://369code.tokyo/wp-content/uploads/2022/10/s174.jpg)
"php.validate.executablePath": "D:\\xampp\\php\\php.exe",
PHPでデバッグをするのであれば、PHPの実行パスの場所を記入します。
"workbench.editor.enablePreview": false,
通常、VSCodeは、ファイルツリーでファイルをクリックすると、エディタ上に斜め文字のファイル名のウィンドウで開きますが、違うファイルをクリックすると、元のファイルが消えてその場所にクリックしたファイルが開いてしまいます。(ダブルクリックで開くと普通に開きますが。)
これを防ぐために、プレビューモードはオフにします。
"workbench.tree.renderIndentGuides": "always",
"workbench.tree.indent": 16,
左サイドのファイルツリーにインデントを入れてくれます。ファイル構造が見やすくなります。
あと小ネタですが、PHPはコードに全角空白が含まれているとエラーになることがあります。
FontにRicty Diminished を使うと全角空白が点線の四角になるので、間違って入力されたとき探しやすいので便利です。
![](https://369code.tokyo/wp-content/uploads/2022/10/s175.jpg)
フォントの変更など、エディタに関する設定は、左下のギアマークをクリックして、設定を選びます。
タブサイズの変更や、ファイル末尾の空白削除など色んな設定が行えます。
![](https://369code.tokyo/wp-content/uploads/2022/10/s176.jpg)
いろいろ設定して使いやすくしましょ。