Visual Studio Code に拡張機能をインストールする

Index

• Index
• Summary
• 使用した資材一覧
• Git
• gitignore
• Git History
• Git Blame
• Annotator
• Code Runner
• Settings Sync
• Project Manager
• Terminal
• One Dark Pro
• vscode-icons
• Bracket Pair Colorizer
• amVim
• Markdown PDF
• Markdown TOC
• Markdown+Math
• Table Formatter
• Open
• PlantUML
• Beautify
• HTMLHint
• HTML Snippets
• HTML CSS Support
• Path Intellisense
• Auto Close Tag
• Auto Rename Tag
• ESLint
• Debugger for Chrome

Summary

以前書いた記事「Visual Studio Code でCakePHP3開発環境を構築する」でPHP関連の機能拡張を行ったので、それ以外の環境構築をしていきます。
Windows10 , VSCode 1.13.1 を前提としています。

使用した資材一覧

Git 関連

資材	バージョン	補足
Git	2.13.0	バージョン管理ツール
gitignore	0.5.0	.gitignore を設定してくれる
Git History(git log)	0.2.0	History を表示する
Git Blame	1.11.3	カーソル行のコミッターを表示する
Annotator	0.10.1	開いているファイルの、各行のコミッターを表示する

エディタ基本機能関連

資材	バージョン	補足
Code Runner	0.6.21	様々な言語のコードを、その場で実行してくれる
Settings Sync	2.8.1	VSCode 設定を同期させる
Project Manager	0.18.1	プロジェクトが切り替え易くなる
Terminal	0.0.8	プロジェクトルートでターミナルを開いてくれる

エディタ趣味関連

資材	バージョン	補足
One Dark Pro	2.8.6	テーマを着せ替える
vscode-icons	7.9.0	エクスプローラーのアイコンを着せ替える
Bracket Pair Colorizer	0.10.7	括弧のペア毎に、色が変わる
amVim	1.23.1	vim に近い操作が出来る様になる

Markdown 関連

資材	バージョン	補足
Markdown PDF	0.1.7	Markdown を簡単に PDF にしてくれます
Markdown TOC	1.5.5	TOC です
Markdown+Math	1.2.9	Math です
Table Formatter	1.1.2	Table を整形してくれます
Open	0.1.0	拡張子に紐づくアプリでファイルを開きます
PlantUML	1.8.0	UML を Markdown 的に書ける

HTML, CSS 関連

資材	バージョン	補足
Beautify	1.1.1	Save時に、ソースコードを綺麗にフォーマットしてくれる
HTMLHint	0.3.3	構文チェックをしてくれる
HTML Snippets	0.1.0	タグ打ちが、とても楽になる
HTML CSS Support	0.1.7	class, id 候補をリストアップしてくれる
Path Intellisense	1.4.2	href など、パス候補をリストアップしてくれる
Auto Close Tag	0.4.2	閉じタグを自動で付与してくれる
Auto Rename Tag	0.0.13	タグ名を変えると、対のタグ名も自動で変えてくれる

JavaScript関連

資材	バージョン	補足
ESLint	1.2.11	静的解析ツール
Debugger for Chrome	3.1.4	デバッガ

Git

既にインストール済みの場合は、バージョンに注意してください。古いと、Git Blame が動かないなどの問題が生じることがあります。

https://git-scm.com/

上記サイトから、最新版をダウンロードして、インストールします。途中、ウィザードで Configuring the line ending conversions 画面になりますので、「Checkout as-is, commit Unix-style line endings」か「Checkout as-is, commit as-is」のどちらかを選択します。これは、「Visual Studio Code でPHP7開発環境を構築する」で、VS Code で用いる改行コードを LF に設定したことと関係しています。CRLFでコミットする危険がある様なら、前者を選択します。

インストールが終わったら、基本は、リモートリポジトリからクローンしてローカルリポジトリを作成し、それを、VS Code にドラッグ＆ドロップする感じになります。

これで、VS Code からコミットやリモートへのプッシュなどが行える様になります。

gitignore

名前の通り、.gitignore をお手軽に、自動で設定してくれる拡張機能です。インストール後、コマンドパレットで「add gitignore」を選択すると、対応している言語・フレームワークがリストアップされるので、必要なものを選択します。全自動というよりは、初期設定を自動でやってくれるので、後は手作業でチューニングする感じです。

CakePHPの場合、Version2,3 が混在した .gitignore になるので、不要なバージョンの定義部分を削除します。

Git History

