Baserow VS Code 开发环境完整配置指南：应用标准配置、跑通测试与调试-平芜编程栈

Baserow VS Code 开发环境完整配置指南：应用标准配置、跑通测试与调试

【免费下载链接】baserowBuild databases, automations, apps & agents with AI — no code. Open source platform available on cloud and self-hosted. GDPR, HIPAA, SOC 2 compliant. Best Airtable alternative.项目地址: https://gitcode.com/GitHub_Trending/ba/baserow

本文基于 Baserow 仓库中的 VSCode Setup 指南，带你从零搭建一套完整的 Baserow 开发环境：一键应用仓库自带的标准 VSCode 配置，理解 settings.json、launch.json、env 三类配置文件的具体作用，并按步骤完成 Python 虚拟环境、PostgreSQL、Node.js 与测试运行器的配置，最终在编辑器内直接运行前后端单元测试与调试会话。

一、指南定位与前提条件

官方指南（docs/development/vscode-setup.md）的目标是：让开发者在 VSCode 中运行和调试全部测试，并启用所有相关的 linter 与自动格式化工具。指南假设你已具备 git、Python、virtualenv、PostgreSQL 和命令行工具的基本使用经验。

开始之前需要安装两个命令行工具：

just— 命令运行器。Baserow 的构建/开发流程全部封装在 justfile 中（例如just b init、just f install、just dc-dev等 recipe），后文操作步骤会大量使用它；
uv— Python 包管理器，用于创建虚拟环境并安装后端依赖。

二、一键应用标准 VSCode 配置

第一步是在克隆后的仓库中运行标准配置应用脚本：

./config/vscode/apply_standard_baserow_vscode_config.sh

按提示输入Y并回车即可应用。该脚本 apply_standard_baserow_vscode_config.sh 的实际逻辑很直接——它启用set -euo pipefail严格模式后，将脚本同目录下的.vscode隐藏目录整体拷贝到仓库根目录：

cp -a "${SCRIPT_DIR}/.vscode" "${SCRIPT_DIR}/../../"

也就是说，仓库中真正存放标准配置的位置是 config/vscode/.vscode 目录，脚本会把其中三个文件落地为项目根部的.vscode/env、.vscode/launch.json、.vscode/settings.json。脚本会明确提示"将覆盖你已有的 Baserow 仓库 VSCode 配置"，输入非 Y 字符则中止且不改动任何文件。

完成拷贝后，按指南继续操作：

打开 VSCode，在欢迎页点击 "Open"，选择你克隆的 baserow 目录；
确认已安装并启用 Python VSCode 插件。

三、标准配置文件逐项解读

3.1 settings.json：测试运行器与 Linter 的核心配置

落地后的 .vscode/settings.json 是整套体验的中枢，关键配置可以分为四组：

（1）后端 pytest 配置

"python.linting.flake8Args": ["--config=backend/.flake8"], "python.testing.unittestEnabled": false, "python.testing.pytestEnabled": true, "python.testing.pytestArgs": ["backend"]

这里显式关闭 unittest、启用 pytest，并指定测试根目录为backend；flake8 按backend/.flake8的配置运行。

（2）前端 Jest 配置

"jest.autoRun": "off", "jest.rootPath": "web-frontend", "jest.jestCommandLine": "node_modules/.bin/jest --config jest.config.js --runInBand --watchAll=false"

Jest 根目录指向web-frontend（即 web-frontend/jest.config.js 所在目录），默认不自动运行，--runInBand --watchAll=false保证在编辑器测试面板中串行、非交互执行。

（3）Mypy 静态类型检查

"mypy.targets": ["backend/src/", "premium/backend/src/", "enterprise/backend/src/"], "mypy.configFile": "backend/mypy.ini", "mypy.runUsingActiveInterpreter": true

三个后端源码目录（开源后端、premium 后端、enterprise 后端）都纳入 mypy 检查范围，类型检查规则来自 backend/mypy.ini，并强制使用当前激活的解释器（即你后面选定的.venv）。

