LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@yaju(やじゅ)

MacのVSCodeでTypeScriptのデバッグ環境を作成する

Posted at

はじめに

10年くらい前にWindows上でTypeScriptを組んでいたことがありましたが、そこから離れていました。
作りたいものが出来たので、JavaScriptではなくTypeScriptで最初から組もうするも環境構築からハマりました。10年経ってるんだから簡単になっていると思いきや意外と難しい。

そもそも仕組みを理解する必要がありますね。

node.jsの用意

下記サイトを参照に始めました。

node.js と npm がインストールされているかを確認し、最新に近いところまで バージョンアップ しました。

% node -v
v22.12.0

% npm -v
10.9.0

TypeScriptをインストール

1.適当な場所にディレクトリを作成

筆者はworkspaceフォルダに色々なプロジェクトを作成しているので、今回はその中にtestフォルダを作成します。　

% mkdir test

2.作成したディレクトリの中で npm initを実行

実行したときに色々聞かれる、そのままひたすらエンターでも良さそう。

% cd test
test % npm init

これで、package.json が作成されます。

package.json
{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "typescript": "^5.7.2"
  }
}

3.ローカルにTypeScriptをインストール

test % npm install --save-dev typescript

これにより、testフォルダ配下にnode_modules フォルダが作成されます。

test % tsc -v                           
Version 5.7.2

4.tsconfig.jsonを作成

test % node_modules/.bin/tsc --init

生成されたtsconfig.jsonは、コメントアウトされたパラメータまで記載されていて、ここに記載するには長過ぎるため、有効なパラメータのみ記載する。

tsconfig.json
{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

VSCode

VSCode で TypeScript を使うには、拡張機能「JavaScript and TypeScript Nightly」を追加する。

image.png

インデント

vscodeを起動し「Ctrl + Shift + p」でコマンドパレットを開きます。
コマンドパレットで「Preferences: Configure … 」と入力し、選択肢に表示される
「基本設定：言語固有の設定を構成します…」を選択します。

言語を選択します。今回は「TypeScript」の設定をします。

setting.jsonファイルが開くので、下記の設定を加えます。
tabSizeに字下げする文字数を指定します。今回は2にしました。
insertSpacesにtrueを指定すると、タブキーでスペースを挿入します。

setting.json
"[typescript]": {
  "editor.tabSize": 2,
  "editor.insertSpaces": true        
}

作業ディレクトリ直下にtsファイルを作成

テストプログラムは、Hello Worldよりは実践的としてフィボナッチ数列にしてみました。

test.ts
const fib = (n: number): number => {
  if (n <= 2) {
    return 1;
  }
  return fib(n - 2) + fib(n - 1);
};

for (let i = 1; i <= 10; i++) {
  console.log(fib(i));
}

ビルド設定

VSCodeでデバッグしたい場合、tasks.jsonとlaunch.jsonを作成する必要がある。

tasks.jsonの作成

この段階では、まだタスクが作成されていないため、メニューバーのターミナルから「既定のビルドタスクの構成」を選択します。テンプレートからtasks.jsonを作成します。

tasks.json
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
          "label": "Compile TypeScript",
          "type": "typescript",
          "tsconfig": "tsconfig.json",
          "problemMatcher": ["$tsc"]
        }
      ]
}

作業フォルダに.vscodeフォルダが作成され、tasks.jsonファイルが保存されます。

launch.jsonの作成

サイドバーの「実行とデバッグ」をクリックします。
「launch.jsonファイルを作成します。」をクリックします。どの環境のProjectであるか？を聞かれるので、Node.jsを選択しました。

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

.vscodeフォルダ配下にlaunch.jsonファイルが保存されます。

デバッグ

console.logにブレークポイントを付けて、「▷Launch Program」をクリックします。

エラーで実行できない

「ビルド タスクを実行」をすると出力には下記エラーがでます。

エラー: typescript タスクの検出は、次の構成のタスクに貢献しませんでした:
{
    "label": "Compile TypeScript",
    "type": "typescript",
    "tsconfig": "tsconfig.json",
    "problemMatcher": [
        "$tsc"
    ]
}
そのタスクは無視されます。

tasks.jsonの修正

ネットで検索してtasks.jsonを比較し、groupが不足していたため追加して「ビルド タスクを実行」をすると上記エラーは出なくなり、test.jsが生成されるようになりました。

tasks.json
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
          "label": "Compile TypeScript",
          "type": "typescript",
          "tsconfig": "tsconfig.json",
          "problemMatcher": ["$tsc"],
          "group": {
			"kind": "build",
			"isDefault": true
		  }        
        }
    ]
}

デバッグできない

ブレークポイントでも止まりません。デバッグなしで実行しても結果が表示されません。
まだ何か足りていないようです。

デバッグ コンソールにはエラーが出ています。

 /usr/local/bin/node ./test.ts
 Process exited with code 1
>Uncaught /workspace/ccc/test.ts:1

tsconfig.jsonの修正

sourceMapをtrueを指定することで、出力されたJavaScriptファイルが実際に動作させるとき、デバッガーが元のTypeScriptソースファイルを表示できるようになるため、sourceMapを追加しました。

tsconfig.json
{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "sourceMap": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

これで「ビルド タスクを実行」後に、「▷Launch Program」をクリックすることで、ブレークポイントのconsole.logで止まり、デバッグができるようになりました。

image.png

最終結果
image.png

最後に

あとは、下記サイトのように別ファイルのimportを使った場合でも出来るかを確認したい。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?