VSCode覚書

概要

VSCodeについての覚書

HelloWorld(TypeScript)

対象のディレクトリを作る

$ mkdir typescript

フォルダを開く

tsconfig.jsonを作る

[ファイル] -> [新規ファイル]

{
    "compilerOptions": {
        "target": "ES5",
        "sourceMap": true,
        "module": "commonjs"
    }
}

HelloWorld.tsを作る

[ファイル] -> [新規ファイル]

function main()
{
    console.log("Hello, World.");
}

main();

ビルド

HelloWorld.tsを選択している状態で以下を実行すると.vscode以下にtask.jsonが作成される

HelloWorld.tsを選択している状態でビルドタスクの実行をするとjsやjs.mapファイルができる

実行

Node.jsを実行する

• プログラムを変更した場合は「ビルドタスクの実行」からやる
  • でないと変更前のプログラムが実行される
• ショートカット
  • 「Ctrl + Shift + b」でビルドが終わってから「Ctrl + F5」

NEM/Symbol開発設定

GettingAccountInformation.tsを実行する設定

// GettingAccountInformation.ts
import {Address, RepositoryFactoryHttp} from 'symbol-sdk';

/* start block 01 */
// replace with recipient address
const rawAddress = 'TAD4HT-CTLXDH-BZWRGJ-73LQYV-OI6SD4-BCD4W5-7AZ7';
const address = Address.createFromRawAddress(rawAddress);
// replace with node endpoint
const nodeUrl = 'http://127.0.0.1:3000';
const repositoryFactory = new RepositoryFactoryHttp(nodeUrl);
const accountHttp = repositoryFactory.createAccountRepository();

accountHttp
    .getAccountInfo(address)
    .subscribe((accountInfo) => console.log(accountInfo),
        (err) => console.error(err));
/* end block 01 */

モジュールのインストール

$ npm install symbol-sdk@0.19.2 rxjs

tsconfig.json作成

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "sourceMap": true,
        "strict": true,
        "esModuleInterop": true,
        "skipDefaultLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "watch": true
    },
    "compileOnSave": true
}

• strict
  • 様々なオプションをtrueにする
    • 厳密なチェックが行われエラーが出やすくなるオプションなど
• esModuleInterop
  • モジュールを読み込むときの振る舞いをBabelに近づけるようなイメージ
    • esModuleInterop オプションの必要性について
  • skipDefaultLibCheck
    • デフォルトのライブラリの宣言ファイルの型のチェックをスキップ
  • forceConsistentCasingInFileNames
    • 同じファイルへの一貫性のない参照を禁止

タスクの構成
ビルドタスクの実行
実行

tsconfig.json

tsconfig.jsonとは

アプリのビルド時にJavaScriptへコンパイルする対象となるTypeScriptファイルと、それらをJavaScriptコードへコンパイルする際のコンパイルオプションなどを指定するファイル。通常プロジェクトのルートディレクトリに配置する

コンパイル

### プロジェクトファイルの中で実行
$ tsc

### ファイルを指定する場合
$ tsc -p tsconfig.json

構成

最小構成

{
}

プロジェクトのルートディレクトリ以下にある全ての.tsファイルがコンパイル対象となる

例1

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es3",
    "noImplicitAny": false,
    "outDir": "built",
    "rootDir": ".",
    "sourceMap": false
  },
  "exclude": [
    "node_modules"
  ]
}

• compilerOptionsプロパティ
  • tscコマンド実行時のコマンドライン引数を指定(デフォルト値)
    • "module": "commonjs" はコマンドラインでは --module commonjs
    • 実際にコマンドラインで実行する場合に同じ引数を指定した場合そちらが優先される
  • オプションについて
    • module
      • 生成するJavaScriptモジュールの形式
    • target
      • 生成するJavaScriptコードのバージョン
    • noImplicitAny
      • trueに設定すると、TypeScriptの型推測でAny型となった式／宣言があったときにはエラーメッセージが生成されるようになる
    • outDir
      • 出力先のディレクトリ
    • rootDir
      • プロジェクトのルートディレクトリ（tscコマンドに渡すTypeScriptコードを含んだルートディレクトリ）
    • sourceMap
      • trueに設定すると、対応するソースマップファイル（.js.mapファイル）が生成されるようになる
      • ソースファイルはTypeScriptコードとそこから生成されたJavaScriptコードとの対応関係を記述
• excludeプロパティ
  • tscコマンドによるコンパイルの対象外となるファイルまたはディレクトリを指定
• filesプロパティ
  • コンパイル対象のファイルを列挙する
  • ただしfilesプロパティに指定したファイル内で「filesプロパティには指定されていないファイル」を参照していた場合には、そのファイルもコンパイルの対象となる
    • Bar.tsファイルではFoo.tsファイルが公開する関数を利用しているとき、Bar.tsのみ指定していてもFoo.tsもコンパイルされる

手動コンパイル不要設定

デフォルトではプログラム変更する毎にコンパイルをやり直す必要があるが
以下の設定でコンパイルのやり直し不要になる。

