Visual Studio Codeでcocos2d-js, typescriptの環境を構築する

cocos2d-js typescript vscode

sublime textでcocos2d-jsでの開発をしているのですが、Javaをメインでやっていたので静的な型付けがしたいです。あと、綺麗なJavascriptってどう書くんだ？的な疑問も出てきたので、サンプルになるソースが読んでみたい。

そこで、ずっと見て見ぬ振りしていたTypescriptを導入してみようと、エディタもvscodeに変えてみます。

Typescriptで入力補完やデバッグもできるみたいなので、本気でやってみる予定。もともとvscodeにも興味があったので、思い切って乗り換えも検討中です。（sublime textは、mac版での見た目や起動速度などには不満はないのですが、Windows版の日本語入力やフォントや...）

環境

インストール手順

  • node.jsのインストール

homebrew使ってインストール。homebrewのインストールは別途ググってください。

$ brew install node

$ node -v #バージョン確認
  • typescriptのインストール

node.jsのパッケージとして「typescript」をインストール。「 -g」指定でグローバルインストール。

$ npm install typescrit -g

$ tsc -v #バージョン確認

公式からパッケージをダウンロードしてインストール。

Microsoft Virtual Academy のご紹介

vscodeの設定

何はともあれ、カスタマイズ。

ここに書いた以外にも設定がいっぱいあります。いい設定があれば追記、または別記事でまとめよう。

空白文字を見えるようにする

「Command + ,」でsetting.jsonを開き、以下を追加。

    // エディターで空白文字を表示するかどうかを制御します
    "editor.renderWhitespace": true

末尾の空白を除去する

「コマンド＋,」でsetting.jsonを開き、以下を追加。

    // 有効にすると、ファイルの保存時に末尾の空白をトリミングします。
    "files.trimTrailingWhitespace": true,

ビルドの設定

「Command + Shift + p」でコマンドパレットを開いて「task」と入力し「タスク: タスクランナーの構成」を選択。

「typescript tsconfig.json」を選択すると「tasks.json」ができる。

これで「Command + Shift + b」でビルド可能。

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "."],
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}