使用Visual Studio Code編寫調試Python Flask程序

最近因爲工做關係，開始寫flask web程序，同事有用Vim的，有用PyCharm的。在調研了一通python的編輯器，IDE以後，發現Visual Studio Code相對比較適合我。

VSC有相對較全的功能，比較好看舒服的主題，良好的用戶體驗（我如今用Mac），啓動速度較快，插件體系強大。現將VSC的安裝配置過程記錄以下。

前置條件是，python 2.7 已經安裝完成，pip也已經搞定。

首先在Microsoft Visual Studio Code 網站上下載安裝程序，選擇對應的平臺，個人是osx的。

安裝完成後，啓動VSC，按 cmd+shift+P，啓動快速命令攔，輸入ext ins，就會發現第一個選項是安裝插件，點擊回車來到插件邊欄。或者能夠直接點擊最左邊一列圖標最下面那個，也會彈出插件邊欄。在插件邊欄輸入Python搜索，安裝Python 0.6.0插件。

安裝插件完成以後，點擊插件上的從新載入，或者重啓VSC，以便於載入插件。至此安裝完成，下面開始編輯器配置。

VSC採用了相似Sublime Text的全局->用戶->工做區層級配置的概念，後者能夠覆蓋前者，用戶只能編輯用戶配置喝工程配置，全局配置都是默認的。有一點VSC作的特別好的是，整個軟件的本地化特別好，連配置文件中也都是中文註釋。若是鼠標懸浮到用戶或者工做區的某項配置上，會有個popup中文顯示當前配置項的含義。若是想覆蓋並修改全局配置中的某一項，能夠懸浮到該配置項上，能夠看到文字左邊出現了一個鉛筆樣的圖標，點擊這個圖標便可將這條配置複製到用戶或者全局配置中作出修改，作的很是人性化。

好比個人用戶配置以下：

{
    "workbench.colorTheme": "Material Theme",
    "editor.fontSize": 13,
    "editor.lineHeight": 18,
    "editor.rulers": [80,100],
    // 配置 glob 模式以排除文件和文件夾。
    "files.exclude": {
        "**/*.pyc":true,
        "**/*.pyo":true,
        "**/.idea":true,
        "**/.settings":true,
        "**/.vscode":true,
        "**/.project":true,
        "**/.pydevproject":true
    },
    "python.linting.pylintEnabled": false,
    "editor.fontFamily": "Hack"
}

下載並使用了一個好看的主題Material Theme，字號調大到13，此時默認行高爲20，我以爲太大，調整到18，配置文件列表中不顯示某些後綴的文件，避免影響視野，同時下載了一個開源程序字體Hack，配置爲惟一顯示字體。

其中最須要注意的是python.linting.pylintEnabled這個選項，我把pylint關掉了。或許是pylint自己的問題或者是集成的問題，pylint對flask的解析老是時對時錯，關閉是最好選擇。

對於Flask工程自己的配置，須要添加到工做區配置中。因爲咱們會常常用到virtual env，因此實際上關鍵須要配置python命令自己的路徑以下（跟具體virtualenv的設置有關）：

{
    "python.pythonPath": "${workspaceRoot}/venv/bin/python"
}

到這裏，配置已經可以知足python工程的高亮，代碼補全等編寫功能了，快捷鍵也能夠經過配置文件修改，配合VSC自帶的能力，已經基本OK了，下面是Flask Debug的配置。

這點消耗了我至關長時間。官網給提供了兩種方式，均可以實現。

第一種適合Flask 0.11及以上版本，由於在0.11版本起，出現了venv/bin/flask文件，配置能夠寫成：

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

用flask.py文件啓動Flask程序，實測能夠觸發斷點。

對於在0.11如下版本的Flask而言，能夠採用第二種方式：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python",
            "type": "python",
            "request": "launch",
            "stopOnEntry": false,
            "pythonPath": "${config.python.pythonPath}",
            "program": "${file}",
            "debugOptions": [
                "WaitOnAbnormalExit",
                "WaitOnNormalExit",
                "RedirectOutput"
            ]
        }
    ]
}

切記！！！ Flask在啓動時必須指定 app.run(debug=False)，必定不能開啓調試！不然沒法命中斷點。

調試時啓動Flask程序的入口文件便可，也能夠將${file}替換爲實際的入口文件，這樣不用每次都切換到該文件才能開啓調試。實測OK。

還有一種能夠遠程調試的方法：
須要先pip install ptvsd

if __name__ == "__main__":
    import ptvsd
    import socket
    try:
        address = ('127.0.0.1', 12345)
        s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
        s.bind(address)
    except socket.error:
        ptvsd.enable_attach(None, address=('0.0.0.0', 8000))
    manager.run()

在manager.run()或者app.run()以前，加入如上代碼，在8000端口開啓遠程調試（不是http服務的端口！）

好比從shell啓動此Flask程序，VSC配置以下，Flask啓動好以後啓動調試監聽在8000端口上便可：

{
    "name": "Attach (Remote Debug)",
    "type": "python",
    "request": "attach",
    "localRoot": "${workspaceRoot}",
    "remoteRoot": "${workspaceRoot}",
    "port": 8000,
    "host": "localhost"
}

注意遠程和本地的源碼路徑的前綴必須配置正確！