名前の通り、history を表示してくれる拡張機能です。インストール後、コマンドパレットで「Git: View History (git log)」を選択すると、ヒストリーが表示されます。

Git Blame

名前の通り、blame を表示してくれる拡張機能です。インストールすると、VS Code で表示しているソースコードの、カレント行に関するコミッター情報が、ステータスバーに表示される様になります。

カレント行を、誰が最後に更新したのか、何の目的で更新したのか、といったことがパッと分かって便利です。

Annotator

Git Blame が、カレント行のコミッター情報を表示するのに対し、Annotator は、ソースコード各行のコミッター情報を全部表示します。

Code Runner

VS Code で表示しているソースコードの選択行をコマンドラインで即実行してくれる拡張機能です。REPL的な感覚で、手軽にコード断片を実験することができます。デバッグモードで実行することで、ブレークポイントが効き、ステップ実行も可能です。

Java, JavaScript, PHP, Python, Perl, Ruby などなど、多くの言語に対応しています。

Settings Sync

複数のマシンで設定を同期したい場合に使える拡張機能です。
GitHub Gist で、extensions.json, keybindings.json, settings.json などの変更を管理します。

コマンドパレットで「Sync: Update / Upload settings」を選択し、Gist に設定情報をアップロードします。
同じく、「Sync: Download settings」で、Gist から設定情報をダウンロードします。

複数台のマシンを使っている私にとっては、必須ともいえる便利機能です。

Project Manager

プロジェクトを、簡単に切り替えることが出来る様になる拡張機能です。

コマンドパレットで「Project Manager: Save Project」を選択し、プロジェクトに名前をつけて保存します。すると、ステータスバーに、現在開いているプロジェクト名が表示される様になります。

プロジェクト名をクリックするとコマンドパレットが開き、保存済みのプロジェクトがリストアップされるので、開きたいプロジェクトを選択して切り替えます。（別ウインドウで、プロジェクトが開きます）

これも、私にとって、必須の機能です。

Terminal

ターミナルを開いたときに、プロジェクトルートをカレントとして開いてくれます。それだけなんですけど、便利です。

私は、ターミナルとして PowerShell を使っているのですが、UTF-8 のファイルを扱うことが殆どのため、settings.json に以下の設定を入れています。

"terminal.integrated.shellArgs.windows": ["-NoExit", "/c", "chcp.com 65001"],
"terminal.integrated.fontFamily": "'Myrica M'",

これで、ターミナルを開くたびに、chcp 65001 と打たなくても UTF-8 になります。

また、フォントは勿論お好みなんですが、私は、ソースコードは Han Code JP が一番見易いと思っています。でも、ターミナルや Markdown では、半角:全角が 1:2 の Myrica M を使っています。

One Dark Pro

テーマは色々あるので、好みのものをインストールすれば良いと思います。

私は、One Dark Pro でほぼ不満ないのですが、カレント行の背景色や markdown の引用の文字色など、少しカスタマイズして使っています。

vscode-icons

エクスプローラーのアイコンを着せ替えます。好みのものをインストールすれば良いと思います。

Bracket Pair Colorizer

括弧のペア毎に、色を変えて表示する拡張機能です。
何重にも括弧で囲われているソースコードが、少し見易くなります。お好みでどうぞ。

amVim

VSCode を、vim風にしてくれる拡張機能として、Vim と amVim があります。Vim の方が対応度が高いのですが、VSCode の機能を使わずに独自実装しているところがあり、惜しい感じがします。例えば、Undo が内部的に実装されているため、Vim で Undo しても、VSCode はそれを認識していなかったりします。また、全角で入力する際に、カーソル位置が不自然な感じになってしまうところも残念です。

amVim は、:w に対応していないなど、対応度は劣ります。でも、変に拘って内部実装するのではなく、undo など VSCode が持っている機能はそのまま使う感じになっているので、私は、amVim の方がストレスなく使えます。

Markdown PDF

名前通り、Markdown を簡単に PDF に変換してくれる拡張機能です。私は、仕様書作成や技術解説など、仕事で作成するドキュメントの殆どでこれを使っています。

少し残念なのは、```java:Hoge.java の :Hoge.java を認識してくれないところです。でもこれは、markdownit を使っているので仕方ない感じです。

PDF の場合、改ページを気にする必要があるため、CSS で制御するのですが、page-break-after: avoid; が効かないため、改ページさせたくない場所には、page-break-inside: avoid; を使うことになります。```java:Hoge.java と書いたときに、Hoge.java を PRE タグの中に表示させ、PRE を page-break-inside: avoid; 指定したいがために、私は、少しカスタマイズして使っています。

