kore1server

Laravel向けvscode拡張：２０２０

タグ： Laravel   vscode  

Laravelに合わせたvscode環境の構築例を紹介します。自分のエクステンション（拡張機能）を整理したのをきっかけにまとめたものです。

追記：自動実行に関わる部分の設定は次の記事にまとめて説明しています。

vscode環境の構築とは、必要に応じてデフォルトのエディタの振る舞いを設定で調整することです。デフォルトで足りない機能は、エクステンションを選んでインストールし、必要ならばセットアップを行う作業も含みます。

パッケージにより、関連するプログラムをインストールする作業が必要になります。ただし、Composerやnpmなどのパッケージマネージャー系のインストールも含めると説明が膨大になるため、基本的なツール類はインストール済みであることを前提としています。

なお、構築はLinux環境で試しています（openSuse）。2020年3月13日現在、vscodeはバージョン1.43.0、Laravelは7です。

既存の環境を変えずに試したい場合

既にvscodeを設定済みで、今の環境を壊したくなければ真新しい環境でお試しください。vscodeはユーザー情報とインストールしたエクステンションを別の環境に保存しています。これをデフォルト以外の場所に用意したディレクトリへ指定することで、まっさらな状態からの構築が試せます。

コマンドラインで起動します。ディレクトリー名２つは例です。もちろん、自分の好きなディレクトリーを指定できます。

mkdir temp-vscode-environment temp-vscode-extension

# ユーザー情報保存ディレクトリーと、エクステンション用ディレクトリーを指定し起動
code --user-data-dir temp-vscode-environment --extensions-dir temp-vscode-extension

--user-data-dirは名前が示すとおりに、ユーザー情報の保存ディレクトリーです。つまり現状どのプロジェクト・フォルダーを開いているかとか、エディターで表示しているのはどのファイルだとか、どのエクステンションをインストールしているだとか、そうした情報を保持しています。

--extensions-dirは、フェッチしたエクステンションの実態をサブディレクトリーごとに保存するディレクトリーです。

コマンドラインでのエクステンション操作

現状、インストール済みのエクステンションを表示するには次のようにvscodeを起動します。

# デフォルト環境のエクステンションディレクトリー
code --list-extensions

# エクステンションディレクトリーを指定する場合
code --extensions-dir temp-vscode-extension --list-extensions

リストされるのはディレクトリーへ保存されているエクステンションのIDです。ユーザー情報ディレクトリーへ保存されている実際にインストールしたエクステンションではなく、エクステンションディレクトリーで保持しているエクステンションの名前です。

コマンドラインから、インストールすることもできます。

# デフォルト環境へインストール
code --install-extension パッケージID|vsixファイルのパス

# エクステンションディレクトリーを指定する場合
code --extensions-dir temp-vscode-extension --install-extension パッケージID|vsixファイルのパス

これを使うと環境の保存・リストアパッケージを使わなくても、別の環境へエクステンションをコピーできます。

たとえば、デフォルトの環境をこのページで紹介している２つのディレクトリー名で指定する環境へコピーする場合は、以下のようにします。

#!/etc/bash

exts=$(code --list-extensions | awk '{print "--install-extension", $0}' | tr "\n" " ")
code --user-data-dir temp-vs-code --extensions-dir temp-vscode-extension $exts

パッケージIDに対して１つずつ--install-extensionオプションを指定する必要があります。この例では、一度シェル変数へ格納しています。ファイルに書き出して移動すれば、別のコンピュータのマシンでも、後日でもインストール可能です。バックアップや他の人と環境を共有するのに便利です。

厳密に言えば、コピー元の環境でアンインストールしたエクステンションもコピーされてしまいます。--list-extensionsオプションがエクステンションのインストール状態ではなく、エクステンションディレクトリーへ保存されているエクステンションのリストを表示するためです。どの時点で不必要なエクステンションの実態が削除されるかは調べていません。

以下のエクステンションで個人的におすすめのものを上記のスクリプトで書き出しました。参考までに。

--install-extension amiralizadeh9480.laravel-extra-intellisense --install-extension anseki.vscode-color --install-extension austenc.laravel-blade-spacer --install-extension bmewburn.vscode-intelephense-client --install-extension codezombiech.gitignore --install-extension codingyu.laravel-goto-view --install-extension dbaeumer.vscode-eslint --install-extension donjayamanne.githistory --install-extension eamodio.gitlens --install-extension Gruntfuggly.triggertaskonsave --install-extension junstyle.php-cs-fixer --install-extension mikestead.dotenv --install-extension MS-CEINTL.vscode-language-pack-ja --install-extension onecentlin.laravel-blade --install-extension wmaurer.vscode-jumpy --install-extension yzhang.markdown-all-in-one --install-extension ziyasal.vscode-open-in-github

