脱初心者備忘録

VSCodeに入れたら便利な拡張機能

コーディングをするうえで、これがあると便利だよっていうVSCodeの拡張機能を紹介したいと思います。

Japanese Language Pack for Visual Studio Code

ど定番の拡張機能で、日本語環境で使うなら必要です。
Microsoftの提供です。
メニューなど、ユーザーインターフェイス(UI)を日本語で使いやすくしてくれます。

PHP Intelephense

PHPを使う人には必須かもしれない拡張機能。
コード補完とコードチェック、コードの参照や移動をしてくれます。
サクサク動作するのでおすすめです。

PHP Debug

PHPのデバッグ作業に必須の拡張機能。
XAMPPの設定でXdebugが使用できるようになっている必要があります。
設定がやや面倒ですが、できてしまえば、これほど使いやすいデバッグツールは無いかも。

PHP DocBlocker

Dock コメントの入力補完。
@param、@returnなどの自動補完。

Visual Studio IntelliCode

Microsoftが提供しているコード補完の拡張機能。
C#, C++, TypeScript/JavaScriptをサポートしています。

WordPress snippets

WordPressのファンクション・クラス・定数を入力補完してくれる拡張機能。
WordPressを触る人なら入れておきたい。

Format HTML in PHP

この拡張機能は、PHPファイル上で書かれたHTMLタグのフォーマットを行ってくれます。

Laravel Snippets

Laravelでの開発を行うなら必須の拡張機能。
コード補完・入力補助等、これがあると楽ちんです。こんな良いものがあったなんて最近まで知りませんでした。今はもうこれを使わないことが考えられない感じ。

Laravel Extra Intellisense

Laravelの入力補完・参照ができる拡張機能。
Laravel Snippets とセットで使用すると最強。
書き間違いが無くなる。

Laravel blade snippets

Laravelのbladeファイルの入力補完をしてくれる拡張機能。
次のBlade Spacerとセットで使うと良いかも。

Laravel Blade Spacer

LaravelのBladeファイルで使用するタグの入力補完。
意外と使える。

DotENV

見づらいENVファイルをカラフルにしてくれる。

Auto Rename Tag

HTMLでタグを修正するとき、同時に対のタグも直してくれる。
開始タグをdivからpに変えたとすると、閉じタグもpに自動で直してくれる。
これが非常に便利。

CSS Peek

CSS上で、HTMLのタグに使用されているスタイルを簡単に確認できる。
タグのクラス名や属性値にマウスを当てるだけで参照できる。

HTML CSS Support

HTML/CSSのIDとclass属性の入力補完をしてくれる拡張機能。

HTML Snippets

HTMLのタグの入力補完をしてくれる拡張機能。

IntelliSense for CSS class names in HTML

CSSにあるクラス名やID名をHTMLタグに入力する際、入力補完してくれる拡張機能。
書き間違いが無くなります。

Material Icon Theme

エディター左ブロックのファイル一覧のツリーが、カラフルで見やすくなります。

Setting.json の変更で変えれるもの

設定のsetting.jsonを変更することで、VSCodeの設定を変更できます。

//setting.json
"files.autoSave": "afterDelay"

いきなりPCが落ちたとか、間違ってウィンドウを閉じたときも安心。
ファイルの変更部分があっただけで保存してくれます。

"editor.bracketPairColorization.enabled": true,

対のタグや{}の色を同色にしてくれます。見やすい。

"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 を使うと全角空白が点線の四角になるので、間違って入力されたとき探しやすいので便利です。

フォントの変更など、エディタに関する設定は、左下のギアマークをクリックして、設定を選びます。
タブサイズの変更や、ファイル末尾の空白削除など色んな設定が行えます。

いろいろ設定して使いやすくしましょ。