それと、writing-mode: vertical-rl; など縦書き指定も、HTML で見るとちゃんと縦書きになるのですが、PDF にすると文字が横向きになってしまいます。これも、非常に残念です。

もう1点、これは issue にも載ってますが、解像度の高いモニタで PDF 化すると、文字が小さくなってしまう現象があります。私は、これのために CSS を環境で切り替えて使っています。改善を期待します。

Markdown TOC

TOC を表示する拡張機能はいくつかありますが、これが一番だと思っています。文章毎に、TOC に表示するレベルを設定できるのは、今のところこれだけだと思います。

自動でナンバリングしてくれる機能も大変便利です。少し残念なのは、TOC に表示させない設定にしているレベルにも、ナンバリングしてしまうところです。惜しいです。

Markdown+Math

Markdown で数式を扱うなら、これですね。

Table Formatter

Markdown の Table を整形してくれます。私は、PDF 化する以外、いちいちプレビューなどしないので、素の Markdown ソースで表が整形されて見えるのは、やはり見易いです。セーブ時に自動で整形してくれるオプションがあると嬉しいのですが、今後のバージョンアップに期待です。

Open

拡張子に紐づいたアプリで、ファイルを開いてくれる拡張機能です。私は、PDF や HTML を開くのに、これを使っています。

当初、vscode-pdf を使って、PDF を開いていたのですが、解像度の高いモニタで見ると？？、表示にすごく時間がかかるため、Open に切り替えました。

PlantUML

これは、Markdown 的なノリで UML をテキストで記述できる拡張機能です。かなり便利です。幾つかある同様の拡張機能の中では、これが一番だと思います。あとは、Math の様に Markdown の中で書けると、とっても嬉しい感じですが、今後に期待しましょう。

色合いが、Rational Rose を思い出させてくれるところが、なんか、懐かしいです。

Beautify

HTML, CSS, JavaScript, JSON などのソースコードを、保存時に整形してくれる拡張機能です。
VS Code 標準機能では整形してくれないファイル（CSS など）も、綺麗に整形してくれます。

HTMLHint

HTML の構文チェッカーです。必須属性の入力漏れなどを指摘してくれます。

HTML Snippets

タグ打ちが、とても早くなる拡張機能です。タグ名を打ち込むだけなので、変な略称など覚える必要がなく、簡単に始められます。

HTML CSS Support

HTML で class や id を記述するときに、CSS を見なくてもクラス名や ID名の候補をリストアップしてくれる拡張機能です。

class="" の ” と ” の間にカーソルを置き、Ctrl+Space でクラス候補をリストアップしてくれます。

Path Intellisense

ファイルのパス候補をリストアップしてくれる拡張機能です。

href="" の ” と ” の間にカーソルを置き、href="css/" まで入力すると、CSSフォルダ配下のフォルダやファイルをリストアップしてくれます。

Auto Close Tag

開きタグを入力すると、自動的に閉じタグを補完してくれる拡張機能です。HTML Snippets を使っている場合、HTML タグ打ちでは、あまり出番はないかも知れません。

Auto Rename Tag

タグ名を変更すると、対になるタグの名称も同時に変更してくれる拡張機能です。

ESLint

JavaScript の静的解析ツールです。

Debugger for Chrome

JavaScript のデバッガです。

Visual Studio Code で CakePHP3開発環境を構築する

Index

• Index
• Summary
• 使用した資材一覧
• Visual Studio Code
• Source Han Code JP
• XAMPP
• Composer
• CakePHP
• プロジェクトを Visual Studio Code で開く
• Visual Studio Code 初期設定
• XDebug
• 拡張機能：PHP Debug
• デバッグの実行
• PHP IntelliSense
• phpcs

Summary

Visual Studio Code で、CakePHP3 + PHP7 の開発環境を構築したので、手順を残しておきます。OSは、Windows10 を前提としています。

使用した資材一覧

資材	バージョン	補足
Windows10 Home	1703	OS
Visual Studio Code	1.12.1	エディタ
Source Han Code JP	2.000	プログラミング用フォント
XAMPP	PHP 7.1.1	Apache+MySQL+PHP
Composer	1.4.1	PHPの依存管理ツール
CakePHP	3.4	MVCフレームワーク
XDebug	2.5.3	PHPデバッグツール
PHP Debug	1.10.0	VS Code 拡張機能
PHP IntelliSense	1.2.1	コード補完・整形
phpcs	0.7.0	コーディング規約チェック

