モーリーのメモ

アプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

Visual Studio Codeでコード編集&デバッグする!:Cocos Creator

<今回やること!>
 Cocos CreatorのコードエディタをVisual Studio Code(以下、VSCode)に切り替えます。
 VSCodeでWebデバッグするための設定を行います。
 
 Cocos Creatorに最初から組み込まれているコードエディタはデバッグ機能がありません。
 また、なぜか文章の切り取り→貼り付けが出来ません。
 
 今までデバッグは、Chromeデベロッパーツールとコードエディタを行き来しながら行っていましたが、VSCodeではコードエディタ上でデバッグ出来るようになります。
 
 以降で、詳しいやり方を説明します。

使用環境

 今回使用した環境です。

VSCodeの入手とインストール

 VSCodeは、Microsoft製のコードエディタです。面倒な登録もなく無料で利用出来ます。
 下記のサイトで入手出来ます。
code.visualstudio.com

  1. 上記のページを開く
  2. ページ内の『Download for Mac Stable Build』をクリック
    VSCode-darwin-stable.zip』がダウンロードされます。
  3. ダウンロードした『VSCode-darwin-stable.zip』をダブルクリックして解凍
  4. 解凍して出来た『Visual Studio Code』をApplicationsフォルダに移動
 インストールは、以上です。
 初回起動時、ダブルクリックで開けない場合は、『右クリック→開く』から開きます。

Cocos CreatorのコードエディタをVSCodeに切り替える

  1. Cocos Creatorを起動
  2. 新規でも既存でも、どれでも良いのでプロジェクトを開く
  3. Cocos Creatorのエディタ側のメニューバーの『Cocos Creator』-『Preferences』をクリック
    f:id:mmorley:20170808222322p:plain
  4. 『Editor Window』の左側の『Data Editor』をクリック
  5. 『External Script Editor』の『Browse』ボタンをクリックし、Applicationsフォルダの『Visual Studio Code』を選択
  6. 『Save and Close』ボタンをクリック
    f:id:mmorley:20170808120623p:plain:w500
  7. エディタのメニューバーの『Developer』-『VS Code Workflow』-『Install VS Code Extension』をクリック
    f:id:mmorley:20170808231701p:plain
     VSCodeの『拡張機能』に、『Cocos Debug』と『cocos-creator』がインストールされます。
 コードエディタの切り替えは、以上です。
 設定は、全てのプロジェクトで共通です。
 Cocos CreatorのAssetsフォルダ内のスクリプトファイルがVSCodeで開くようになります。

VSCodeデバッグする

  1. VSCodeを起動
  2. 画面左端のf:id:mmorley:20170808234311p:plain拡張機能)をクリック
  3. 『Debugger for Chrome』の『インストール』をクリック
    『Debugger for Chrome』が見つからない場合は検索して下さい。
    f:id:mmorley:20170808232725p:plain
  4. Cocos Creatorデバッグしたいプロジェクトを開く
  5. Cocos Creatorのエディタ側のメニューバーの『Developer』-『VS Code Workflow』-『Add Chrome Debug Setting』をクリック
    VSCodeデバッグ設定ファイル『launch.json』がプロジェクトに追加されます。
  6. 画面左端のf:id:mmorley:20170809100245p:plainデバッグ)をクリック
  7. 画面左上の『デバッグ開始』をクリック
    Chrome』が立ち上がり、デバッグが開始されます。
    f:id:mmorley:20170809102207p:plain
ブレークポイントについて】
 デバッグ開始では、ブレークポイントで停止してくれません。
 デバッグ開始後に『再起動』を行うとブレークポイントで停止します。
    f:id:mmorley:20170809102226p:plain

構文ハイライトとオートコンプリートの設定

 構文ハイライトとオートコンプリートには、プロジェクトフォルダ内に作られる『creator.d.ts』が必要です。
 この『creator.d.ts』は、プロジェクト生成時に最初から含まれています。
 ファイルを手動で追加するには、エディタのメニューの『Developer』-『VS Code Workflow』-『Update VS Code API Source』をクリックします。

    f:id:mmorley:20170809105528p:plain

あとがき

 VSCodeは複数起動出来ないところがネックです。他のプロジェクトもからテキストをコピーしたい時があるので方法を探しています。
 ちなみに、Cocos Creatorの内部エディタは複数起動出来ます。