hero_picture

WSL と VSCode を使って Vue の開発環境を整えてみる

2019/11/21
# Vue# WSL# VSCode

こんにちは, Web事業部の西村です

今回はタイトルにもある通り WSL(Windows Subsystem for Linux) と VSCode(Visual Studio Code) を用いてVueの環境を整えてみたいと思います

目次

なぜWSLを使うの？

まず, なぜWSLを使うかというお話です

cross-env というnpmパッケージがあります

npmスクリプトを実行する際に, 任意の環境変数に変更できるというものです

しかし, このパッケージはWindowsでは正常に動作しません

そこで, WSL内のLinux環境を使って開発を進め, 快適に開発しようということです

https://www.npmjs.com/package/cross-env

この記事で取り扱わないこと

  • WSLに関する解説
  • Linuxの解説
  • cross-envの解説
  • Vueに関する解説

WSLのインストール

  1. 設定を開き アプリ を選択します
  2. 画面右側にある 関連設定 の プログラムと機能 を選択します
  3. 新たに出たウィンドウにある Windowsの機能の有効化または無効化 を選択します
  4. さらにウィンドウが出るので Linux用Windowsサブシステム にチェックを入れます
  5. 再起動が促されるので再起動します

Linuxディストリビューションのインストール

下記のリンクからMicrosoft Storeに移動し好きなディストリビューションをインストールします

WindowsでLinuxを実行する

この記事では Ubuntu をインストールしたものとして解説します

VSCodeのインストール + 拡張機能のインストール

  1. 下記のサイトからインストーラーをダウンロードしインストールします
⚠注意インストール中 PATHへの追加 という項目がありますが, 必ずチェックを入れておいてください
  1. インストール完了後起動させ, 左側のタブから Extensions を選択します
  2. Remote と検索し Remote Development を追加します
  3. VSCodeを閉じます

Linuxの準備

  1. 先ほどインストールしたディストリビューションを起動させます (起動させるとターミナルが開き初期化が始まります)
  2. ユーザ名 / パスワードの入力が促されるので設定します
1Installing, this may take a few minutes...
2Please create a default UNIX user account. The username does not need to match your Windows username.
3For more information visit: https://aka.ms/wslusers
4Enter new UNIX username: <ユーザ名>
5Enter new UNIX password: <パスワード (表示されません)>
6Retype new UNIX password: <パスワード確認 (表示されません)>
7passwd: password updated successfully
8Installation successful!
9To run a command as administrator (user "root"), use "sudo <command>".
10See "man sudo_root" for details.
11
12ユーザ名@PC名:~$
  1. 下記のコマンドを順番に実行しアップデートを行います
1:~$ sudo apt update
2:~$ sudo apt upgrade -y
⚠注意アップデート中に YES/NO を聞かれる部分があると思いますが, YESを選択してください
  1. 下記のコマンドを実行し Node.js をインストールします
1:~$ curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
2:~$ sudo apt install -y nodejs
  1. 下記のコマンドを実行し Vue CLI をインストールします
1:~$ sudo npm install -g @vue/cli
  1. サンプルのプロジェクトを作成するために下記のコマンドを実行します
1:~$ vue create sample_project

すると次のような表示が出ますのでそのまま Enter します

1Vue CLI v4.0.5
2? Please pick a preset: (Use arrow keys)
3❯ default (babel, eslint)
4  Manually select features

しばらくすると初期パッケージのインストールが完了します

  1. インストールが完了したらVSCodeで先ほど作成したWSL内のプロジェクトを開きます
1:~$ code sample_project/
⚠注意 ここでVSCodeが起動しない場合,パスが設定できていませんので再度インストールしてみてください

ここまでの手順がうまくいった場合, WSL内のプロジェクトがWindowsのVSCodeで見ることができるようになっているはずです

また, 先ほどまで利用していたターミナルは閉じても問題ないです

1:~$ exit

追加の拡張機能と動作確認

1: 起動したVSCodeの Extensions で Vue と検索し, Vetur という拡張機能をインストールします

2: Ctrl + Shift + @ を押しターミナルを起動させ下記のコマンドを実行します

1:~/sample_project$ npm run serve

するとビルドが始まり, 開発用のサーバが起動します

  1. http://localhost:8080/ にアクセスし, 画面が表示されるかどうかを確認します

最後に

いかがでしょうか, Windowsのみを使い続けている人にはきつい内容かもしれませんが, 1度整えてしまうと使いやすい環境なのではないでしょうか？

Windowsだけれども, UbuntuやMacみたいに開発できるといった点ではメリットなのかもしれません

しかし, WSLでは動作が遅いため, 来年に一般公開される予定の WSL2 が待ち遠しい限りです(WSL2では速度面が大幅に解消されています)

ここまで読んでいただきありがとうございました

蛇足？

(A ・ω・)Dockerでもいいんじゃね？　　うん(・ω・私)