Flask Practices #2, VSCode を用いた Flask プロジェクトのコーディング支援設定

[<<<前回](https://qiita.com/coleyon/items/529c63d5e0c57ccfd247) | [目次](https://qiita.com/coleyon/items/0c44b0cd88de82f27f2c) | [次回>>>](https://qiita.com/coleyon/items/b83ab42305d2b74cdff3)

今回は、IDEでデバッグ起動できるところまでやりましょう。

# Local Debugging 環境構築

基本的には [readme](https://github.com/coleyon/flask-intro-panels/blob/cc050dd8f440689805b270f2adf982f9f3cccc6a/readme.md) に書いてあることをやることになりますが、
Windowsのローカルマシンでデバッグすることによる読み替えが少し必要です。

**virtualenv 生成**

```powershell:virtualenv生成
${workspaceFolder}> pipenv install --dev
${workspaceFolder}> pipenv shell
${workspaceFolder}> pipenv run pip freeze
...
Flask==1.1.1
...
${workspaceFolder}> pipenv --venv               # 仮想環境のPathを確認する
%USER_PROFILE%\.virtualenvs\panels-ooOOoOOoo
```

**Config設置**

```bash:Copy_Config_Template_files
$ cp .env.example .env.debug        # for local debugging
$ cp .env.example .env              # for production
$ cp .mysql_env_example .mysql_env
```

**node.js**

``cookiecutter-flask`` は ``bundler`` に ``webpack`` を使う構成になっています。プロジェクト生成時に選択した ``node_version`` と同じバージョンの [node.js](https://nodejs.jp/) をインストールします。

``readme`` の通りに実行すると Windows 環境では以下のエラーとなります。

```powershell:npm_build
> cp .env.example .env
> npm install
> npm run build

...
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
```

unix shell script 構文で記述された package.json の script 行が、Windows OS 上で実行されたことによりコケているだけなので、[Windows DOS Prompt 構文で等価な行を追加して](https://github.com/coleyon/flask-intro-panels/commit/089ca5042b2fa64f6255cd65f6126075335c369a#diff-b9cfc7f2cdf78a7f4b91a753d10865a2)実行します。

```
> npm run build-win
...
added 861 packages from 509 contributors and audited 11564 packages in 59.983s
found 0 vulnerabilities
```

``node_modules`` ディレクトリにリソースが生成されます。

**IDE**

ローカルデバッグに [VS Code](https://code.visualstudio.com/) を使う例で進めていきます。[.gitignore](https://github.com/coleyon/flask-intro-panels/commit/0a392a81de3d12904e65349e8993a76f3cc14652) に VSCode の環境設定フォルダの除外設定を入れたのち・・・以下のようにします。

```json:settings.json(user)
{
    "editor.formatOnSaveTimeout": 1500,
    "editor.codeLens": true,
    "terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\WindowsPowerShell\\v1.0\\powershell.exe",
    "autoDocstring.docstringFormat": "google",
    "autoDocstring.quoteStyle": "'''",
    "editor.formatOnSave": true,
    "python.formatting.provider": "autopep8",
    "python.formatting.autopep8Args": [
        "--aggressive",
        "--aggressive",
    ],
    "python.linting.enabled": true,
    "python.linting.pylintEnabled": false,
    "python.linting.lintOnSave": true,
    "python.linting.pep8Enabled": false,
    "python.linting.flake8Enabled": true,
    "python.linting.pylintArgs": [
        "--load-plugins",
        "pylint_flask",
    ],
    "python.linting.flake8Args": [
        "--config=.flake8"
    ],
}
```

```json:.vscode/settings.json(workspace)
{
    "python.linting.pylintEnabled": false,
    "python.linting.flake8Enabled": true,
    "python.linting.flake8Args": [
        "--config=setup.cfg",
    ],
    "terminal.integrated.shellArgs.windows": [
        "-NoExit",
        "chcp 65001"
    ],
    "python.linting.enabled": true,
    "python.envFile": "${workspaceFolder}/.env.debug",              // debugging config
    "python.pythonPath": "....\.virtualenvs\panels-ooOOoOOoo",      // `pipenv --venv` で得た Path
    "python.venvPath": "....\.virtualenvs\panels-ooOOoOOoo",        // `pipenv --venv` で得た Path
    "python.testing.pytestEnabled": true,
    "python.testing.unittestEnabled": false,
    "python.testing.autoTestDiscoverOnSaveEnabled": false,
    "python.testing.nosetestsEnabled": false,
    "files.associations": {
        "*.html": "jinja-html"
    },
}
```


```json:.vscode/launch.json(workspace)
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flask Debug",
            "type": "python",
            "request": "launch",
            "module": "flask",
            "args": [
                "run",
                "--no-reload"
            ],
            "jinja": true,
        }
    ]
}
```

ちなみに、以下の支援を効かせる場合の設定が入っています。邪魔な場合はお好みで削ってください。

* formatter - [Autopep8](https://pypi.org/project/autopep8/), [Better Jinja](https://marketplace.visualstudio.com/items?itemName=samuelcolvin.jinjahtml)
* linter - [Flake8](https://pypi.org/project/flake8/)
* docstring - [VSCode autoDocstring](https://marketplace.visualstudio.com/items?itemName=njpwerner.autodocstring), [Napoleon](https://sphinxcontrib-napoleon.readthedocs.io/en/latest/example_google.html)
* unittest - [pytest](https://pypi.org/project/pytest/)


# 初回起動

**ローカルデバッグ用設定調整**

IDE でデバッグしていきますので、``docker-compose up -d`` や ``node start`` ではなく、 Flask 単体である ``autoapp.py`` をDebug実行してみましょう。VSCode のデフォルト設定ですと F5 Key 押下です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/157638/e08075ad-2348-0438-bf12-42df0f5a5618.png)


デフォルトでは、 webpack を介して提供される ``http://127.0.0.1:5000/static/main_js*.js``, ``http://127.0.0.1:5000/static/main_css*.css`` など静的リソースのバンドルへのアクセスができず、``bootstrap`` のスタイルがレンダリングされないなど、見た目が悲しいことになっていると思います。Chrome の デベロッパーツール で確認すると、やはりリソースのURLが取れてないですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/157638/48223aa5-684a-2443-0dc2-d5a669b2e1c8.png)

今回は ``http://127.0.0.1:5000`` でアクセスする文脈ですので、[webpack.config.js を変更](https://github.com/coleyon/flask-intro-panels/commit/b9975239c6eb4e85107b2ef435278625b1f0ccf0#diff-11e9f7f953edc64ba14b0cc350ae7b9d) して、再度 ``npm run build-win`` することで、[公式 readme で紹介されている通りのページ](https://github.com/cookiecutter-flask/cookiecutter-flask#screenshots)が返ってくるようになります。

以上で、ひとまずのデバッグ起動とコーディング支援設定ができました。
次回は、cookiecutter-flask が整えてくれている Twelve Factor App っぽさを、活かしつつの Config や構成の調整です。