デフォルト設定の調整

初めてvscodeを使用する方へ、戸惑いがちなポイントを紹介します。

vscodeの設定は、現在のバージョンではGUIから変更できないvscode自身のデフォルト、ユーザーの設定、ワークスペース／フォルダーごとの設定と分けられています。

優先順位はワーススペース／フォルダー、ユーザー（自分のこと）、vscodeのデフォルトです。ここらへんは理にかなっているため、迷うことはないでしょう。

設定方法としては、GUIとsetting.jsonファイルを編集する２つの方法がとれます。すべての方法がGUIで設定できません。GUIは設定項目をある程度紹介してくれるため、始めはGUIで設定したほうが良いでしょう。しかし、記事で紹介するとなるとスナップショットが多くなりかえって煩雑ですので、setting.jsonファイルを編集する方法で、最初は気づきにくいポイントを少しリストアップしておきます。

エディターの文字の大きさ

vscodeのデフォルトは、日本語表示には小さすぎます。コメントを日本語で書く必要がある場合などでは、大きくしておく必要がおきます。

"editor.fontSize": 22

ファイルエキスプローラーに編集履歴を表示

編集中のファイルのGit履歴をファイルエキスプローラーに表示できます。とても便利です。最近正式に追加された機能です。

"timeline.showView": true

カーソルカラー

デフォルトの赤はいただけないので、黄色にする設定です。色はお好きにどうぞ。

    "workbench.colorCustomizations": {
        "editorCursor.foreground": "#d3d300",
        "terminalCursor.foreground": "#d3d300"
    }

他に色々変えていますが、カーソルカラーのように好みの問題などですので、そこら辺は各自気がついたら自分で調べて、自分で変えますよね。特段、紹介しません。大抵のことは、検索でヒットします。

プレビューモードの停止

デフォルトではプレビューモードになっているため、エクスプローラーやクイックオープンからファイルを開くと、同じタブで開かれてしまいます。エクスプローラーではダブルクリックで、別タブが開きます。

このプレビューモードを停止し、開く時はいつも新しいタブで開きたい場合は、以下のように設定します。

"workbench.editor.enablePreview": false,
"workbench.editor.enablePreviewFromQuickOpen": false

エクステンション紹介

以下にLaravel環境向けのvscode環境を構築する時点でインストールすべきvscodeエクステンションを紹介します。PHPやJavaScript、CSSやHTML関連のものが中心となります。

パッケージ名をヘッダータイトルに列挙していますので、vscodeのExtensions（デフォルトではCntl+Shift+X）でパッケージ名を検索し、インストールしてください。

エクステンションの中には、別途プログラムのインストールを要求されるものも存在しています。その場合は、インストールすべきツールも合わせて紹介していきます。

Japanese Language Pack for VS Code

vscodeのUIを日本語にするパッケージです。パッケージの説明では表示言語の設定を自分で指定する説明がされていますが、現在のバージョンではインストールするだけで、日本語表示環境に自動的に切り替わります。

当然ですが、すべてが日本語化されるわけではありません。基本的な操作の説明やメニューなどが日本語で表示されるだけです。パッケージの説明などは英語の（英語以外の言語で書かれている場合もあり）ままです。

以降の説明は、このパッケージをインストールしていることを前提として書いていきます。

PHP Debug

後述のLaravel Extension Packでインストールされます。

PHP環境を作るために必要なパッケージを一度に入れてくれるPHP Extension Packを入れると自動的に入ります。ただ以前と異なり、これを含めて２パッケージしか入りません。そのうえ、Laravelの開発環境ではデバッガーを使用する機会が少ないと思います。Webでもコマンドラインでもdd()で状態を確かめるほうが簡単ですし、デバッガーを有効にするとコードの実行速度が落ちてしまいます。LaravelはTinkerとの統合も優秀ですので、artisan tinkerコマンドも開発時に活用できます。

デバッグや開発に余計なコードを挿入するのは嫌がる人もいますが、gitを活用すればデバッグ前の状況へ戻すのは面倒でありません。さらに、gitのcommitは指定部分だけをステージングする機能もあります。コマンドラインで指定するのは面倒ですが、vscodeを使用すれば変更部分だけをステージングするのも簡単ですから、デバッグコードの挿入も問題にならないはずです。

