SE(たぶん)の雑感記

一応SEやっている筆者の思ったことを書き連ねます。会計学もやってたので、両方を生かした記事を書きたいと考えています。 でもテーマが定まってない感がすごい。

VSCodeデバッグ前に任意のタスクを実行させる

最近Djangoの記事ばかり書いていますが、今回もそういう記事です。

現在、DjangoTypeScriptを使って、ちょっとしたサイトを作っています。

Visual Studio Codeを使って開発しており、DjangoデバッグF5キーからできるため、重宝しています。

しかし、TypeScripttscというツールでビルドしてからJavaScriptに変換しているため、Djangoデバッグ前にビルドする必要があります。*1

つまり、デバッグする際には

という手順を踏んでおり、前者が非常に面倒です。

そこで、それを自動化してみたので、紹介します。

バージョン

種類 バージョン
Visual Studio Code 1.28.2
node.js 8.12.0
Python 3.7.0
Django 2.1.1
TypeScript 3.1.1

前提

  • TypeScriptがインストールされている
  • tsconfig.jsonの設定が終わっている(tscコマンドが正常に動く状態にある)
  • DjangoデバッグVSCodeから行える

VSCodeタスクの作成

Visual Studio Codeには、いろいろ設定があるのですが、今回はタスクというものを使います。

Ctrl + Shift +Pで、コマンドパレットを開き、taskと入力すると、「タスク:タスクの構成」というものが出てくるので、選びます。

f:id:hiroronn:20181022083019p:plain

選択すると、「tsc: ビルド」という項目が出てくるので、選びます。すると、

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

というような、tasks.jsonというファイルができます。(tsconfigのパスは環境によって異なる)

この状態で、「タスクの実行」を選択し、「tsc: ビルド」を選択すると、VSCodeのタスクとして、ビルドが実施されるようになります。

タスクをDjangoビルドから呼び出す

次に、Djangoビルド時に、上記タスクを呼び出すようにします。

tsc: ビルドにラベルを振る

Djangoの設定を行う前に、先ほど作ったタスクにlabelを振ります。

tasks.jsonを開き、

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

のように、「"label"」を追加します。値は任意でよいです。すると、

f:id:hiroronn:20181022084413p:plain

タスク名の部分に、設定したラベル名が表示されるようになります。

デバッグ設定

ラベル名設定後、launch.jsonを開き、Python: DjangopreLaunchTaskを追加します。。

        {
            "name": "Python: Django",
            "type": "python",
            "request": "launch",
            "program": "${workspaceFolder}/manage.py",
            "console": "integratedTerminal",
            "args": [
                "runserver",
                "--noreload",
                "--nothreading"
            ],
            "preLaunchTask": "build_ts",
            "django": true
        },

preLaunchTaskには、先ほどlabelで設定した名称を入力します。

Djangoデバッグ実行

labelの名前とpreLaunchTaskの名前が一致していると、デバッグ実行時に

Executing task: tsc -p …\ts\tsconfig.json

というような表示が出てきて、タスク実行を介してTypeScriptのビルドが実行され、その後Djangoデバッグが始まります。

ラベル名が誤っていると、エラーが出てくるのでわかりやすいです。

やり方を探している点

Djangoデバッグ時、TypeScriptデバッグできないのか、試している最中です。

それができると、さらに開発効率が上がるのに…という感じです。

現状、ブラウザでJavaScript自体をデバッグしているのですが、VSCodeだけでデバッグが賄えるなら、それに越したことはないと思っています。

もしかしたら、Debugger for Chrome拡張機能でできるのかもしれないので、後で試してみようと思っています。

おわりに

Web開発始めたばかりで、しかも手探りですが、ちょっとずつ勝手がわかってきた感じです。

業務アプリ的なものをWeb作る際の知見蓄積になっていて、すごくいろんなことが吸収できています。

まだまだ学ぶことは多いので、すごく楽しめています。今後も学んだことは発信します。

*1:デバッグ前である必要はないかもしれない。デバッグ前に同時にやっておきたい、という感じ

*2:VSCodeでターミナルを複数開いて実施している