いつも忘れていつもググりなおすのでメモ。

Visual Studio Codeを入れる

https://code.visualstudio.com/

これが前提。

ついでに

Debugger for Chromeのextensionも入れる。

Node.jsを入れる

https://nodejs.org/

Nodistを使っていれるとNode.jsのバージョンを切りかえられるらしい。

開発用フォルダの準備

開発用フォルダを準備する

Visual Studio Codeでそのフォルダを開く

Visual Studio CodeのメニューのTerminal -> New Terminalでコマンドプロンプトを出し、(以下Terminalは説明しない)

git init

で、そのフォルダのgitの初期化

npm init -y

で、npmの初期化(package.jsonの作成)をする。

“main”: “index.js”

を

“main”: “main.js”

に変更。

TypeScriptを入れる

Terminalで

npm install typescript

または

npm install – g typescript

-gなしなら./node_modules/.binに、-g をつけるとグローバルにインストールされる。

./node_modules/.bin/tsc –init

でtypescriptの設定の初期化(tsconfig.jsonの作成)

tsconfig.jsonの編集

• compilerOptions
  • target
  • sourceMap
  • outDir : “./js/”
  • などなど

Buildとデバッグの設定

メニューのTerminal -> Configure Default Build Taskから tsc : build – tsconfig.jsonを選択。.vscode/tasks.jsonが作成される。

(別にbuildじゃなくてwatchでもいいけど)

メニューのRun -> Add Configuration…からChromeを選択。./vscode/launch.jsonが作成される。

適宜編集。

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

を

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome by file",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceFolder}/index.html"
        }
    ]
}

な感じに。

あとは、./main.tsと./js/main.jsを参照する./index.htmlを書いて、Ctrl+Shift+Bでビルド、F5でデバッグです。