Skip to content

VSCode Setup

This guide walks you through a first time VScode setup for Saveroom for developers. It will ensure you can run and debug all tests and also enable all the relevant linters and automatic style fixers to make your life as easy as possible.

This guide assumes you have a basic understanding of git, python, virtualenvs, postgres and command line tools.

Prerequisites

Install the following tools: - just - command runner - uv - Python package manager

Setup Steps

  1. First checkout a fresh copy of Saveroom: git clone git@github.com:carneirofc/baserow.git (or your personal fork of the project)
  2. cd baserow
  3. ./config/vscode/apply_standard_baserow_vscode_config.sh
    1. Type Y and hit enter to apply the standard Saveroom config
  4. Open VSCode and on the "Welcome to VSCode" screen click the "Open" button and open the baserow folder you cloned above.
  5. Make sure you have installed / enabled the Python VSCode plugin.
  6. Now we will create a Python virtual environment and configure VSCode to use it to run tests and linters:
    1. Initialize the backend (creates venv and installs dependencies):
      just b init
      
      This creates a virtualenv at .venv/ in the project root.
    2. Then you will most likely need to select it as default interpreter for the project:
      1. Type: Ctrl + Shift + P or open the command palette
      2. Type: Python: select interpreter
      3. Find and select your virtualenvs bin/python executable (.venv/bin/python)
    3. If do not see the python tests in the testing menu:
      1. Type: Ctrl + Shift + P or open the command palette
      2. Type: Python: Configure Tests
  7. Install and get a postgresql database running locally:
    1. The easiest way is to use Docker:
      just dc-dev up -d db redis
      
    2. Or install PostgreSQL locally: https://www.postgresql.org/docs/18/tutorial-install.html
    3. If running PostgreSQL locally, create a baserow user:
      CREATE USER baserow WITH ENCRYPTED PASSWORD 'baserow';
      ALTER USER baserow CREATEDB;
      
  8. Now you should be able to run the backend python tests from the testing menu, try run backend/tests/baserow/core/test_core_models.py for instance.
  9. Now lets set up your frontend dev by changing directory to baserow/web-frontend
  10. Use nvm or fnm to install the Node.js version pinned in the repo's .nvmrc: nvm install then nvm use from the repo root.
  11. Install yarn globally: npm install -g yarn
  12. Now run just f install to install dependencies (or yarn install directly).
  13. Select "Trust Project" if you see an VSCode popup after running yarn install
  14. Install the Vitest extension; web-frontend tests then appear in the testing menu. The vitest-current-file launch configuration debugs the open spec file.
  15. Confirm you can run a web-frontend unit test from vscode

Recommended Plugins

You can use the VSC Export & Import to install what is inside config/vscode/vsc-extensions.txt. Otherwise, you can manually install:

  1. Python
  2. Volar
  3. Eslint
  4. Gitlens
  5. Vitest
  6. Ruff
  7. SCSS Formatter
  8. Stylelint
  9. Mypy
  10. Docker
  11. Coverage Gutters