Visual Studio Code

PHP用のエディタ・統合開発環境をチームで統一するために、
以下の候補から、Visual Studio Code を選定しました。

• Eclipse (+PHP プラグイン)
• PHP Storm
• Atom
• Visual Studio Code（以降、VS Code）

Eclipse は重いので、他を試して駄目そうなときの最終候補として後回しにしました。
PHP Storm は商用のため、これも後回しに。

Atom と VS Code は、どちらも Electron ベースのエディタで、機能的にみてほぼ同等ですが、以下の点で、VS Code が優っていると感じました。

• 軽い
• Git 操作など、ユーザインタフェースがより簡単

PHP開発を行うには幾つか拡張機能が必要となりますが、デバッグやコーディング規約チェックなど、必要なものは一通り揃っており、実際に数画面ほど開発してみて、VS Code で十分に開発できると判断しました。

以下からダウンロードし、インストールします。
https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx

VS Code を起動してみましょう。バージョンによって、ロケールの設定が揺らぐことがあるので、メニューなどが日本語表示されていない（日本語で表示させたい）場合、F1キーなどでコマンドパレットを開き、Configure Language を選択します。すると、locale.json が開くので、以下の様に設定します。

{
    "locale": "ja"
}

これで、日本語化されます。

Source Han Code JP

PHPと関係ないですが、ソースコードが見易いフォントとして、Source Han Code JP を導入しています。

以下サイトの画面を下にスクロールしていき、Download the fonts の「Latest release」リンクから開いた画面で、zipファイルをダウンロードします。
https://github.com/adobe-fonts/source-han-code-jp

zipファイルを展開し、OTFフォルダ内のフォントファイル（*.otf）をインストールします。インストールは、フォントファイルをすべて選択し、右クリック⇒インストール、です。

次に、VS Code を起動し、ファイル(F)⇒基本設定(P)⇒設定(S)で、settings.json を開きます。「よく使用するもの」の中に、”editor.fontFamily” があるので、鉛筆マークをクリック（編集）します。すると、右ペイン（規定の設定を上書きするファイル）に初期設定がコピーされるので、以下に示す様に、「源ノ角ゴシック Code JP」（Source Han Code JP の日本語名）を追記します。

settings.json（上書き）

// 既定の設定を上書きするには、このファイル内に設定を挿入します
{
    "editor.fontFamily": "源ノ角ゴシック Code JP, Consolas, 'Courier New', monospace"
}

XAMPP

XAMPP（ザンプ）は、PHPの実行環境を手軽に構築することができる、Apacheディストリビューションです。

• X : クロスプラットフォーム（Windows, Linux, OS X で動作）
• A : Apache
• M : MySQL ⇒ MariaDB
• P : PHP
• P : Perl

以下のサイトから、Windows向けの PHP7.1.1 版をダウンロードします。
https://www.apachefriends.org/jp/download.html

ダウンロードしたインストーラを起動し、ウィザードに従いインストールします。基本的に、「Next >」ボタンを押していくだけでＯＫです。

チームで開発する場合、インストール先を揃えておいた方が良いでしょう。
本記事では、デフォルトの「C:\xampp」にインストールした前提で、話を進めます。

これで、PHP7.1.1 のインストールは完了なのですが、CakePHP3 をインストールするためには、国際化用拡張モジュール（intl）を有効にしてあげる必要があります。

C:\xampp\phpフォルダの、php.ini を編集します。
セミコロンでコメントアウトされている場合、削除して有効化します。

php.ini

extension=php_intl.dll

次に、C:\xampp\apache\confフォルダの、httpd.conf を開き、mod_rewrite を使用する設定となっているかどうか確認します。CakePHP3 では、mod_rewrite が推奨されている為、使用する様にします。
シャープでコメントアウトされている場合、削除して有効化します。

httpd.conf

LoadModule rewrite_module modules/mod_rewrite.so

Composer

CakePHP3の公式インストール手順は、Composer を使用することになっていますので、以下サイトから Composer のインストーラをダウンロードします。

https://getcomposer.org/

ダウンロードした Composer-Setup.exe を起動し、ウィザードに従ってインストールします。基本的に、「Next>」ボタンを押していくだけでＯＫです。
ただし、php.exe の在り処を自動認識できなかった場合は、手動で設定してあげる必要があります。

php.exe は、C:\xampp\phpフォルダにあります。

CakePHP

CakePHPをインストールするために、まず、CakePHPプロジェクト格納用のフォルダを作成します。