（4）数据库连接与编辑器行为

"sqltools.connections": [ { "server": "localhost", "port": 5432, "driver": "PostgreSQL", "name": "baserow", "database": "baserow", "username": "baserow", "password": "baserow" } ], "editor.formatOnSave": true, "stylelint.configFile": "${workspaceFolder}/web-frontend/.stylelintrc", "stylelint.validate": ["css", "less", "postcss", "scss"]

SQLTools 预置了一个localhost:5432上的baserow库连接（用户名/密码均为baserow，与后文本地建库的用户名一致），方便你在编辑器内直接查询数据库；保存时自动格式化（formatOnSave）配合 ESLint、Stylelint、SCSS Formatter 插件，构成"保存即规范"的工作流。此外配置还通过python.envFile指向.vscode/env，并排除了.nuxt/、__pycache__/、.pyc等噪声目录。

3.2 launch.json：五个开箱即用的调试配置

.vscode/launch.json 定义了五组调试/运行配置，覆盖前后端全部场景：

配置名	类型	作用
`client: chrome`/`client: firefox`	chrome / firefox	启动浏览器调试前端，`url`指向`http://localhost:3000`，`webRoot`指向`${workspaceFolder}/web-frontend`
`backend: django`	python (attach)	附加到`127.0.0.1:5678`的 debugpy 调试端口，并将本地`${workspaceFolder}`映射到容器内`/baserow`（`pathMappings`），用于在 Docker 开发环境中调试后端
`pytest coverage`	python (launch)	带覆盖率跑全部后端测试
`vscode-jest-current-file`	node	只运行当前打开文件的 Jest 测试
`vscode-jest-tests`	node	串行运行 web-frontend 全部 Jest 测试

其中几个细节值得注意：

pytest coverage配置以模块方式启动 pytest，参数为-n=3（3 个并行 worker）、--cov-report=xml:html_coverage/cov.xml、--cov-config=${workspaceFolder}/backend/.coveragerc（覆盖率规则见 backend/.coveragerc）、--cov=baserow，测试目录覆盖backend/tests/、premium/backend/tests/、enterprise/backend/tests/三处；环境变量中DJANGO_SETTINGS_MODULE被设为baserow.config.settings.dev，DATABASE_HOST指向localhost。
两个 Jest 配置都声明了"runtimeVersion": "16.15.0"。这正是原文档提到的判断依据：VSCode 的 Node 调试器会尝试用这个版本的 Node 运行 Jest。因此前端 Node 版本应以launch.json中的runtimeVersion为准（当前为16.15.0）。
Jest 调试时注入PRIVATE_BACKEND_URL=http://localhost:8000，即前端测试默认假设后端服务运行在 8000 端口。

3.3 env 文件：PYTHONPATH 与 Django settings 的注入

.vscode/env 只有两行，但保证 IDE 的语言服务与调试会话能正确找到代码：

PYTHONPATH=backend/src:premium/backend/src:enterprise/backend/src:backend/flake8_plugins:$PYTHONPATH DJANGO_SETTINGS_MODULE=baserow.config.settings.test

它通过 settings.json 里的"python.envFile": "${workspaceFolder}/.vscode/env"生效，同时python.autoComplete.extraPaths/python.analysis.extraPaths也显式列出了backend/src、premium/backend/src、enterprise/backend/src三个包根目录——因为 Baserow 的后端包位于各子项目的src/目录下，而非仓库根目录。

四、分步搭建：后端 Python 环境

4.1 初始化虚拟环境

在仓库根目录执行：

just b init

该命令会创建虚拟环境.venv/并安装后端依赖（justfile 中的顶层initrecipe 就是just b init+just f install的组合，见 justfile）。

随后让 VSCode 使用这个解释器：

打开命令面板（Ctrl + Shift + P），输入Python: Select Interpreter；
选择虚拟环境中的解释器.venv/bin/python。

