Setting up Visual Studio Code

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

Option 1: local development

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).

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.

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"
    },
}

Option 2: remote container development

Experimental support for VSCode's remote container development was added in #1583. The advantage of this approach is that you won't need to re-install all the dependencies locally, which can be a hassle and somewhat negates the value of using Docker in the first place. It also automatically installs and configures all relevant VSCode extensions.

That said, the main downside to this approach is that it can be less responsive than the traditional approach, depending on how fast your computer is.

Setup

1. Install the Remote - Containers extension.

2. Follow the initial Docker setup outlined in the project's README; specifically, make sure you run bash docker-update.sh at least once, as VSCode will reuse the volumes that contain your node and python dependencies.

3. When you open the project's folder in VSCode, you should get a notification suggesting you open the project using remote container development. You can follow this suggestion by choosing the "Reopen in Container" button, or if you don't see it, run the "Remote Containers: Rebuild and Reopen in Container" command.

Notes

• Currently the container setup is only useful for VSCode Intellisense and linting/type-checking. VSCode won't be in charge of actually running the development server (you'll still need to separately run docker-compose up for that) so you won't be able to use VSCode's built-in debugger or anything.

• It's critical that your repository's folder be called tenants2. Otherwise, the mapping to Docker Compose's pre-existing volumes won't be made properly, and VSCode won't be able to find any of the project's dependencies.

• All settings have been specified as defaults in .devcontainer/devcontainer.json, but if for some reason they're being ignored, you can copy the value of that file's settings key into your project's .vscode/settings.json too.

• When you open a Python file, make sure VSCode finds the container's Python virtualenv. This is located at /venv/bin/python in the container.

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!