本記事では、C:\apps にプロジェクトを格納するものとします。

上記は、CakePHPの組み込みウェブサーバを使って動作確認を行うことを想定しています。

XAMPP環境で Apache を使って動作確認する場合は、
C:\xampp\htdocs に、CakePHPプロジェクトを格納する必要があります。

コマンドプロンプトを開き、C:\appsフォルダに移動し、以下のコマンドを叩きます。

C:\apps> composer create-project --prefer-dist cakephp/app myapp

注） myapp 部分は、実際のアプリケーション名に置き換えてください。

これで、CakePHP のインストールが実行されます。
バージョン情報は、コマンドプロンプトでプロジェクトフォルダに移動後、以下のコマンドで確認できます。

C:\apps\myapp> bin\cake --version
3.4.5

プロジェクトを Visual Studio Code で開く

VS Code を起動し、Windowsエクスプローラーから C:\apps\myapp をドラッグ＆ドロップすることで、CakePHPプロジェクトを開くことができます。勿論、ファイル(F) ⇒ フォルダを開く(Ctrl+K Ctrl+O) からプロジェクトフォルダを選択して開く方法などもあります。

一度、VS Code を終了し、再度起動すると、最後に開いていたプロジェクトが表示されます。VS Code は、一度に複数のプロジェクトを表示することは出来ないので、ファイル(F) ⇒最近使用した項目を開く(R) などから、プロジェクトを選択して表示を切り替えます。

以下に、CakePHP3 の主要なプロジェクト・フォルダ構成を示します。

フォルダ	概要
bin	Cakeのコンソールコマンドなど実行ファイルが格納されています。
config	Cakeの設定ファイルを格納します。
logs	ログファイルが出力されます。
src	作成するPHPプログラムを格納します。
tests	テストコードを格納します。
vendor	ライブラリが格納されます。編集不可なので注意
webroot	ドキュメントルートです。HTML, CSSなどを格納します

詳細は、CakePHP公式サイトの Cookbook が参考になります。
https://cakephp.org/

Visual Studio Code 初期設定

これから、VS Code を使ってファイル作成・編集を行っていくので、事前に最低限必要な初期設定を行っておきます。

VS Code を起動し、ファイル(F)⇒基本設定(P)⇒設定(S)で、settings.json を開きます。左ペインに規定の設定が、右ペインに規定の設定を上書きする内容が表示されることは、既に記述した通りです。

左ペインのカテゴリ「ファイル」の中にある、files.eol, files.trimTrailingWhitespace, files.insertFinalNewline の設定を上書きしてください。以下に、編集後の上書きファイルを示します。

settings.json（上書き）

// 既定の設定を上書きするには、このファイル内に設定を挿入します
{
    "editor.fontFamily": "源ノ角ゴシック Code JP, Consolas, 'Courier New', monospace",
    "files.eol": "\n",
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true
}

files.eol

改行文字を、”\n” に設定します。PHP開発は、Windows, Linux, OS X の混在環境で開発されることも多いため、Linux, OS X の改行文字である “\n” に合わせておけば、git などでクロスプラットフォーム間でファイルのやり取りをする際に、改行文字に起因する問題を未然に防ぐことができます。

files.trimTrailingWhitespace

末尾の空白は不要なので、トリミングする様にしておきます。

files.insertFinalNewline

PHP公式のコーディング規約で、ファイル末尾に改行文字のみの行が必要となっているので、true にしておきます。

XDebug

VS Code で PHP をデバッグするためには、XDebug が必要です。

https://xdebug.org

上記サイトの「download」リンクから、最新版をダウンロードします。
執筆時点での最新バージョンは、2.5.3 です。

PHP7.1.1用のモジュールは４種類あり、環境に合ったものをダウンロードする必要があります。

• PHP 7.1 VC14 (64 bit)
• PHP 7.1 VC14 (32 bit)
• PHP 7.1 VC14 TS (64 bit) : 64bit, Thread Safe 版
• PHP 7.1 VC14 TS (32 bit) : 32bit, Thread Safe 版

本記事では、XAMPP の 32bit版でインストールした PHP を、CakePHP組み込みウェブサーバ、および Apache で動作させるため、32bitのスレッドセーフ版を使用します。

IIS(FastCGI)など、スレッドセーフである必要がないウェブサーバで動作させる場合は、TS のついていない版を使ってください。

ダウンロードした dll を、PHP の機能拡張フォルダ C:\xampp\php\ext に配置します。機能拡張フォルダは、php.ini の extension_dir="C:\xampp\php\ext" で設定されています。

