VS Codeの拡張機能とデバック設定

Angularプロジェクトを快適にコーディングするためのVS Codeの拡張機能とデバック設定について

拡張機能

• Angular Essentials
  • Angularプロジェクトに便利な拡張機能の一式をインストールしてくれる。
• Debugger for Chrome
  • Chromeでのデバックに必要。
• EditorConfig for VS Code
  • ファイルフォーマッタ。
• TSLint
  • TSLintは2019年に廃止されESLintへの移行が勧められてるがAngular10時点ではまだ対応されてない。
  • 参考：github - angular/angular-cli - issues Migration to ESLint

Angularプロジェクトのデバック設定

作業ルートディレクトリに.vscodeフォルダを作り、その下にlaunch.jsonファイルを作成する。

.vscode/launch.jsonの内容

{
  "version": "0.2.0",
  "configurations": [
      {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome against localhost",
          "url": "http://localhost:4200",
          "webRoot": "${workspaceFolder}"
      },
      {
          "type": "chrome",
          "request": "attach",
          "name": "Attach to Chrome",
          "port": 9222,
          "webRoot": "${workspaceFolder}"
      }
  ]
}

F5キーでデバックモードで動作し、ブレークポイントなど実行できる。