Setting up Visual Studio Code

The following are some basic tips for setting up Visual Studio Code for use with the tenants2 codebase.

Configuration

You'll want to install all Node and Python dependencies locally on your system as per the Getting started section of the README, even if you're using Docker. This is because VSCode needs to be able to access your dependencies in order to run various development tools (TypeScript, mypy, flake8, and so forth).

(Note that in the future, we might simplify this by using VSCode's recent Developing inside a Container capabilities. You're welcome to give that a spin if you want, but because we haven't tried using it yet, it's not documented here.)

Python setup

1. Install VSCode's Python extension. Make sure that it is using the Python interpreter that is in your project's pipenv environment (this should be at the bottom-left of the VSCode window).

2. Open the Command Palette and type "workspace settings" and press enter.

   A. Type "flake8" into the search field and ensure that "Python > Linting: Flake8 Enabled" is checked.

   B. Type "mypy" into the search field and ensure that "Python > Linting: Mypy Enabled" is checked.

TypeScript setup

This is easy because VSCode comes with TypeScript support out-of-the-box:

1. Use the Command Palette to run the "TypeScript: Select TypeScript Version..." command and choose "Use Workspace Version".

2. Install Dirk Baeumer's VS Code ESLint extension. Note that we use custom rules as of #1444, so you will need to tell the extension about them; see below for more details.

Other setup

We use Prettier for our JS/TS, as well as some other file formats like JSON and SCSS, so you may want to install Esben Petersen's Prettier Formatter for Visual Studio Code.

Usage

Editing TypeScript is extremely responsive, as it updates your code with syntax highlighting on every keypress.

However, feedback for your Python code isn't nearly as quick: you need to save a Python file once you've made changes in order to see feedback from flake8 and mypy. And sometimes the location of an error's squiggly underline is further away from the actual cause of the error than you'd expect it to be. But still, it's way better than having to constantly re-run the tool from the command-line and manually find all the lines yourself!

Example .vscode/settings.json

You can use the following settings.json as a template:

{
    "python.linting.pylintEnabled": false,
    "python.linting.flake8Enabled": true,
    "python.linting.enabled": true,
    "python.linting.mypyEnabled": true,
    "eslint.options": {
        "rulePaths": ["frontend/eslint/rules"]
    },
    "[typescriptreact]": {
        "editor.tabSize": 2,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.tabSize": 2,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[python]": {
        "editor.detectIndentation": false,
        "editor.tabSize": 4
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
}