Help us understand the problem. What is going on with this article?

Visual Studio Code - PHPの開発環境を VSCode と Vagrant + Docker で構築する時のツール類

More than 1 year has passed since last update.

はじめに

PHPを使った開発ではいつも Visual Studio Code を使っています。
プラグインには特にこだわりはないのですが、複数人でのチーム開発を意識すると、何かしら有効なツールがあるのではないかと、以前から興味を持っていました。

そこでPHPに関する静的解析を行うツールを探してみると、想定していた以上に多くのツールが存在しているようです。
今回はその中でも、特に必要だと思われるツールを、 Visual Studio Code に組み込む方法について、まとめてゆきます。

基本情報

PHP の解析ツール

最初に、特定の IDE には依存しない PHP の解析ツールについてまとめます。

静的解析ツール

まずは「静的コード解析」に関連するツールについてです。

Bugs finders

PHP において、バグに繋がるソースコード上の問題を検出するツールには、以下のようなものがあります。

概要 採用?
PHPMD PHPの潜在的なバグを検知出来る yes
PHPStan コードを実行せずにエラーを検出する yes
PhpCodeFixer ソースコードの複雑さを検査する yes
PHPCPD ソースコード内のコピペを検出する yes
PHPMND マジックナンバーを検出する no
churn-php リファクタリングをサポートする yes
PHPUnit 単体テストを実現する yes

Coding standards

PHP で記載されたソースコードの記法をレビュするツールには、以下のようなものがあります。

概要 採用?
PHPCS コーディングスタイルのチェックを行う yes
PHPCheckstyle コーディングスタイルのチェックを行う no
PHP formatter PSRに従ってコードをフォーマットする no

Fixers

PHP で記載されたソースコードを自動で修正するツールには、以下のようなものがあります。

概要 採用?
PHP-CS-Fixer PSRに従ってコードをフォーマットする yes

Metrics

PHP で記載されたソースコードを計測し、コードの複雑さや行数を出力するツールには、以下のようなものがあります。

概要 採用?
PhpLoc PHPプロジェクトの構造をスキャンする no
PhpMetrics メトリクスをHTMLで出力する yes
dePHPend ソースコードを分析し依存関係を検査する no

Misc (その他)

静的解析からは少し外れますが、以下のような phpDocumentor で ドキュメントを自動生成する為に、PHPDocの書式に従ってコメントを記載します。

動的解析ツール

次は「動的コード解析」に関連するツールについてです。

UnitTest

PHP の xUnitツールといえば、PHPUnitです。

DebugTrace

PHP の開発で ブレークポイント を張って、スタックを確認することが出来る PHP の拡張モジュールです。

Visual Studio Code のプラグイン

最後に、 Visual Studio Code のプラグインで前述のツールに関連しそうなものを列挙します。

この中から、今回使用しようとしているツール と Visual Studio Code を関連付けると以下のようになりました。
Visual Studio Code に組み込めるものもあれば、 composer で直接ソースコードへインストールし、コマンド実行で確認を行うものもあります。

プラグイン 補足
- PHP Intelephense PHPのサジェスト機能など。
特筆した設定は不要
PHPMD PHP Mess Detector プラグインのインストールに加え、composerで
ソースコードにphpmdの追加が必要そうだが、
詳細を確認出来ていない
PHPStan - composerでソースコードに導入
PhpCodeFixer - composerでソースコードに導入
PHPCPD - composerでソースコードに導入
churn-php - composerでソースコードに導入
PHPUnit - composerでソースコードに導入
PHPCS phpcs プラグインのインストールに加え、composerで
ソースコードにPHP_CodeSnifferを追加する。
PHP-CS-Fixer php cs fixer プラグインのインストールに加え、composerで
ソースコードにphp cs fixer を追加する。
PhpMetrics - composerでソースコードに導入
PHPDoc PHP DocBlocker 特筆した設定は不要。
Xdebug PHP Debug 設定が必要
- PHP Namespace Resolver 特筆した設定は不要。

Xdebug 以外については、 Visual Studio Code への プラグインのインストールか、 composer を用いたソースコードに導入、またはその両方の手段によって、導入が可能なようです。

構築手順

概要

前章までの調査と選別の結果を踏まえて環境を構築した際のソフトウェア・スタックは以下のようになりました。

image.png

かなりリッチな構成になってしまいました。
実際に動かしてみると、特定の状況で Visual Studio Code がフリーズしてしまいました。
コードのスタイルチェックなどは、どれか消してしまっても良いかもしれません。

手順

前節の構成を構築する手順を記載してゆきます。
なお、以降で使用する構築用のスクリプトは GitHub 上に存在する以下の2つのリポジトリを使用しています。

PHP のバージョンや、 Xdebug の設定、 composer のインストールなど、細かい設定はすべて上記のスクリプトに記載していますので、環境をカスタムした場合や、設定情報を確認したい場合はそちらを参照してください。

Visual Studio Code へのプラグインの導入

