Configure Visual Studio Code for Python and Django framework

Visual Studio Code is a great, versatile, cross platform IDE, customizable with lot of plugins. Unfortunately there is nothing working out of the box and it needs some configurations in order to work properly.
In this tutorial I will explain how to configure Visual Studio Code in order to develop using Python and Django framework.

Highlight of versions used in this tutorial:

Python: 3.4

PIP: 9.0.1

VirtualEnv: 15.1.0

Django Version: 1.11.3

Before starting:

Upgrade your pip if it is not the right version:

pip install --upgrade pip

Check if you have virtualenv installed:

virtualenv --version

In case you don't have it or it is not the right version, install or upgrade it.
Install:

pip install virtualenv

Upgrade:

pip install --upgrade virtualenv

Start a new website "MySite" using a new virtualenv:

mkdir MySite
cd MySite
virtualenv venv
source venv/bin/activate

After last command the prompt will show something like:

(venv) MacBook-Pro-di-Adriano:MySite redpelle$

and it means that now we are using the specified virtualenv while working with python and pip.

Install in venv:

pip install pylint
pip install pylint-django
pip install pep8
pip install autopep8
pip install Django

Now we can start a new Django project:

django-admin startproject djangotestproj
cd djangotestproj/
code .

The last command "code" opens Visual Studio Code using current directory. If it does not work, it means that we have to install it from Visual Studio Code, in this way:

• Open Visual Studio Code
• Press CMD+Shift+P (this is in MacOS, for Windows/Linux press CTRL+Shift+P)
• Digit "Install 'code' command in PATH"

Configure Visual Studio Code:

Install Extensions:

Python - Microsoft (previously was Don Jayamanne)
Django Template - bibhasdn

Workspace settings:

settings.json: (click on settings icon down, or create file in path ./.vscode/settings.json

{
  "python.pythonPath": "../venv/bin/python",
  "python.linting.pylintArgs": [
    "--load-plugins",
    "pylint_django",
    "--disable=missing-docstring"
  ],
  "python.formatting.provider": "autopep8",
  "editor.formatOnSave": true,
  "python.linting.pep8Enabled": true
}

Run/Debug

launch.json: (edit debug configuration or create file in path ./.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Django Run",
      "type": "python",
      "request": "launch",
      "pythonPath": "${config:python.pythonPath}",
      "program": "${workspaceRoot}/manage.py",
      "cwd": "${workspaceRoot}",
      "args": [
        "runserver"
      ],
      "env": {},
      "envFile": "${workspaceRoot}/.env",
      "debugOptions": [
        "WaitOnAbnormalExit",
        "WaitOnNormalExit",
        "RedirectOutput",
        "DjangoDebugging"
      ]
    },
    {
      "name": "Django Debug",
      "type": "python",
      "request": "launch",
      "pythonPath": "${config:python.pythonPath}",
      "program": "${workspaceRoot}/manage.py",
      "cwd": "${workspaceRoot}",
      "args": [
        "runserver",
        "--noreload"
      ],
      "env": {},
      "envFile": "${workspaceRoot}/.env",
      "debugOptions": [
        "WaitOnAbnormalExit",
        "WaitOnNormalExit",
        "RedirectOutput",
        "DjangoDebugging"
      ]
    }
  ]
}

Test the configuration:

Select "Django Run" or "Django Debug"
http://127.0.0.1:8000

In order to show live changes, you have to select Django Run, in debug mode live code change for .py files is not yet available, so you have to manually stop and restart the debug mode.
In both Run and Debug you can still modify html templates without restarting the server.

Useful commands:

Here there are some useful commands to remember while developing with Django:

python -m django --version
python manage.py runserver
python manage.py startapp myapp

If you have any improvement to this configuration, please leave a comment.