React + Laravel 開発時のVS Code拡張まとめ

# どちらにでも使える拡張
## [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)
メソッドや関数内で、ペアとなる括弧を色付けしてくれる拡張。どの関数内でどの処理が実行されるのか一目瞭然なので重宝しています。
> インストールサイトから引用
![image](https://github.com/CoenraadS/BracketPair/raw/master/images/example.png)

## [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
英語の表記誤りを指摘してくれる。キャメルケースやスネークケースにも対応。
ただ、サードパーティのメソッドもチェックしてくれてしまうので、うっかり直さないように注意。
> インストールサイトから引用
![image](https://raw.githubusercontent.com/streetsidesoftware/vscode-spell-checker/master/packages/client/images/example.gif)

## [Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)
正規表現のプレビュー用拡張です。JSでもphpでも正規表現はよく使うので重宝しています。
> インストールサイトから引用
![image](https://github.com/chrmarti/vscode-regex/raw/master/images/in_action.gif)

## [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)
コメントで

```
//TODO
```
としたものを一覧で表示してくれます。プロジェクトのコード全体のTODOを見渡したい時にとても便利です。
> インストールサイトから引用
![image](https://raw.githubusercontent.com/Gruntfuggly/todo-tree/master/resources/screenshot.png)

# JS/Reactに関する拡張

## [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

自動で対応する閉じタグを作ってくれ、その上、タグを変更した時に閉じタグの名前も変更してくれる拡張機能。
Auto Close Tagという同じ人が作った拡張もあるが、こちらの方が上位互換という印象。

> インストールサイトから引用
![image](https://github.com/formulahendry/vscode-auto-rename-tag/raw/master/images/usage.gif)

## [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
コードを自動整形してくれる。プロジェクト内でのReactのコードを統一するために使っています。

## [JS Refactor](https://marketplace.visualstudio.com/items?itemName=cmstead.jsrefactor)
JSをリファクタリングする時に使用できる。変数名などを一括して変えたい時にとても便利。

## [TypeScript Import](https://marketplace.visualstudio.com/items?itemName=kevinmcgowan.TypeScriptImport)
`TypeScript`の`import`を自動で保管してくれます。Reactを書いている時もとても良い感じに補完してくれるので便利です。

> インストールサイトから引用
![image](http://i.imgur.com/XB4JPyy.gif)


# PHPやLaravelで使える拡張

## [DotEnv](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)
.envのシンタックスハイライトをしてくれる。
> インストールサイトから引用
![image](https://github.com/mikestead/vscode-dotenv/raw/master/images/screenshot.png)

## [PHP Class Generator](https://marketplace.visualstudio.com/items?itemName=damianbal.vs-phpclassgen)
Laravelの`artisan`コマンドで賄えないようなクラスを作る時に非常に重宝しています。ディレクトリを見て`namespace`まで自動で付与してくれる機能がとても強力です。
> インストールサイトから引用
![image](https://media.giphy.com/media/k6rabYSQx2RcwbQKed/giphy.gif)

## [php cs fixer](https://marketplace.visualstudio.com/items?itemName=junstyle.php-cs-fixer)
こちらはPHPソースの自動整形に使う拡張です。Laravelは`PSR2`に対応しているので、開発時も同様の規約でソースを書くことができます。

## [PHP DocBlocker](https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker)
作成したメソッドに合わせて`PHPDoc`を自動で生成してくれます。心地よいコード補完のために、`PHPDoc`もストレスなく書きたいですね。

## [PHP Intelephense](https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client)
PHPのコード補完用の拡張です。非常に強力で個人的には、`PHP Intelesense`よりも補完機能が良かったと感じています。

## その他、Laravelに関する機能
[こちら](https://qiita.com/motuo/items/5c9b24606ef75535f882)に集約しています。

# 最後に
`VS Code`の拡張は種類も多く、どれを使ったら良いのか？と思うことが多かったのでまとめてみました。
社内のプロジェクトチーム内で話しても、いろいろな発見があったので試してみると良いと思います。