Visual Studio CodeでMonacaアプリを開発する

Microsoftが開発しているプログラミングエディタがVisual Studio Codeです。Atomをベースにしたエディタとなっており、元々幾つかの機能が組み込まれているのが特徴となっています。さらに機能拡張にも対応しているので機能追加も可能です。

今回はMicrosoft社がリリースしたCordova Toolsというプラグインを使ってみたいと思います。これはVisual Studio Code上でCordovaアプリを開発できるようにするものです。ファイルの配置を変えればMonacaアプリの開発でも使えそうなので、Monaca Localkitで開発する際のエディタとして使ってみるのが良さそうです。

事前準備

まずNode.jsがインストールされている必要があります。そして、コマンドプロンプトやターミナルでcordovaをインストールします。

npm install -g cordova

次にiOSをターゲットする場合、Mac OSX側でライブラリをインストールします。WindowsではiOSに対応したデバッグは未対応です。Homebrewを使うのが推奨されています。

brew install ideviceinstaller ios-webkit-debug-proxy

これで準備は完了です。

インストール

Visual Studio Codeを立ち上げて、Ctrl+Shift+P（Mac OSXの場合はコマンド+Shift+P）を押します。そして出てきたフローティングで install と入力します。そうするとInstall Extensionが一番上に出ますのでエンターキーを押します。

ext install と出たら、cordovaと入力します。そうするとCordova Toolsが出るので、エンターキーを押してインストールを行います。進捗は出ませんが、しばらく待つとインストールが完了します。

プロジェクトの作成

Monacaプロジェクトを作成します。なお、LocalKitを対象としていますので注意してください。プロジェクトを追加したら、別途作成しておくCordovaプロジェクトのplatforms/ios（またはplatforms/android）以下のファイルをMonacaアプリのplatforms以下にコピーしてください。

Visual Studo Codeでプロジェクトを開く

ではVisual Studio Codeを立ち上げて、Monacaアプリのプロジェクトを開きます。このようにIDE風にファイルやフォルダが表示されます。

行の左側をクリックしてブレイクポイントを設定できます。

デバッグは左側にある虫のアイコンをクリックします。そしてSelect Debug EnvironmentでCordovaを選択してください。

そうすると左上に環境の選択が出ます。iOS/Androidのシミュレータやエミュレータ、そして実機での実行が選択できるようになっています。

さらにコンソールをつなげてJavaScriptを実行させることもできます。

Visual Studo Codeの機能について

Visual Studo Codeを使って変数の一覧、ウォッチ、コールスタックそしてブレイクポイントの設定ができます。まだリリースされたばかりとあって不安定な（ちゃんとブレイクしないなど）ところもありますが、MonacaやCordovaアプリを本格的に作り込んでいく際にはとても役立ちそうです。

Visual Studio Codeは最初からGit連携やデバッグ機能があり、プログラミングエディタとして十分な機能が備わっています。Atomがベースとあって、最近のモダンな開発に最適なエディタとなっています。ぜひVisual Studio Codeを使ってMonacaアプリの開発を進めてみてください。

Apache Cordova development lands on Visual Studio Code | The Visual Studio Blog