// tsconfig.json
{
  "compilerOptions": {
      "target":"ES5",
      "sourceMap": true,
      "module": "commonjs",
      "watch": true         <- 追加
  },
  "compileOnSave": true     <- 追加
}

この状態になるとプログラム変更後にコンパイルせずプログラムを実行するだけで良くなる。

リンク

• tsconfig.jsonの全オプションを理解する（随時追加中）
• tsconfig.json（TypeScript構成ファイル）
• コンパイラ・オプション

launch.json

実行するときのオプションなど指定

symbol-cli開発時の例

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/build/src/cli.js",
            "args": ["block", "header", "--height", "1"]
            //"args": ["account", "info"]
        }
    ]

• program
  • nodeコマンドを実行するときのjsファイルを指定
• args
  • コンパイル時につけるオプション

task.json

TypeScript向けBuild/Watchタスクを定義する。

1ファイルをコンパイルする場合

{
    "version": "2.0.0",
    "tasks": [
        {
            "command": "tsc",
            "args": ["${workspaceFolder}/account/CreatingAnAccount.ts"],
            "problemMatcher": [
                "$tsc"
            ],
            "label": "tsc: compile tsfile"
        }
    ]
}

• problemMatcher
  • 設定するとエラーカ所をハイライトしてくれるっぽい？

リンク

• tasks.json
• Visual Studio Codeの使い勝手をよくするツール

.js.mapファイル

元の.jsファイルとの行単位での関係を示し、このファイルを元にデバッグできる

例

### HelloWorld.js
### 末尾に.js.mapファイルへのパスのコメントが追加される
================================================
function main() {
    console.log("Hello, World.");
}
main();
//# sourceMappingURL=HelloWorld.js.map
================================================

### HelloWorld.js.map
================================================
{"version":3,"file":"HelloWorld.js","sourceRoot":"","sources":["HelloWorld.ts"],"names":[],"mappings":"AAAA,SAAS,IAAI;IAET,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;AACjC,CAAC;AAED,IAAI,EAAE,CAAC"}
================================================

エラー対応

対応するJavaScriptが見つからないため、プログラム～を起動できません。

状況

### /home/vagrant/symbol-cli
tsconfig.json
.vscode/launch.json
.vscode/task.json

### /home/vagrant/symbol-cli/src
GettingAccountInformation.ts

解消方法

「ビルドタスクの実行」でjsファイルを作成してから実行する

デバッグ実行してもブレークポイントで止まらない

状況

タイトル通り

解消方法

launch.jsonのPATHを正しく設定する

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/src/GettingAccountInformation.ts",
            "outFiles": [
                "${workspaceFolder}/src/**/*.js"
                //"${workspaceFolder}/**/*.js"   <- PATHが間違っており動かなかった
            ]
        }
    ]
}

※ 再び動かなくなった時はVSCodeを再起動すると動く場合もある

ProcessingERR The CLI cannot reach the node.

ソースからビルドしたsymbol-cliでコマンドを実行してもnodeに実行されない

状況

タイトル通り

解消方法

ユーザーの作成については以下実行できた

symbol-cli profile list が実行できればGeneration HashとNetwork Currencyを確認する

これをオプションで指定すれば実行できた

$ ./bin/symbol-cli profile create --generation-hash A956C113AEB76FEC72A19A6EECDB83CBA7C98647B8A63773E --namespace-id cat.harvest --divisibility 6
? Select the network type: ? TEST_NET
? Enter the Symbol node URL. (Example: http://localhost:3000): … http://localhost:3000
? Enter a profile name: … hoge
? Enter your wallet password: … ********
? Do you want to set the account as the default profile? … no
? Select an import type: ? PrivateKey

Account
...

symbol-cli profile list が実行できない場合はcurlで調べる

### 「networkGenerationHashSeed」を--generation-hash で指定
$ curl http://localhost:3000/node/info
{"version":0,"publicKey":"3FBC1B9D6229EC86BD7032FA6EDB35A9C0F9817BCBF10118DA3C9F1A27AF6C8E","networkGenerationHashSeed":"A956C113AEB76FEC72A19A6EECDB83CBA7C98647B8A63773EB51A3174626F91F","roles":2,"port":7900,"networkIdentifier":152,"host":"api-node-0","friendlyName":"api-node-0"}

Chromeのデバッグモードで [WDS] Disconnected!

Chromeのデバッグモードで題のエラーが発生していてHMR（Hot Module Reload : ソースを変更すると動的にページも変わる機能）が機能していない。

状況

オプションをつけずに npm run serve が実行される事により、VMのIPを自動的に取得してNetworkのIPが10.0.2.15 になってしまっていた。しかし、実際にホスト側からVMにアクセスする際のIPはVagrantfileの設定により 192.168.56.12 となっている

解消方法

以下のようにtasks.jsonを設定し、npmコマンドに引数を渡してタスクを実行した。

{
    "version": "2.0.0",
    "tasks": [
        {
            "command": "npm",
            "args": ["run", "serve", "--", "--host", "192.168.56.12"],
            "label": "npm run serve"
        },
    ]
}

リンク

• Visual Studio CodeではじめるTypeScript入門
• Visual Studio CodeでTypeScript開発のノウハウ (ブラウザ編)