【VSCode Remote】10秒でNuxt環境を構築【脱WebStorm】

先日、[Visual Studio Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview)が発表されました。これを使うと拡張機能や実行環境をリモートで完結きます。

# NuxtでVSCode Remoteを使うメリット

- ローカル環境にNode.jsやyarnをインストールせずに開発でき、ローカル環境を一切汚さずに開発できる。
- Node.jsのバージョン管理をしなくてよくなる。
- 拡張機能をリモート環境に事前にインストールできるため、一緒に開発する人の環境を統一できる。
- ESLintやPrettierやデバッグ環境の設定を個々人で設定しなくていい。
- パッケージをインストールするとき、OS依存パッケージを考慮しなくていい。
- Dockerが使えるのでCI/CD環境と開発環境が統一でき、k8sやCloud Runにデプロイするときも楽。(AppEngineやCloud FunctionsもVSCode Remoteで開発したい(gcloudコマンドインストールするのめんどい))
- 脱WebStormができるため、JetBrainsにお布施しなくてよくなり、金銭的余裕ができる。
- Evan Youに近づける

# 10秒でNuxt環境を構築する
## 事前準備
#### Dockerのインストール
```bash
sudo apt install -y docker.io && sudo usermod -aG docker $USER && sudo reboot
```

#### VSCode InsidersとRemote Development拡張機能のインストール
```bash
wget --content-disposition https://update.code.visualstudio.com/latest/linux-deb-x64/insider \
    && sudo dpkg -i code-insiders*.deb \
    && code-insiders --install-extension ms-vscode-remote.vscode-remote-extensionpack
```

## リポジトリをクローン(1秒)
```bash
git clone https://github.com/GitHub30/vscode-remote-try-nuxt.git
```
リポジトリはこちら
https://github.com/GitHub30/vscode-remote-try-nuxt

## VSCodeでリポジトリを開く(1秒)
```bash
code-insiders vscode-remote-try-nuxt/
```

右下の **Reopen in Container** をクリックしてコンテナ内で開発できるようにする。
![Screenshot from 2019-05-09 00-59-34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/12fafe3e-f00a-a4a9-ed07-0f6924951070.png)

コンテナのインストールが始まる。
![Screenshot from 2019-05-09 01-04-44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/c8be14b2-897a-d964-56dc-cb0b93899c57.png)

## Nuxt環境を作成(5秒)
New Terminal(<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>\^</kbd>) を押し、 `yarn create nuxt-app .` を実行し、Nuxt環境を作成する。

![Screenshot from 2019-05-09 01-10-18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/8df3b910-692a-0b88-392b-508778361db1.png)

**Linter/Formatter**, **Prettier** を入れておくと構文チェックやフォーマットが楽になります。フレームワークはお好みで。

## 開発サーバーを起動(3秒)
`yarn run dev` を実行しサーバーを起動します。

![Screenshot from 2019-05-09 01-16-35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/d5add70c-38f0-6cf0-97e2-e967e0ea088e.png)

http://localhost:3000 にアクセスすると *pages/index.vue* のページが表示されます。🎉
![Screenshot from 2019-05-09 01-18-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/c03714f7-a706-df3f-b6a5-5ed9dcfc2064.png)
コードを変更すると自動でブラウザに反映されます。

# コードのフォーマット
<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>I</kbd> でコードのフォーマットができます。
![Screenshot from 2019-05-09 01-22-37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/02146b52-79da-cf78-5369-9e48ff27f0f7.png)

Veturが予めインストールされているため、コードのハイライトや補完をしてくれます。本来であれば、拡張機能を個別にインストールしなくてはいけません。
VeturとPrettierとESLintの設定はすごく複雑なのですが、予め設定されています。本来であれば、HTMLのフォーマットのエラーが出て調査が必要です。(VeturのHTMLフォーマットがprettyhtmlになっているため)

# 構文チェック
ESLintによって構文エラーが赤く表示されます。 <kbd>Ctrl</kbd>+<kbd>S</kbd> で保存され自動的に最適なフォーマットになります。
![Screenshot from 2019-05-09 01-29-34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/d5d989c0-5654-fe31-3a84-065bfc2c4cf6.png)

本来であれば、保存時の設定をしないといけませんし、[Veturのドキュメント](https://vuejs.github.io/vetur/) を完全に理解し、設定を変更する必要があります。
**VSCode Remote** であれば、一切設定は必要ありません。
設定も拡張機能もnodeやyarnのインストールもコンテナが自動的に最適な状態にしてくれます。
また、コンテナを **Docker Hub** にアップロードして開発者全員に共有することもできます。

# コンポーネント定義へのジャンプ
<kbd>Ctrl</kbd> 押しながらホバーするとクイックビューで定義を確認でき、クリックでコンポーネント定義へジャンプできます。
![7p0ou-zce7l.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/b880b8d4-883c-bd04-1d2e-2f315cd8fb98.gif)


# ブレイクポイントを使用したデバッグ
`config.devtool = 'source-map'` を **nuxt.config.js** に追記し保存します。
![Screenshot from 2019-05-09 01-49-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/de33edba-26ba-876f-6b80-b527bbb0fee2.png)

**webpack:///pages/index.vue** にブレイクポイントをつけると変数の内容やスタックトレースを確認できます。
![Screenshot from 2019-05-09 01-55-58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/682703cb-06cc-3b0d-aece-fcad2f49744b.png)

VSCode上でのデバッグ
https://github.com/microsoft/vscode-chrome-debug/issues/832

**Vue DevTools** を使うとVuexのデバッグも可能です！
![Screenshot from 2019-05-09 01-58-27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/ff9b74f2-3f1a-ad6a-80ef-1e66bfed305e.png)

# まとめ
10秒でできましたでしょうか？
WebStormでやればESLintの設定が大変ですが、 **VSCode Remote** であれば簡単に最適な環境を作ることができます。

詳細はGitHubリポジトリを確認してください。
https://github.com/GitHub30/vscode-remote-try-nuxt

Microsoft Build 2019でVisual Studio Onlineが発表されたので今後はシンクライアントで開発していくのでしょうか。

### 今回使用した環境
- Ubuntu 19.04