如果在测试菜单中看不到 Python 测试，再执行命令面板中的Python: Configure Tests让 Python 插件重新发现 pytest。

4.2 准备 PostgreSQL

两种方式任选其一：

方式 A（推荐）：用 Docker 起数据库和 Redis

just dc-dev up -d db redis

dc-dev是 justfile 中封装的 dev 版 docker compose 命令（基于docker-compose.yml+docker-compose.dev.yml叠加），只启动db与redis两个服务。

方式 B：本地安装 PostgreSQL

本地安装后创建 baserow 用户（与.vscode/settings.json中 SQLTools 预置连接的用户名、密码保持一致）：

CREATE USER baserow WITH ENCRYPTED PASSWORD 'baserow'; ALTER USER baserow CREATEDB;

4.3 验证后端测试

数据库就绪后，应从 VSCode 的测试菜单直接运行后端 Python 测试，指南建议先试跑backend/tests/baserow/core/test_core_models.py这一用例，确认 pytest 运行器、解释器、数据库连接三者链路全部打通。

五、分步搭建：前端 Node 环境

切换到前端目录：cd web-frontend；
使用nvm或fnm安装正确版本的 Node。判断标准就是launch.json中 Jest 配置的runtimeVersion（当前仓库为16.15.0），例如：
```
nvm install 16.15.0 nvm use 16.15.0
```
原文档同时提示可参考 docs/installation/supported.md 确认受支持的 Node 版本；
全局安装 yarn：npm install -g yarn；
安装依赖：just f install（或直接yarn install）；
若 yarn install 后弹出 VSCode 的 "Trust Project" 提示，选择信任项目；
若测试菜单中看不到 Jest 测试，在命令面板执行Jest: Start All Runners（与settings.json中jest.rootPath/jest.jestCommandLine的声明相呼应）；
最后从 VSCode 测试面板运行一个 web-frontend 单元测试，确认前端链路可用。

六、推荐插件清单

指南列出 11 个必装插件，而仓库中的 config/vscode/vsc-extensions.txt 给出了完整 15 个扩展 ID，两者对应关系如下：

指南中的插件名	扩展 ID（vsc-extensions.txt）
Python	`ms-python.python`（另含`ms-python.vscode-pylance`）
Volar	`Vue.volar`
Eslint	`dbaeumer.vscode-eslint`
Gitlab Workflow	`GitLab.gitlab-workflow`
Gitlens	`eamodio.gitlens`
Jest	`Orta.vscode-jest`
SCSS Formatter	`sibiraj-s.vscode-scss-formatter`
Stylelint	`stylelint.vscode-stylelint`
Mypy	`matangover.mypy`
Docker	`ms-azuretools.vscode-docker`
Coverage Gutters	`ryanluker.vscode-coverage-gutters`
（指南未单列）	`aslamanver.vsc-export`、`mtxr.sqltools`、`mtxr.sqltools-driver-pg`

前三个补充项分别用于：导出/导入 VSCode 扩展列表本身（安装时可借助 VSC Export & Import 插件批量安装vsc-extensions.txt的内容）、在编辑器内查询 SQLTools 连接（settings.json中已预置 baserow 数据库连接）、PostgreSQL 驱动。

七、验收清单

搭建完成后，可以按以下清单逐项自检：

仓库根目录存在.vscode/env、.vscode/launch.json、.vscode/settings.json三个文件（由脚本从config/vscode/.vscode拷贝而来）；
VSCode 解释器为.venv/bin/python，且测试面板能列出backend下的 pytest 用例；
backend/tests/baserow/core/test_core_models.py能成功运行；
just dc-dev up -d db redis之后，SQLTools 面板能连通baserow@localhost:5432的baserow库；
调试配置中出现pytest coverage、vscode-jest-current-file等五组来自launch.json的条目；
在web-frontend下能跑通一个 Jest 单元测试；
保存文件时 ESLint/Stylelint/SCSS Formatter 自动修正格式（formatOnSave生效）。