VSCodeで始めるLaravel+Vue.js開発

最近業務でLaravel+Vue.jsでの開発を始め、そのさいVSCodeを使用しています。
そのさい入れた拡張機能や設定など環境構築のメモ書きです。
貼ってる拡張機能や設定以外にも便利なのがあれば教えていただきたいです。
## はじめに
一応前提条件としてXAMPP、VSCodeはインストール済みとしてやっていきます。
環境としてはWindows10、PHPはXAMPPでPHP7.1.9を入れています。
また、途中パス名などが出てきますが、それは各自の環境で読み返してください。
## 環境構築
### VSCodeの設定
左下の歯車マークから設定を選んでやっていきます。
上の検索ボックスに`php`と打ち込んで変更すべきものを探します。

```
"php.validate.executablePath": null,
"php.executablePath": null,
"php.suggest.basic": true
```
何個か出てくると思いますが上記3つを変更します。
マウスオーバーすると鉛筆みたいなマークが出るので、それを押して設定の置き換えを選択します。
![1.PNG](https://qiita-image-store.s3.amazonaws.com/0/204605/5e38d3c3-de66-8f08-a587-75af6b5d5f68.png)

そうすると右側のエリアにコピーされるので下記の通りでパス名などを設定します。
`false`もしくは`true`で設定できるものは鉛筆マークの時点で設定できます。

```
"php.validate.executablePath": "C:/xampp/php/php.exe",
"php.executablePath": "C:/xampp/php/php.exe",
"php.suggest.basic": false
```
これを設定することで賢く補完してくれるようになるそうです。
### デバッグ環境の設定
ここは最悪なくてもいいかもしれない。
あるとバグ探しや動きの確認がしやすくなる。
#### Xdebugのインストール
まずは[こちらから](https://xdebug.org/download.php)各自の環境にあったXdebugをダウンロードしてきます。私は`PHP 7.1 VC14 TS (32 bit)`をダウンロードしました。
降ってきたDLLファイルを`C:\xampp\php\ext`にコピーして名前を`php_xdebug.dll`に変更します。
#### php.iniの設定
次にphp.iniに少し追加していきます。
php.iniは`C:\xampp\php`にあると思います。
下記をphp.iniの下に追記してください。

```
[XDebug]
zend_extension = "C:\xampp\php\ext\php_xdebug.dll"
xdebug.remote_host = "localhost"
xdebug.remote_port = 9000
xdebug.profiler_append = 0
xdebug.profiler_enable = 1
xdebug.profiler_enable_trigger = 0
xdebug.profiler_output_dir = "C:\xampp\prof"
xdebug.profiler_output_name = "cachegrind.out.%t-%s"
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_handler = "dbgp"
xdebug.auto_trace = 1
xdebug.trace_output_dir = "C:\xampp\trace"
xdebug.idekey = "phpstorm"
```
#### VSCode側の設定
デバッグ環境のVSCodeの設定です。
拡張機能の[PHP Debug](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug)を導入します。
その後`launch.json`の設定をします。デバッグタブを開いて歯車マークを選択しPHPを選べばOK
そうすると自動的に作られるはずで下記のようなものがあればOKです。

```
{
	"name": "Launch currently open script",
	"type": "php",
	"request": "launch",
	"program": "${file}",
	"cwd": "${fileDirname}",
	"port": 9000
}
```
## 拡張機能とか
VSCodeに入れたこれ関連の拡張機能のまとめです。上で書いたので`PHP Debug`は外してます
### Laravel Extension Pack
Laravelの便利な拡張機能を3つ使いしてくれます。どんなものが追加されるかというと

- [Laravel bladeのスニペット](https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade)
- [Laravel5 のスニペット](https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel5-snippets)
- [Artisanの実行できるやつ](https://marketplace.visualstudio.com/items?itemName=ryannaddy.laravel-artisan)

これ1個である程度できるから楽
最後のArtisanコマンドを実行できるやつを入れるとVSCodeでF1を押して出てくるとこに`artisan`と入れると各種コマンドを楽に実行できる。
![2.PNG](https://qiita-image-store.s3.amazonaws.com/0/204605/b3965f32-7266-4691-1250-68695e48d181.png)
https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-extension-pack
### Vetur
Vueファイルでのシンタックスハイライトやスニペット等いろいろと追加してくれるやつです。
デフォルトだとVueファイルはサポートされてないためVueを触るなら必須だと思います。
https://marketplace.visualstudio.com/items?itemName=octref.vetur

## 参考
[Visual Studio Codeを使ったPHPの開発環境の構築 (Windows, Mac)](https://www.sumirelab.com/docs/tech/php/visual-studio-code%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Fphp%E3%81%AE%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%81%AE%E6%A7%8B%E7%AF%89/)