How to make Visual Studio Code adapt for Angular
最近のはやりのWebアプリケーション開発ツール Angular を Visual Studio Code で利用する方法を調べてその結果をまとめました。環境
- Windows 10
- Visual Studio Code 1.17.1
Node.js をインストールする
Node.js は Angular で使われるWebサーバーやツールが含まれている実行環境です。Node.js を公式サイト https://nodejs.org/en/ からダウンロードしてインストールします。
今回は Recommended For Most Users のインストーラーをインストールしました。
Angular CLI をインストールする
Angular CLI はAngularを利用するためのツール集です。Node.js に含まれる npm コマンドが必要です。
コマンドプロンプトから次のコマンドを入力します。
Angular プロジェクトを作成する
Cドライブのルートにサブフォルダーを作り、そこに開発するプロジェクトを作成します。コマンドプロンプトから次のコマンドを入力します。
1行目はカレントフォルダーの移動、3行目が Angular プロジェクトを作成するコマンドです。
ng は Node.js に含まれるコマンドです。
ang-app というフォルダーに "Welcome to app!!" というAngularアプリケーションのひな形が作られるので次のコマンドで起動します。
ng serve はAngularプロジェクトをWebサーバーで起動させるコマンドです。
下の画像のように Compiled successfully と表示されたら
Webブラウザーで http://localhost:4200/ を開くと次のような画面が表示されれば成功です。
コマンドプロンプトに Compiled successfully と表示されている間は"Welcome to app!!"が起動したままですが、コマンドプロンプトで Ctlr + C を入力すると停止できます。
Visual Studio Code で Angular プロジェクトを開く
コマンドプロンプトに次のコマンドを入力するとVisual Studio Code で Angular プロジェクトのフォルダーを開けます。
Angular開発するために Visual Studio Code に拡張機能をインストールする必要があると思ったのですが、デフォルトでシンタックスハイライトやコード補完が機能していました。
F12キーで「定義に移動」もできました。
ng serve を開始して app.component.ts を編集して上書き保存したら自動で再コンパイルされWebブラウザーがリロードし、結果を即座に確認できました。
結論
Visual Studio Code は Angular の開発環境としてそのまま使えるただしHTMLを WYSIWYG でコーディングできないので、HTMLをプレビュー表示する拡張機能をインストールするかほかのエディターとの併用すると良さそうです。
今回はコマンドラインの入力にコマンドプロンプトを使いましたが、Visual Studio Code のターミナルを使うと効率が上がりそうです。
参考にしたコンテンツ
Angular JavaScript Tutorial in VS CodeHome · angular/angular-cli Wiki · GitHub
関連ブログ
Vsiaul Studio Code のターミナルを Bash に設定する方法WindowsでUnix用GUIツールを実行する方法
Unity3D のC#スクリプトを Visual Studio Code で編集する方法
