【2020年6月版】VSCodeでTypeScript + Nodeプロジェクトをデバッグする

TL;DR

devinoue/typescript-node-project
こちらからご使用ください。

インストール

よく使うパッケージのインストール

基本的なパッケージを入れます。

yarn add -D ts-node ts-node-dev typescript @types/node

以下のような内容になっています。

パッケージ名	役目
ts-node	tscを使ってプリコンパイルなしにTypeScriptを実行するnpmパッケージ。 typescriptコンパイラはバンドルされていないので、別にインストールする必要あり。
ts-node-dev	ts-nodeでwatchをするために必要
typescript	TypeScriptコンパイラ
@types/node	Nodeのデフォルトモジュールの型定義。

tsconfig.json

TypeScriptのConfigファイルを作ります。この辺りは定型文ですね

npx tsc --init# tscがグローバルインストールされている場合
tsc --init

とはいえ、さすがに毎回tsconfig.jsonを設定しなおすのは面倒なので、僕は以下のようなものを使いまわしています。
(pathsプロパティを使って、ルートディレクトリからの絶対パスや相対パスの代わりに~ or @を使えるようにしています)

tsconfig.json

{"compilerOptions":{"target":"es2018","module":"commonjs","moduleResolution":"node","lib":["es6","dom"],"esModuleInterop":true,"rootDir":"./src","outDir":"./out","sourceMap":true,"strict":true,"experimentalDecorators":true,"emitDecoratorMetadata":true,"baseUrl":".","paths":{"~/*":["./src/*"],"@/*":["./src/*"]},"types":["@types/node"]},"exclude":["node_modules","dist","**/*.spec.ts"],"include":["src/**/*"]}

ESlint & Prettier

# ESlint
yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

#Prettier
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

eslintの設定ファイル(自分の場合)

.eslintrc.js

module.exports={env:{browser:true,es6:true,node:true,},extends:['eslint:recommended','plugin:@typescript-eslint/recommended','plugin:prettier/recommended','prettier/@typescript-eslint',],globals:{Atomics:'readonly',SharedArrayBuffer:'readonly',},parser:'@typescript-eslint/parser',parserOptions:{sourceType:'module',},plugins:['@typescript-eslint'],rules:{'prettier/prettier':[2,{singleQuote:true,semi:false,arrowParens:'always',parser:'typescript',},],'@typescript-eslint/explicit-function-return-type':'off','@typescript-eslint/explicit-module-boundary-types':'off',},}

package.jsonのscripts

package.json

"scripts":{"dev":"ts-node src/index.ts","dev:w":"ts-node-dev --respawn ./src/index.ts","build":"tsc","start":"node out/index.js","lint":"eslint --ext .js,.ts --ignore-path .gitignore ."},

yarn dev:wで実行したまま作業したりできます。

VSCodeでのデバッグ関連

VSCode上でデバッグできるよう、以下のファイルを追加しておきます。

root
└ .vscode
　 ├ launch.json
　 └ tasks.json

tasks.json

{"version":"0.2.0","configurations":[{"type":"node","request":"launch","name":"Launch TypeScript","program":"${file}","preLaunchTask":"Compile TypeScript","cwd":"${workspaceFolder}","console":"integratedTerminal","outFiles":["${workspaceFolder}/out/**/*.js"]}]}

このコンパイルをするのが以下のtasks.jsonになります

tasks.json

{//tasks.json形式の詳細についての資料は、//https://go.microsoft.com/fwlink/?LinkId=733558をご覧ください"version":"2.0.0","tasks":[{"label":"Compile TypeScript","type":"typescript","tsconfig":"tsconfig.json","problemMatcher":["$tsc"]}]}