C:\xampp\php\php.ini に、XDebug を有効にする設定を追記します。

php.ini

zend_extension = php_xdebug-2.5.3-7.1-vc14.dll
xdebug.remote_enable = on
xdebug.remote_autostart = on

注）XDebugのバージョンによって、dll のファイル名は異なります。

ここまでで、XDebug が PHP に組み込まれます。

正しく組み込まれたことを確認するために、
C:\apps\myapp\webroot フォルダに、phpinfo.php という名前でファイルを作成してみましょう。

VS Code を起動し、エクスプローラーの webroot フォルダを右クリック ⇒ 新しいファイル ⇒ ファイル名を “phpinfo.php” としてください。中身は、以下の通りとします。

phpinfo.php

<?php
phpinfo();

コマンドプロンプトで、CakePHP組み込みウェブサーバを起動し、

C:\apps\myapp> bin\cake server
...
built-in server is running in http://localhost:8765/
You can exit with `CTRL-C`

ブラウザで、http://localhost:8765/phpinfo.php を表示してみましょう。
PHPの各種情報が表形式で表示され、（下の方に）xdebug 関連の情報が載っていればＯＫです。xdebug.remote_enable と xdebug.remote_autostart が、On になっていることが見て取れると思います。

拡張機能：PHP Debug

XDebug を VS Code で使用するために、拡張機能：PHP Debug をインストールします。
手順は、以下の通り。

1. ビューバー（左端に縦に並んでいるアイコン群）で「拡張機能(Ctrl+Shift+X)」アイコンをクリックし、拡張機能ビューを開く。
2. 「Marketplace で拡張機能を検索する」テキストボックスで、”php debug” を検索。
3. 検索結果リストから PHP Debug の「インストール」ボタンをクリック。
4. インストールが完了すると「再度読み込む」ボタンが表示されるので、クリックし、PHP Debug をアクティブ化。

次に、launch.json を作成し、デバック構成を定義します。
手順は、以下の通り。

1. ビューバーで「デバッグ(Ctrl+Shift+D)」アイコンをクリックし、デバッグビューを開く。
2. 歯車アイコンをクリック。
3. リストが表示されるので、「PHP」を選択。

これで、launch.json が C:\myapp.vscode フォルダに作成され、エディタに内容が表示された状態になります。

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

上記で、特に変更する箇所はないので、内容を確認できたらファイルを閉じてしまって大丈夫です。

デバッグの実行

では、実際にデバッグしてみましょう。先ほど作成した phpinfo.php にブレイクポイントを置いて、ステップ実行できることを確認します。手順は、以下の通り。

1. デバッグビューを表示。
2. LineNoの左側余白部分をクリックし、ブレイクポイントを設置。
3. Listen for XDebug を選択し、緑の▶ボタンをクリック。
4. ブラウザで、http://localhost:8765/phpinfo.php を開く。ブレイクポイントで処理が停止するので、ステップオーバーやステップインなどでデバッグ。

これで、PHPのデバッグが出来る様になりました。

PHP IntelliSense

コード補完・整形ツールをインストールします。
これは、機能拡張ビューで PHP IntelliSense を探してインストールすればＯＫです。

組み込みの PHP 言語候補機能は、無効にしておきましょう。

settings.json

"php.suggest.basic": false

phpcs

コーディング規約チェックツールをインストールします。

コマンドプロンプトで C:\apps\myapp に移動し、以下コマンドを実行します。

> composer require --dev squizlabs/php_codesniffer
> composer require --dev "cakephp/cakephp-codesniffer=3.*"
> vendor/bin/phpcs --config-set installed_paths vendor\cakephp\cakephp-codesniffer

VS Code を起動し、機能拡張ビューで phpcs を探してインストールします。その後、ソースコードを表示すると、以下の様に、赤い波線でコーディング規約違反を教えてくれる様になります。カーソルをあてると、規約違反の内容が表示されます。

上記は、”Missing file doc comment” 、つまり、ファイルの PHPDoc を記述しないのは規約違反だと、叱られている訳ですね。そこで、PHPDoc を簡単に記述してみます。

すると・・・

さらに、色々と叱られてしまいます。
５種類のタグが必須だと言われているので、タグを追記します。
その後、タグの順番や記述内容など、細かく叱られるので、１つ１つ潰していきます。

規約違反は、赤の波線。ワーニングは、緑の波線が表示されます。
赤の波線は、原則、すべて解消します。