更にコード挿入なしにデバッグ情報を色々集めてくれるTelescopeもあります。Telescopeの環境を構築するのは多少面倒ですが、Homesteadを開発環境に使用すれば、苦労はありません。

ですから、デバッガーを使いたい方は入れる必要はありますが、デバッガーを使わないLaravelの開発・デバッグに慣れている方は必要ないでしょう。これからLaravelを利用し始める方は、デバッガを入れるよりもLaravelに用意された環境を使ってデバッグする方法に慣れたほうが良いでしょう。

後述のLaravel Extension Packをインストールしても自動的に入ってしまいますので、不必要な場合はアンインストールしましょう。

PHP Intelisence

後述のLaravel Extension Packでインストールされます。

PHP Extension Packを入れると自動的に入る、もう一つのパッケージがこれです。事実上のデフォルト扱いですがユーザーの評価は低いです。その理由の１つが機能の実装スピードが遅いことです。別に一部機能が有料な同じようなパッケージがあります。次に紹介しますがPHP Intelephenseパッケージのほうが機能の充実やパッケージ自体の開発スピードが早いことを考えると、そちらをおすすめします。

後述のLaravel Extension Packをインストールすると入ってしまいます。不必要な場合はアンインストールしましょう。PHP Intelephenseを先にインストールしておくと入らないようです。

PHP Intelephense

もともと、IntelliSenseはvscodeのコード補完機能なのですが、こちらのパッケージを使いましょう。評価も高いですし、日本円で１０００円払うと全機能が使用できます。この有料機能には、クラス名を変更すると対応するファイル名も変わるなど、他の有料統合環境でよくある機能が使えます。この機能に１０００円払っても、時間の節約を考えれば十分にお釣りがきます。（一回支払えば、複数環境で使用できます。）

設定

まず、このパッケージのライセンスを購入された方は、CTRL+SHIFT+Pでコマンドパレットを開き、Enter licence keyをサーチし実行します。ウィンドウ上部に入力エリアが開くので、送られてきたライセンスキーを入力し、Enterキーを推します。右下に案内メッセージが出てきますがDismissボタンで閉じてください。PHP Intelephenseのページに飛ばされそうになりますが、見る必要はありません。

次に、このパッケージの設定アイコンをクリックし、「拡張機能の設定」を選びます。設定ページが表示されます。このページにもLicence Keyという項目が目に入るでしょうが、ライセンスを購入した方はここで指定してはいけません。前述の通り、コマンドを起動すると表示される入力エリアで指定します。この入力領域は使用非推奨になっていますので、将来のバージョンではなくなるでしょう。

最後に、拡張機能の検索に@builtin phpと打ち込みます。するとPHP Language FeaturesというvscodeデフォルトのPHP向けパッケージが見つかりますので、設定アイコンから「無効にする」を選びます。

php cs fixer

言わずと知れたPHPのコードフォーマッターをvscodeで利用するパッケージです。PHP Intelephenseにもコードフォーマット機能はありますが気に入らない方、チームでコードフォーマットを統一するためにphp cs fixerを使用している方は、このパッケージを利用したほうが良いでしょう。

私は長年、CTRL+ALT+Fをアクティブなコードのフォーマット機能に割り付けていますので、php cs fixerを入れている環境では、キーマップでこれを起動するように設定しています。

Laravel Extension Pack

以降はLaravelのための拡張機能のインストールが続きます。名前を紹介しますが全部を入れる必要はありません。特にLaravel関連のパッケージは機能がバッティングするものが多いです。確かめながらインストールしたほうが良いため、あらかじめ新しくLaravelをインストールしたディレクトリを用意し、デフォルトではCtrl+K Ctrl+Oの「フォルダーを開く」で開いておきましょう。

Laravel Extension Packは、Laravel環境を一度に作ってくれる便利なパッケージです。ただしたくさんのパッケージを一括して入れるため、自分の環境には不必要なパッケージもインストールしてしまいます。

まず最初にこれを利用し、簡単なコードを書いて動作を確認たあとに、不必要なパッケージを削除、動作が自分に合わないパッケージの代替を探して入れるのがてっとり早くて良いでしょう。

Laravel Blade Snippets

Laravel Extension Packでインストールされます。

Bladeテンプレート用のコードハイライターです。補完、コードフォーマットも行います。Blade内でのEmmet使用もサポートしています。同じ機能のLaravel Bladeパッケージもありますが、一部機能が動かないようです。コードハイライトだけを行うlaravel-bladeパッケージもあります。名前が似ているので、注意してください。

Laravel Extension Packによる一括インストールをしない場合でも、Bladeテンプレートを使用するなら第一候補パッケージでしょう。

