Visual Studio Code の PHP 言語サポート vscode-php-intellisense

本記事の 2017 年版を記載しましたのでご参照ください。

https://another.maple4ever.net/archives/2321/


Visual Studio Code Advent Calendar 2016 の 12日目です!

ここのところずっとウォッチしていました、Visual Studio Code(vscode)で利用可能な PHP サポート拡張になります “vscode-php-intellisense” が完成度をあげ、かなり良い感じになっています。 🙂

https://github.com/felixfbecker/vscode-php-intellisense

Advanced PHP IntelliSense for Visual Studio Code. In opposite to the included PHP IntelliSense and other PHP extensions, this uses an AST to parse the source code instead of relying on naive regular expression parsing.

少し前まで PHP をかくときは、Eclipse の PHP Developer Tools を使っていましたが、vscode-php-intellisense がほぼ同様の機能を実装しましたので、検証しながら乗り換えをしております。

以下、vscode-php-intellisense で WordPress を読ませて動作させている様子です。(サイトの横幅の関係でスクリーンキャストがつぶれてしまいましたので、見づらい場合は画像をクリックしてフルサイズでご覧ください)

まずはエラーチェック。構文間違えなどをリアルタイムに指摘してくれます。

error

定義ジャンプ。PHPDoc が表示でき、関数・メソッドの定義位置に F12 でジャンプします。これがないと困ります 🙂

jump

「定義をここに表示」と「参照先検索」機能。「ここに表示」はインラインで関数定義の内容をぱらっとみるとき便利です。また、PHP は動的型付け言語なので完全ではありませんが、呼び出し元検索があるのは嬉しい部分です。

ref

最後は入力補完。 PHP の標準関数を補完しています。 PHPDoc を表示しながら、引数が入力できます。

comp

ユーザ定義関数の補完も現在 master ブランチでは可能になっています。 コメントアノテーションもみて、参照を解決しているのが分かります。

https://github.com/felixfbecker/php-language-server/pull/165

comp2

Ecipse PDT や PHPStorm 並の機能です。すごい。

このペースでいきますと、おそらく年内にはユーザ定義関数の補完も実装が完了し使える形になると思います。つまりは、WordPress や baserCMS のテンプレートタグの補完が可能になります。 😀

ユーザ定義関数補完以外は既に動作するものが Marketplase にリリースされていますので、まずは導入してアップデートを楽しみに待ちましょう。 🙂

https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense

Advanced PHP IntelliSense for Visual Studio Code.
In opposite to the included PHP IntelliSense and other PHP extensions, this uses an AST to parse the source code
instead of relying on naive regular expression parsing.

その他の機能のスクリーンキャストは以下で見ることができます。(ぼくのへたなアニメよりずっと分かりやすいのでぜひご覧ください…)

https://github.com/felixfbecker/vscode-php-intellisense

さて、この拡張は同じ作者の方がかかれている PHP 7 で実装された php-language-server を利用して動作しています。(このため、拡張を動作させるには vscode を動かすマシンに PHP 7 が導入され、パスが通っている必要があります)

この親となっている php-language-server ですが、これは Microsoft Language Server Protocol の実装です。

Language Server Protocol は、エディタ(IDE)と言語解析器をつなぐための共通プロトコルですので、今後 php-language-server は vscode 以外のテキストエディタと接続できる可能性があります。 (既に Eclipse Che が PHP サポートの実装に php-language-server を使っています)

逆に Visual Studio Code から見た場合、新しく追加された言語サーバーに接続することで、どんどん対応言語を増やすことができる仕組みです。(現在 vscode は Language Server Protocol クライアントのリファレンス実装のような形になっています)

vscode と Language Server Protocol を使って対応されている言語の一覧は以下で見ることができます。

https://github.com/Microsoft/language-server-protocol/wiki/Protocol-Implementations

Language Maintainer Repository
PowerShell MS VS Code PowerShell extension
C++ MS VS Code C++ extension
C# OmniSharp Many integrations, repository
JSON MS Bundled with VS Code
CSS/LESS/SASS MS Bundled with VS Code
Xtext language framework Eclipse Eclipse Xtext
Crane PHP HvyIndustries VS Code Extension
PHP Felix Becker php-language-server
Haxe Dan Korostelev (@nadako) VS Code Haxe extension
Java (javac) @georgewfraser Javac based Java support
RAML RAML Workgroup raml-language-server Work in Progress
API Elements Vincenzo Chianese(@XVincentX) vscode-apielements
groovy Palantir groovy-language-server
Java (Eclipse) Eclipse, RedHat java-language-server, becoming Eclipse JDTLS
OCaml/Reason freebroccolo ocaml-language-server
Go Sourcegraph sourcegraph-go
Rust Jonathan Turner rustls
Scala Iulian Dragos dragos-vscode-scala
Polymer Polymer Team polymer-editor-service

まだまだ未完成のものもありますが、PowerShell などは完成形になっていてかなり使いやすいです。 標準の PowerShell ISE より良いかも?

というわけで、このような言語サポートも手伝って Visual Studio Code は愛用のエディタになりました。開発も活発なので今後も楽しみです。 😀

OSC 北海道 2016 baserCMS & WordPress セミナー・ブース出展

2016/6/18(土)に開催されました「OSC 北海道 2016(2日目)」で、WordPress & baserCMS セミナー・ブース出展を行いました。

お越しになってくださいった方、本当にありがとうございました!

baserCMS セミナー & ブース出展

baserCMS セミナーでは「コーポレートサイトにちょうどいい、国産 CMS 「baserCMS」の紹介」ということで、baserCMS の紹介をさせていただきました。

baserCMS 4.0 開発系のデモも江頭さんのご協力のもとすることができ、興味を持っていただいた方も多かったと思います。

セミナー直前にデモサイトが壊れるという、びっくりアクシデントがありましたが、セミナー中に江頭さんがなんとかしてくれ、最後は江頭さんによる詳細な解説もしていただきました。 ありがとうございました!

ブースにて江頭さん。WP のタトゥーとは 🙂

13467683_1167016726683780_360936745_o

福岡より、上田さん、はまちさんも来ていただき、ブースも盛況でした。 楽しかったです、ありがとうございました!

WordPress セミナー & ブース出展

WordBench セミナーでは「REST API を活用した、新しい WordPress サイト製作手法」を解説しました。

最近、REST を使ったサイトも増えてきていますので、活用していただければと思ってスライドをつくりました。

13467514_1167016766683776_1331953622_o

baserCMS と SaCSS(sapporo.css) の真ん中ブースでした。(写真右、コモモ氏による、お手製べっしーにも注目ですw

13487363_1167016833350436_1735057596_n

大懇親会

終了後の大懇親会にて SaCSS ハムさんとぱちり。 セミナー2本やりましたゆえ、疲労が色濃くでております(笑

13480142_1167016536683799_2104078938_n

ということで、OSC 北海道スタッフ、関係者のみなさまお疲れ様でした! 重ねまして来てくださった方、お話させていただいたかたありがとうございました。

今後ともよろしくお願いいたします!

統合環境で baserCMS のテンプレートで使える関数を補完する

baserCMS のテーマをつくっていると、関数の補完機能がほしくなってきます。

というわけで、Eclispe や PHPStorm などの統合環境を使っていれば、簡単な定義をするだけで補完が効くようになりますのでできますので紹介したいと思います。(NetBeans には NetBeans baserCMS support があります!)

補完というのは、オートコンプリート、インテリセンス、いわゆるこれです。

autocomp

使える関数(メソッド)が自動ででてくるあれですね。 🙂

何もせずとも補完ができると良いのですが、PHP などの動的型付け言語は、プログラムの形が実行時まで決定しないため統合環境がうまくソースコードを解析できず補完できないパターンがあり、baserCMS のテーマ・テンプレートもこの条件に当てはまります。

以下は、baserCMS の Blog/index.php テンプレートですが、ここででてくる $this がどこの this であるかわからないため、統合環境が適切に補完を出すことができません。

<?php
/**
 * ブログトップ
 */
$this->BcBaser->css('admin/colorbox/colorbox', array('inline' => false));
$this->BcBaser->js('admin/jquery.colorbox-min-1.4.5', false);
$this->BcBaser->setDescription($this->Blog->getDescription());

というわけで、これを解決してあげるために統合環境に this を教えてあげます。

ファイル先頭などに @var コメントアノテーション行を追加し $this が AppView であることを明示します。(テーマ・テンプレートファイル全てに入れればよいです)

<?php /* @var $this AppView */ ?>
<?php
/**
 * ブログトップ
 */
$this->BcBaser->css('admin/colorbox/colorbox', array('inline' => false));
$this->BcBaser->js('admin/jquery.colorbox-min-1.4.5', false);
$this->BcBaser->setDescription($this->Blog->getDescription());
?>

これで $this が何者であるか統合環境が理解できるようになったのですが、こんどは $this->BcBaser の BcBaser が AppView のソースコード中に存在しないため、まだ setDescription などの関数の補完ができません。これは Helper オブジェクトが実行時に動的にインジェクションされ、ソースコードだけではプログラムの形がわからないためです。

というわけで、AppView にコメントをいれてあげます。幸い、baserCMS は lib/AppView.php のオーバーライドが app/View で可能ですので、app/View/AppView.php にコピーして以下のコメントを追加してあげます。(使わないものも含めてありったけ入れてしまいましたが…)

/**
 * View 拡張クラス
 *
 * @package			Baser.View
 * @property BcAdminHelper $BcAdmin
 * @property BcAppHelper $BcApp
 * @property BcArrayHelper $BcArray
 * @property BcBaserHelper $BcBaser
 * @property BcCacheHelper $BcCache
 * @property BcCkeditorHelper $BcCkeditor
 * @property BcCsvHelper $BcCsv
 * @property BcFormHelper $BcForm
 * @property BcFreezeHelper $BcFreeze
 * @property BcGooglemapsHelper $BcGooglemaps
 * @property BcHtmlHelper $BcHtml
 * @property BcMobileHelper $BcMobile
 * @property BcPageHelper $BcPage
 * @property BcSmartphoneHelper $BcSmartphone
 * @property BcTextHelper $BcText
 * @property BcTimeHelper $BcTime
 * @property BcUploadHelper $BcUpload
 * @property BcXmlHelper $BcXml
 */
class AppView extends BcAppView {
	
}

これでテーマ・テンプレートから補完ができるようになりました。 😀

Eclipse PHP for Developer の例。

baser-eclipse

PHPStorm の例。

baser-phpstome

両 IDE ともに AppView が複数存在していても、コメントをマージしてくれるようですので、ヘルパーが存在するプラグインでは (PluginDir)/View/AppView.php にコメントかいておけば補完を出すことができます。

同じ要領で、プラグインの Controler でも、基底クラスなどにコメントをかいておけば、インジェクションされてくるモデルも補完できます。(baserCart テーマでやってますのでご参考まで)

<?php
App::uses('BcPluginAppController', 'Controller');

/**
 * CartAppController
 * 
 * @property CartConfig $CartConfig
 * @property CartItem $CartItem
 * @property CartItemTag $CartItemTag
 * @property CartOrder $CartOrder
 * @property CartOrderDetail $CartOrderDetail
 * @property BcAuth $BcAuth
 * @property Session $Session
 * @author hiromasa
 */
class CartAppController extends BcPluginAppController {

ちなみに、WordPress はテンプレートタグ(関数)がグローバル空間に存在しますので、Eclipse、PHPStorm ともに何もしなくても補完がでます。

加えて、functions.php などでたとえば global $wpdb なんてグローバル変数経由のインスタンスを使う場合は、@var を使って以下のようにすると補完できます。

/* @var $wpdb wpdb */

wordpress-eclipse

てなわけで補完がきくときかないのでは、ずいぶん開発効率が違うと思いますので、良ければお試しください。 🙂