Use VS Code for Python and Django Development

Visual Studio Code is an editor developed by Microsoft. I have been using this editor for Python development for sometime now. Previously I have been using PyCharm Community Edition for development, but I had to switch to an editor which was less resource consuming than PyCharm, since I have been using VS Code.

It was initially suggested to me by one of my colleagues. My first impression was, what is this? Is it really usable? Is it as bad as Atom?(I have a dreadful experience with Atom, although Atom is maybe as good as VS Code). But instead, I found that it is really useful, user-friendly and has lots of useful features.

Let us check out how we can use VS Code to develop Production grade Python applications.

Go to settings

You can check VS code’s documentation on how to go to User and Workspace Settings. I prefer to use Command Palette for them.

To go to Workspace Settings, press CTRL+SHIFT+P(CMD+SHIFT+P for MacOS), it will open up Command Palette, then type Preferences: Open Workspace Settings. After pressing Enter(or click), you will go into Workspace settings(JSON).

And to go to User settings,press CTRL+SHIFT+P(CMD+SHIFT+P for MacOS) and type Preferences: Open Settings(JSON).

Configuring python

For python related configurations, we are going to use Workspace Settings.

Install python plugin

For using pythonic features, you need to install plugin Python VS Code To do that, go to Extensions Section of VS Code(marked blue in the image given below), in search section, type python; and install the red marked package called Python by Don Jayamanne(Now Maintained by Microsoft).

Add virtual environment

Here is how to configure the virtual environment:

{
  "python.pythonPath": "/path/to/virtualenv/bin/python"
}

That should be enough to let you use the virtual environment for development. If you want to add your own modules, then add this settings:

{
  "python.autoComplete.extraPaths": ["./path-to-your-code"]
}

After that, let us add some more features which are useful to develop python codes.

Using PEP8 and lint

To add them to vs code, add the following key values to above dictionary:

{
  "python.linting.pep8Enabled": true,
  "python.linting.pylintPath": "/path/to/virtualenv/bin/pylint",
  "python.linting.pylintArgs": ["--load-plugins", "pylint_django"],
  "python.linting.pylintEnabled": true
}

To use the above features, editor will prompt you to install pylint and autopep8, or you can install them directly in virtual environment:

pip install autopep8
pip install pylint

Generic configurations

For generic related configurations, we are going to use User Settings.

Format on save

Add this like in dict: "editor.formatOnSave": true It will auto format code (language does not matter).

Ignoring unnecessary files

To ignore unnecessary files, add this following lines:

{
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    ".vscode": true,
    "**/*.pyc": true,
    "**/__pycache__/": true
  }
}

Disable preview

When you open a file using an import file or try to go back to the declaration of the code, vs code intends to open it in a preview window, which sometimes is annoying when you want to do it multiple steps/times. To disable it, add this:

{
  "workbench.editor.enablePreview": false
}

UI customization

Add ruler in editor

Adding rulers in the editor gives you a better idea of how many words you will put on a single line, in Pep8 Standard, it’s 79. So let’s add the following key and values in the settings dictionary:

{
  "editor.rulers": [80, 120]
}

Increase zoom level

You can increase the zoom level of the IDE via adding the following settings:

{
  "window.zoomLevel": 0.15
}

Themes

You can download any theme from the vscode marketplace and install them. Currently I am using the Material theme.

More customization

If you want to do further customizations to vscode, you can use either one of the following packages:

1. Custom CSS and JS Loader.
2. CustomizeUI.

Debugging

It is really cool to have debugging feature built-in VS Code. Although as far as I tested, it works perfectly fine on Ubuntu, but not in OSX. So please check before you configure it.

Anyways, the best way to configure it for Django is to add the following lines in launch.js:

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

Or go to the Debug section(Marked green in the screenshot), click the section marked as yellow and then click add configuration.

Then, click on Django settings to add new Django settings for debugging.

Using Pylance(optional)

MS has also developed a tool called pylance which gives fast, feature-rich language support for Python. It can be an alternative to VS Code’s default language server for Python.

Useful plugins

VS Code Marketplace is really rich with lots of themes, plugins and so on. You can download and use the following plugins from marketplace to enrich your coding experience.

1. Use Code Settings Sync to synchronize your settings in between VS Code instances over multiple machines.
2. You can use Git Blame to see Git blames.
3. You can use Git LENS to supercharge git functionality.
4. Intellij IDEA Keybindings allows you to use Idea’s shortcut keys in VSCode.
5. Use VScode Icons to beautify VS Code’s icons.
6. Use Material Icons for using material icons on the sidebar.
7. Use Code Spell Checker to check spells in code.

In conclusion

It goes without saying that PyCharm is the best IDE for Python development. It supports refactoring, which makes life a lot easier; has advanced debugging, and its easy to configure. Still, VS code has its own charm. I prefer VS code’s UI, its configurations(which is really dynamic and lots of options) and most importantly, I can do front end development better in VS Code, as PyCharm community edition does not support JS. Also its lightweight(not resource hungry as PyCharm).

Thanks for reading. Cheers!!

Last updated: Apr 05, 2024