Laravel 5 Snippets

Laravel Extension Packでインストールされます。

Laravel用のスニペットなのですが、入れないほうが良いでしょう。現在の型を意識する言語では、言語の構文やコメントで指定しておけばそれを解析し、プログラムを書くときに保管してくれるIDEが多いです。PHP Intelephenseもその役目をします。

PHPの場合、型をガッチリと固めたコードの書き方をしない限り、曖昧な部分が出てしまいますので補完ができないか、曖昧に絞り込んで候補が莫大になってしまいます。そこでコメントがきちんと書かれていれば、補完候補が適切に生じされるためにも役立つわけです。Laravelの場合、インスタンスを静的メソッドのように扱うファサードがあるため、より曖昧でした。

しかし、コメントも補完を意識して正しく書かれるようなったため、現在ではファサードでも自動補完が動くようになっています。ですから、PHP Intelephenseか同様なIntelisence機能を持っているパッケージを使用しているなら、スニペット系のパッケージは必要ないでしょう。

Laravel Artisan

Laravel Extension Packでインストールされます。

CTRL+SHIFT+Pで開くコマンドパレットからArtisanコマンドを実行できるパッケージです。今日の時点でLaravel7で新しく追加されたコマンドに対応していません。

個人的にはArtisanコマンドに対するBash補完を行っているので、Artisanコマンドはvscode内ではなく、ネイティブのターミナルで実行するほうが好きです。このパッケージを利用するかどうかは、もちろんコマンドパレットからArtisanが利用するのが便利と感じるか否かで決めましょう。

Laravel goto view

Laravel Extension Packでインストールされます。

同じ名前のパッケージが存在していますが、IDがcodingyu.laravel-goto-viewのものです。

CTRL+クリックでコードからビューファイルを開く拡張です。CTRL+クリックは多くのIDEのデフォルトアクションとして定義元を開く機能が割り付けられています。vscodeも同様です。機能的にこうした動作と矛盾しませんので、あっても邪魔にならないパッケージです。

試したわけではありませんが、懸念としてはレスポンスのビュー描写以外の機能でも、ビューを活用するためビューディレクトリを使用するものが若干ありますので、そちらで動作しないと不具合と勘違いしてしまう可能性があります。

DotENV

Laravel Extension Packでインストールされます。

.envファイルのコードハイライトパッケージです。.envはLaravel専用ではありませんので、入れておきましょう。

EditorConfig for VS Code

Laravel Extension Packでインストールされます。

様々なIDEや他のコラボレーター・コワーカーと、設定を統一するためのパッケージです。必要であれば残しておき、不必要であればアンインストールしましょう。

Live Share

Laravel Extension Packでインストールされます。

リアルタイムコラボレーションのツールパッケージで、マイクロソフト製です。必要であれば残しておき、不必要であればアンインストールしましょう。

設定は、検索してもらえば説明されています。

Laravel Blade Spacer

以降に紹介するパッケージは、Laravel Extension Packで一括インストールされません。

括弧類はデフォルト状態でも対応されているようですが、Bladeのコメントのときに対応する!を自動で保管してくれません。つまり、１つ!を打ち込んでも、相方を自動入力してくれません。そのために入れています。

あと、パッケージ名のとおりに間にスペースを２つ自動的に入れてくれます。便利ですが機能としてはそれだけですので、逆に煩わしい方は入れないほうが良いでしょう。

Laravel Extra Intellisense

Laravel用の補完機能を追加してくれます。ルート名とパラメータ、ビューとセクション、コンフィグ、Mix、他国語化、バリデーションルールの補完を追加するパッケージです。

Laravel7に対応しているかは確認していません。また、機能の一部がここまでに紹介したパッケージとバッティングするのですが、それによる障害が起きているかは不明です。ただ、便利なことだけわかっています。

Markdown All in One

Markdownを読み書きするのに便利なパッケージ。Readmeを読む場合もコードハイライトがあったほうが読みやすいです。最近はReadmeをMarkdownで書くのが一般的ですから、入れておいたほうが良いでしょう。

ESLint

以降はJavaScript関連のパッケージです。もちろんUIの作成やVueなどのフレームワークを使用するならJavaScriptを使うことになります。直接JavaScriptを組まない場合でも、UIのデザインでLaravel Mixを使用すればnodeに関わることになります。そのため、入れておいたほうが良いでしょう。

ESLintはその名が示す通りlintのプログラムです。

ESLint本体のインストール