Visual Studio Code への導入方法については記載するまでもないと思います。
以下のプラグインを導入します。

  • PHP Namespace Resolver
  • PHP Intelephense
  • PHP Mess Detector
  • phpcs
  • php cs fixer
  • PHP DocBlocker
  • PHP Debug

Vagrant + Docker で PHP実行環境を構築

ホストOS 上で以下のコマンドを実行することで、 Docker と docker-compose が入った CentOS 7 を構築します。

@HostOS
// Vagrant のプラグインをインストールする
$ vagrant plugin install vagrant-vbguest
$ vagrant plugin install vagrant-proxyconf

// GitHub から Vagrantfile と provision.sh を取得する
$ git clone https://github.com/anfangd/docker-on-vagrant-script.git
$ cd docker-on-vagrant-script

// Vagrant の起動する
$ vagrant up

// 仮想環境へ ssh でアクセスする
$ vagrant ssh

起動した仮想環境内で、 Docker と docker-compose をコマンド操作できるか確認します。

@VirtualOS
// docker の動作確認をする
$ docker run hello-world

// docker のバージョン確認をする
$ docker --version
Docker version 18.06.1-ce, build e68fc7a

// docker-compose のバージョン確認をする
$ docker-compose --version
docker-compose version 1.17.1, build 6d101fb

仮想環境内で、 PHP実行環境 や nginx などのコンテナを構築するスクリプトを取得し、 docker-compose でコンテナを構築します。

@VirtualOS
// HostOS とファイル同期が取れるよう、 /vagrant へ移動
cd /vagrant

// GitHub から docker-compose 用の スクリプトを取得する
$ git clone https://github.com/anfangd/laravel-by-docker-script.git

// 取得したスクリプトをビルドして、docker-compose で コンテナを起動する
$ cd laravel-by-docker-script
$ docker-compose build
$ docker-compose up -d

Visual Studio Code で PHP Debug の設定

Visual Studio Code の [デバッグ] > [構成の追加] から、 PHP の構成を追加します。
構成は以下のようになりました。

.vscode/launch.json
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9001,
            "stopOnEntry": true,
            "log": true,
            "pathMappings": {
                "/src": "${workspaceRoot}"
            }
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

composer でツールをプロジェクトにインストール

Vagrant 上に Docker で構築した PHP の実行環境にアクセスし、 Laravel をインストールしたあと、各ツールを composer でインストールします。
なお、DBへの接続設定などについては、以下を参照してみてください。

@PHPContainer_on_VirtualOS
// laravel でプロジェクトを作成する
$ docker-compose exec php laravel new sample

// 各ツールをインストールする
$ composer require --dev phpstan/phpstan
$ composer require --dev sebastian/phpcpd
$ composer require --dev bmitch/churn-php
$ composer require --dev "squizlabs/php_codesniffer=*"
$ composer require --dev friendsofphp/php-cs-fixer
$ composer require --dev phpmetrics/phpmetrics

まとめ

ここまで設定を行うことで、 Visual Studio Code でコードスタイルのチェックなどを効率的に実施することが出来ます。

また、 Visual Studio Code にプラグインがなく、 composer でインストールしたものについては、各ツールに従ったコマンドを実行することで、メトリクスの出力やコードの解析を行うことが出来ます。こちらの詳細については、それぞれの GitHub の README を参照してみてください。

Xdebug については、Docker上のプログラムが実行された際に、 Visual Studio Code で詳細情報をキャッチすることが出来る設定は終わっています。 Visual Studio Code で 「デバッグを開始」し、ソースコードの直接実行か、Webブラウザで対象のプログラムへアクセスすることで、 Xdebug を使用したデバッグを行うことが出来ます。

以下は、 info.php にブレークポイントを設定し、 Chrome で対象のサイトを指定して表示しようとすると、自動で Visual Studio Code が表示され、ブレークポイントを作成した箇所から、ステップ実行などを行うことが出来ます。

Nov-04-2018 23-20-36.gif

上記の他、Vagrant 上の Docker コンテナ内で、PHPプログラムを直接実行( php sample.php など )でも同様にデバッグを行うことが出来ますので、状況に応じて、適切な方法で確認をしてみてください。

終わりに

この調査を始めるまでは漠然と、「チームでソースコードをチェックするには、何かしらツールを導入したほうが良いし、ツールの導入くらいは簡単だろう」という甘い考えでした。
ただ、実際に導入を検討しながら作業を進めると、まずツールの幅広さがあり、その上で、現在の開発環境へ適用する為の構成の検討や詳細な設定など、かなり面倒な作業ばかりでした。

また、実際に構築してみると、ツールが原因か、 Visual Studio Code の動作がもっさりすることが増え、チェックと引き換えに、スピードを少し失った気がします

ただしその分、 Visual Studio Code でコードを記載する段階で、ソースコードの記法を制限し、自動的にチェックを行うことが出来るので、やはり複数人で開発する時には役に立つ設定も多いと感じています。

もう少しブラッシュアップが必要そうですが、ここをベースにもう少し良い構成にして行ければと思います。

参考

anfangd
Web Application Developer
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした