Visual Studio CodeでFlaskをデバッグする環境を作る on Mac

仕事でFlaskを使ったアプリケーションを作る機会があり、Visual Studio Code(VSCode)で環境を整えましたので、その備忘録です。

前提

VS Code、Python、Flaskはインストールしておいてください。

$ python --version
Python 3.6.0 :: Anaconda custom (x86_64)
$ pip list
・・・
Flask (0.12)
・・・

拡張機能のインストールと設定

VS CodeにPythonの拡張機能をインストールします。

https://marketplace.visualstudio.com/items?itemName=donjayamanne.python

プロジェクトフォルダとプログラムの作成

プロジェクト用の空フォルダを作成し、Pythonファイルをapp.pyという名前で作成します。 /でアクセスすると"Hello World!“とだけ表示されるFlaskアプリケーションです。

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!"

if __name__ == '__main__':
    app.debug = True
    app.run(host='localhost', port=5000)

デバッグ構成ファイルの編集

VSCodeのメニューから[デバッグ]＞[構成を開く]でlaunch.jsonを開いて、Flaskの設定を編集します。 configurations内の"name": "Flask"を編集します。無ければ以下のように追加してください。

ここではプロジェクトフォルダ直下のapp.pyを実行するので、programとenvのFLASK_APP環境変数で、${workspaceRoot}/app.pyを指定します。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flask",
            "type": "python",
            "request": "launch",
            "stopOnEntry": false,
            "pythonPath": "${config:python.pythonPath}",
            "program": "${workspaceRoot}/app.py",
            "cwd": "${workspaceRoot}",
            "env": {
                "FLASK_APP": "${workspaceRoot}/app.py"
            },
            "args": [
                "run",
                "--no-debugger",
                "--no-reload"
            ],
            "envFile": "${workspaceRoot}/.env",
            "debugOptions": [
                "WaitOnAbnormalExit",
                "WaitOnNormalExit",
                "RedirectOutput"
            ]
        }
    ]
}