ESLintを環境にインストールしていない場合は、npm install -g eslintで環境へインストールしましょう。ESLint自身はグローバルでのインストールを勧めていませんが、Laravel環境を構築するたびにパッケージをインストールするのは手間ですので、私はグローバルインストールをしています。

設定ファイル： [https://eslint.org/docs/user-guide/getting-started]

（注：最近はJavaScriptを組んでいないため、それ以上のエクステンションについてはおいおい追記します。）

Trigger Task on Save

vscodeには外部プログラムを動かす仕組みがあり、タスクと呼んでいます。このエクステンションは指定ファイルを保存したときに、自動的にタスクを実行するエクステンションです。似たエクステンションは他にも存在しますが、対象ファイルの指定がglob形式で行えるのが、これを選んだ決め手です。

もう一つ決め手があり、ダブルのアスタリスク(**)で再帰的なマッチングを行う指定が可能なのがこれだけだったのです。UIによる設定がないため使い勝手はベストではありませんが、再帰指定ができないとリソース保存ディレクトリー下のjsやsassディレクトリー構成を変更したときに設定を書き直す必要が起きてしまいます。

また、ファイルを監視するのではなく保存をきっかけに動作させるというのもポイントです。ファイル等の監視対象は少ないほうがシステム的にトラブルは避けられるものです。

注意：Laravel Mixで簡単に実現できる範囲での自動化で済み、安定してMixのwatchが動作する環境であれば、わざわざ複雑な方法を取る必要ありません。以降で説明している分割可のアイデアはMixのwatchが不安定な状況で役に立つ可能性がある方法です。

Laravel Mixはwatchコマンドも持っています。しかし、vscodeがファイルを監視し、mixを使うためにnpmでもファイル監視を行うと監視自身や監視結果により実行されるプログラムの影響によりデッドロックやコンフリクトなどが起きる可能性があります。つまり状況により、速度低下、フリーズ、ブルースクリーン、暴走、予期せぬエラーの危険性があります。複数のプログラムからファイルを監視し、ファイルを変更するのは避けるほうがベターです。

開発環境も含めて、システムの安定性はハード構成やOSにも関係しています。vscodeとMixを同時に使用してもまったく問題が起きない状況がほとんどでしょう。そして、この手のトラブルは一気に最悪の状況が起きれば気が付きやすいのですが、ある時はビルドが自動実行されないとか、まれにMixが固まるなどの状況では、偶然として見逃されやすいのです。

vscodeはたとえば外部でファイルの内容が変更された場合、それを表示しているエディターに反映できるよう監視しているわけで、こちらを止めるわけに行きません。（とはいえ、監視対象が多くなると負荷が多かったり、起動に時間がかかるようになるため、node_modulesのようにデフォルトで監視しないように設定されているディレクトリーもあります。ですからモジュールの更新を行った影響がエディター側に反映されない可能性はあります。）

もちろんOSレベルから、エディター、Mixの振る舞いをしっかりと把握しているのであれば、防ぐことは難しくありません。しかし、開発中に環境に気を取られるのは効率が下がりますので、安定な環境を保つに越したことはありません。

リソースのコンパイル程度であれば、mixのファイル監視によるwatchは使わず、vscode側で保存のタイミングで、mixのコンパイルコマンドを実行するほうが安定して自動リソースコンパイルできます。

さらに、多くの監視系エクステンションでは開発している言語依存の問題を解消していないため、設定をエスケープしろとかうるさいのですが、このパッケージの指定方法は余計なエスケープは必要なく、シンプルです。

ヒント：ときにmixのインストールや実行で、sassが環境に合っていないというエラーが起きることが多々あります。いろいろ試しましたが、npm installの代わりにnpm install --save-devで防げるようです。既にnpm installでこのトラブルに合っている場合は、npm rebuild --save-devで解消できました。それでもだめなら、npm remove node-sassに続いてnpm install node-sassで解決できます。

Laravel環境、つまりLaravelをインストールするたびに、このエクステンションの設定が必要になります。それは後半で説明しています。

Git Extension Pack

Git関係のパッケージを一括でインストールしてくれます。詳細は省きます。

一括でインストールされるパッケージの中でProject Managerは毛色が違います。直接Gitと関係していないので、vscodeのプロジェクトを頻繁に活用しない場合は必要ありません。依存関係を指定してあるらしくGit Extension Packを削除しないと削除できません。

Laravelと関係ないため、含まれているパッケージの紹介はしませんが、残りはあったら便利な機能を持つパッケージです。ただ、Git関係は代替パッケージも豊富ですので、自分のニーズに適したものを試して選ぶのが良いかと思います。

Color Manager

カラーピッカーが使えるパッケージです。UIに携わる方には必須でしょう。気が付きませんでしたが、デフォルトで色の指定の直前にその色で塗りつぶされた小さな四角が表示されるようになりました。色名や数値による指定の上にカーソルを合わせると、デフォルトのシンプルなカラーピッカーが表示されます。

それを補強するカラーピッカーは現在４パッケージ存在します。その中でもこのColor ManagerはUIがよくできています。デフォルト以上を求めるのであれば、これが便利です。

もし、Windowsを開発に使っているなら、vs color pickerも候補でしょう。カラーピッカーは自分のエクステンション内で色を選ぶ仕様がほとんどですが、これは外部アプリケーションであってもカーソル位置の色をピック（拾い上げる）機能も付いています。

Composer

Composerをコマンドパレットから実行できるパッケージです。個人的には使っていませんが、コマンドパレット大好きレイヤーの方には響くでしょう。

Jumpy

Atomエディターの同名の機能をvscodeで実現するパッケージです。同じ名前のパッケージがたくさん存在していますが、別々の人が開発している異なったリリースです。どれでも大差はないようです。

行、もしくは語単位にaaから始まる英２文字を表示し、それをタイプすることにより移動する機能です。キーボード派の人向けです。

この機能にはキーボードショートカットを設定しましょう。GUIで設定できます。

Remote Development

これは拡張パック、つまり他のエクステンションをまとめて追加してくれるものです。ただ、これによりインストールされる３本はまとめていれると言うよりも、必要に合わせて使うものでしょう。

その名の通り、リモートファイルをローカルのvscodeで編集するための、マイクロソフト純製エクステンションです。

リモート方法が、SSH、Container、WSLの３種類あり、それぞれ別パックになっています。私はSSHで試してみました。いくらか動きに怪しい部分がありますが、実用になるレベルです。使い方もローカルのvscode同様、直感的に使用できます。たとえば、ターミナルはリモート機上に切り替わるとか、意識せずに開発環境を利用できる作りです。

リモートへ接続してもまだ、エクステンションがインストールされたりはしないようです。自分で選んでインストールし直すか、リモートで使えるエクステンションをインストールするコマンドが用意されています。

試したSSH版では、ちゃんと~/.ssh/configの情報を利用していますし、vscodeのコマンドから新しいホストを登録すると、このファイルへ書き込まれます。このコンフィグをきちんと設定しておけば、接続時のリストからホストを選ぶだけで簡単に接続できます。ただ、パスワード付きのキーを指定した場合は、なにをやっても不一致になってしまいました。しかたなく、パスワード無しのキーを使いました。

MySQL

大抵のデータベースエンジンは開発元がGUIツールを提供していますし、有志によるサードパーティツールも多いです。オープンソースの無料のものから、有料のものまでたくさん存在します。

IDEにもこうしたデータベースツールがたいてい組み込まれています。コードを書くときにテーブルの構造やフィールドの内容を確認したいとき、ツールを切り替えたり、ドキュメントを読んだりするよりは、IDE・エディター内で調べられるとやはり便利です。ツールの切り替えなどは大した手間ではありませんが、プログラミングモードになっている頭を度々切り替えるのは集中力が削られますからね。

そこで、いろいろとデータベースツールのエクステンションを調べてみましたが、合格ラインのものは２つでした。今回紹介するMySQLとSQLToolsです。一長一短はありますが、ほぼ機能は一緒です。

MySQLはMySQL専用です。様々なエクステンションを調べてわかったのが、ほとんどで接続の手間・設定が分かりづらいです。その点、このMySQLは一番シンプルで簡単でした。GUIで設定できます。

もう一つの利点は大抵のエクステンションではファイルに記述したSQLを実行できるのですが、これはsql拡張子のファイルに複数SQLを記述し（もちろん、補完されます）、カーソル位置のSQLを実行する仕様になっています。開発や確認のためにファイルを色々作成する必要はありません。これは地味に便利です。

SQLToolsエクステンションはMySQL専用ではなく、たくさんのSQLエンジンに対応しています。そして、接続の設定もしやすい方です。

こうしたデータベースのツールではsql拡張子のファイルを使うことが必然的に多いのですが、vscodeではsql拡張子に対するデフォルトパッケージがmssqlらしく、ファイルを開くたびにインストールするか確認されます。これは必要ない上に、インストールすると色々邪魔になります。おすすめされたら、歯車の設定ボタンをクリックし、「今後表示しない」ボタンを推してください。

さて、話はMySQLエクステンションに戻りますが、同名のパッケージが現在３つ登録されていますが、今回おすすめするのはIDがcweijan.vscode-mysql-managerのものです。これ以外の２つは最近の更新が無いようです。

インストールするとデフォルトでは左に表示されるアクティビティバーにMySQLのアイコンが表示されます。それをクリックすると空っぽのペインが表示されます。プラスアイコンで接続を定義するところが最初のポイントですが、シンプルですので解説はいらないでしょう。

Laravel新規インストール時

laravelコマンドやComposerにより、Laravel自身を新規にインストールしたときに、vscodeを活用するために行う作業です。

ワークスペース／フォルダーごとのvscode設定

vscodeは語の区切りを設定で持っています。デフォルトでは$が語の区切り文字に指定されているため、ダブルクリックなどで変数の先頭の$が含まれません。

また、cssファイルでは色のRGB指定に#が先頭に付きますが、#も区切り文字に指定されているため、ダブルクリックの選択で含まれません。

好みによるところが大きですが、ダブルクリック一発で選択したい場合は、それぞれの文字を区切り文字から削除すれば対応できます。

"editor.wordSeparators": "`~!@%^&*()-=+[{]}\\|;:'\",.<>/?"

本来、どの文字が区切り文字として適切なのかは言語により異なりますが、どの言語でも統一されていたほうが使いやすければ、ユーザーの設定にしましょう。

続いて、Laravelに含まれているファイルには拡張子が標準的でないものも含まれるため、ハイライトや補完が聞かないのを対処しましょう。

    "files.associations": {
        "*.stub": "php",
        "Vagrantfile": "ruby",
        "aliases": "shellscript"
    }

artisan stub:publishコマンドを使うとプロジェクトルート下にstubディレクトリが生成され、中にartisan make:〜で生成されるファイルの元になるスタブファイルがリソース公開されます。他のIDEではテンプレートとか呼ばれるものに該当します。型ファイルですね。これは、拡張子がstubのためPHPファイル扱いされません。このstubファイルをPHPファイルとして認識させればPHPファイルとして扱われます。プレイスフォルダーの{{ }}は構文エラーになりますが、差し支えないでしょう。

VagrantfileとaliasesはHomesteadをプロジェクトごとにインストールした場合に生成されます。

なお、特定のファイルやタイプ（拡張子）に対する言語の指定は、setting.jsonを直接いじらなくても、画面最下部のステータスラインでファイルタイプをクリックすれば変更できます。変更結果がsetting.jsonへ反映され、保持されます。

ESLintの設定ファイル

ルートディレクトリでeslint --initを実行し、設定ファイル(.eslintrc)を作成しましょう。もしくは、既存のファイルをコピーしましょう。

設定内容は、[https://eslint.org/docs/user-guide/getting-started]を参照してください。

php cs fixerの設定ファイル

このフィキサーを使用している方は、既に設定をお持ちでしょう。既存の設定ファイル、特にグループワークの方は共通の設定をコピーしましょう。

Trigger Task on Save設定

ちょっと長い説明です。前述の通り、このエクステンションはファイル保存時にvscodeのタスクを実行するものです。vscodeはpackage.jsonのような自動タスク実行系の設定ファイルがあれば、それを元にタスクを内部で用意してくれます。しかし、現在のところこのエクステンションはvscodeが自動的に用意するタスクを利用できません。そのため、最初にタスクを明示的に作成し、続いてタスクを実行するファイルを指定します。

Laravel Mixの場合、webpackを利用していますが、node上に構成されていますので、package.jsonをvscodeは読み込み、タスクを自動的に構成してくれます。

vscodeが自動的に構成するタスクを.vscode/tasks.jsonに書き出す必要があります。このエクステンションが認識するためです。メニューバーから「ターミナル」、「タスクの実行」を選ぶと、実行するタスクのリストが表示されます。その中から、npm:devを選びます。同じ名前のタスクは２つないし３つ表示されますが、一番短いものです。ディレクトリー名が表示されないタスクです。

カーソルを当てると右上に歯車アイコンが表示されます。それをクリックするとtasks.jsonがまだ存在しない場合は生成され、そこにこのタスクの内容が書き出されます。このタスクの内容を変更することで、vscodeが自動的に構成するデフォルトのタスクをカスタマイズできるわけです。今回は変更する必要はありません。単にエクステンションが読み込めるようにするため、書き出しただけです。（もちろん、好みに合わせてカスタマイズしても構いません。）

続いてエクステンション自身の設定です。どのファイルを保存したときに、どのタスクを実行するのかをsettings.jsonに追記するのですが、この設定ファイルは同名で複数ヶ所に存在します。通常この手の設定はグローバルには設定できません。フォルダーにより設定は異なるはずだからです。そのため、.vscode/setting.jsonに書き込むことになります。Laravel Mixに合わせて設定を追記する場合、内容は次の通りです。

    "triggerTaskOnSave.tasks": {
        "dev": [
            "resources/js/**/*.js",
            "resources/sass/**/*.scss"
        ]
    }

これにより、Laravelをインストールしたresources/jsディレクトリー下のjs拡張子のファイルか、resources/sassディレクトリー下のscss拡張子のファイルが保存されたときに、先程定義したdevタスクが実行されます。二重のアスタリスクで再帰的にディレクトリーをマッチングしてくれます。

全部書くと長くなるため、Mix活用のヒントを書いておきます。標準のwebpack.mix.jsの設定は、JavaScriptとcssのコンパイルと両方実行されます。jsファイル変更時にはJavaScriptのコンパイルだけ、cssファイル変更時にはcssのコンパイルだけ実行できるようにもできます。分割のヒントはMixのIssueのneeravpさんの回答とそれ以降のやりとりをご覧ください。Mixの設定を分割できればタスクを分け、ファイルの拡張子により別のタスクを実行できるわけです。（外部プログラム実行できる他のエディターやIDEでも利用できるテクニックです。）追記：次の記事で解説しました。

あとできると便利なのは、リソースの変更で画面をリフレッシュする機能ですね。BrowserSyncです。MixにもHotコマンドが存在します。ただ、Hotコマンドはコンパイル等のソース側に指定したファイルを監視してリフレッシュするらしく、Mixが取り扱わないビューファイルの変更ではリフレッシュがかかりません。結局、これはMixのBrowerSyncを使うのが一番てっとり早いようです。webpack.mix.jsを以下のように変更します。（前記のタスクを分割する方法を使用しないと、devタスクでリソースコンパイルできなくなりますよ。）

mix.browserSync({
    files: [
        "resources/views/**/*.php",
        "public/**/*.*"
    ],
    proxy: {
        target: "http://homestead.test/",
    }
});

targetで指定するURLは、Webサーバーで設定したURLです。上記はHomesteadをLaravelインストールディレクトリーにインストールした場合のURLです。ファイル監視＋ページリフレッシュはnpm run watchで実行します。

限定した少数のファイルのみ監視し、ページリフレッシュを行います。この程度の数のファイルであれば監視しても問題になることはありません。

実はvscodeのエクステンションにも２つBrowsersyncパッケージは存在しますが、どちらも使い勝手が悪いため現在のバージョンではおすすめしません。

vscode起動時の自動実行

vscode自体を起動したときに、特定のシェルスクリプトを実行する機能はありません。しかし、フォルダーを開いたときに、タスクを実行する機能はvscodeに存在しています。これを使えば実現できます。

今回、実証するため初めてHomesteadの「プロジェクトごとにインストール」を行ってみました。Homestead環境を起動してくれないと、動作を確認しながらの開発はできません。そのため、vscodeを起動したら、同時にVagrantのHomestead Boxも起動したいわけです。起動自体はプロジェクトのルートディレクトリでvagrant upを行うだけです。これを、行う方法設定を紹介します。

まず、package.jsonでnpmタスクを作成します。scriptsセクションに追加してください。

"scripts": {
   ...
    "vagrant": "vagrant up"
}

これで、npm run vagrantでVagrantの起動コマンドが実行できるようになりました。続いてこれを ディレクトリーを開いたときに起動するvscodeのタスクとして登録します。.vscode/tasks.jsonに追加してください。（ちなみに、たとえばホームディレクトリー下のHomesteadディレクトリーで起動したい場合は"cd ~/Homestead && vagrant up"と書きます。）

"tasks": [
    ...
    {
        "type": "npm",
        "script": "vagrant",
        "problemMatcher": [],
        "runOptions": {
            "runOn": "folderOpen"
        }
    }

これだけです。これでvscodeを起動したり、フォルダーを開いたときにvagrant upコマンドが内部のターミナルで実行されます。

既に起動している時は無駄になりますが、起動をしているかを調べるためのvagrant statusは遅いため、特段チェックを行わずに実行しているわけです。実行中に起動コマンドを実行してもVagrantの場合はメッセージが表示されるだけで問題はありません。

これを実現する方法を調べたり、エクステンションを試したり、えらい苦労をしましたがこれだけです。

もちろん、同様にしてディレクトリー（フォルダー）を開いたときに実行したいコマンドを指定できます。