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

• If your project is not open in the dev container, you may at this point get a notification saying "select a Python interpreter". Ignore this - to close the notification, click on the text box and hit enter. You don't want to set a workspace-specific Python path, because this will override the Python path in the virtual environment in the dev container.

If you get a popup that flake8 or black is not installed, make sure your remote python.pythonpath setting is /venv/bin/python and your workspace python.pythonpath VSCode setting is the default value (python).

If you ever delete your Docker container or run docker-compose down -v, that also deletes the /venv/ directory. You'll need to run bash docker-update.sh or docker-compose up to recreate the /venv/ directory before you can use black and flake8 and all the nice format-on-save features of VSCode.

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. Make sure you see "Dev Container: Justfix.nyc" at the bottom of your VSCode window at all times while developing. If you don't, you may run into weird issues. Also, make sure the Python version you see at the bottom of your VSCode window is "Python x.x.x 64-bit ('venv': venv)" instead of just "Python 2.7.x 64-bit", for example. If it's not, go back and check that your python path setting is not getting overridden.

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!

Option 2: 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"
    },
}