2、开发环境准备：Node.js安装、VS Code配置、ThingsBoard本地环境搭建（Docker方式）
好，咱们正式开始动手了。
这一章，说白了就是「磨刀不误砍柴工」。我见过太多同学，代码写了一半发现环境不对，回头再折腾，那叫一个痛苦。所以咱们先把家伙事儿备齐了，后面开发才能顺风顺水。
2.1 Node.js 安装——版本选对，事半功倍
Node.js 是咱们开发 ThingsBoard 可视化组件的基础运行时。你想想看，组件本质上就是一段前端代码，没有 Node.js，连依赖都装不了。
版本选择
我个人习惯用 LTS（长期支持）版本。别追新，稳定第一。我在项目中遇到过有人装了最新的 Node.js 20.x，结果某个老库不兼容，折腾了一下午。所以，我建议你用 Node.js 18.x LTS 或 20.x LTS。
重要：ThingsBoard 的组件开发依赖 Webpack 5，Node.js 版本低于 16 会报错。别问我怎么知道的——我曾经在 CentOS 7 上踩过这个坑。
安装步骤（Windows / macOS / Linux）
- 打开 nodejs.org，下载 LTS 版本安装包。
- 双击安装，一路 Next。注意勾选「Add to PATH」。
- 安装完成后，打开终端验证：
node -v
# 输出类似 v18.18.0
npm -v
# 输出类似 10.2.0小技巧：如果你需要同时管理多个 Node.js 版本，可以用 nvm（Node Version Manager）。我个人项目里经常切换版本测试兼容性，nvm 是神器。
2.2 VS Code 配置——工欲善其事，必先利其器
编辑器嘛，选 VS Code 就对了。免费、轻量、插件生态好。我用了 5 年，没换过。
必装插件清单
| 插件名称 | 作用 | 推荐理由 |
|---|---|---|
| ESLint | 代码规范检查 | 写组件时，格式问题一眼就能揪出来 |
| Prettier | 代码格式化 | 团队协作时，风格统一很重要 |
| JavaScript (ES6) code snippets | 代码片段补全 | 写 ThingsBoard 组件模板时，省不少事 |
| Docker | Docker 文件支持 | 后面搭建本地环境要用 |
| GitLens | Git 历史查看 | 调试时看谁改了代码，方便追责（笑） |
VS Code 设置建议
打开设置（Ctrl + ,），搜索以下配置并修改：
{
"editor.fontSize": 14,
"editor.tabSize": 2,
"editor.wordWrap": "on",
"files.autoSave": "afterDelay",
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}注意：缩进用 2 个空格，这是 ThingsBoard 官方代码的风格。用 4 个空格的话，后面看源码会很不习惯。我曾经因为这个被同事吐槽过。
2.3 ThingsBoard 本地环境搭建（Docker 方式）
嗯，这里要重点讲。搭建本地环境，我强烈推荐用 Docker。为什么？
- 不用手动装 PostgreSQL、Cassandra、Redis 这些依赖
- 环境隔离，不会污染你的开发机
- 一键启动、一键销毁，方便测试
前提条件
确保你已经安装了 Docker 和 Docker Compose。验证方法：
docker --version
# Docker version 24.0.7
docker compose version
# Docker Compose version 2.23.0如果没有安装，去 Docker 官网 下载安装。macOS 用户推荐用 Docker Desktop，Linux 用户用命令行安装即可。
拉取 ThingsBoard 镜像
ThingsBoard 官方提供了 Docker Compose 文件，咱们直接用：
# 创建一个工作目录
mkdir tb-dev && cd tb-dev
# 下载 Docker Compose 文件
wget https://raw.githubusercontent.com/thingsboard/thingsboard/master/docker/docker-compose.yml
# 或者用 curl
curl -L https://raw.githubusercontent.com/thingsboard/thingsboard/master/docker/docker-compose.yml -o docker-compose.yml启动 ThingsBoard
# 启动所有服务（后台运行）
docker compose up -d
# 查看启动日志
docker compose logs -f第一次启动会下载镜像，大概需要 5-10 分钟，取决于你的网速。我记得我第一次搭建时，等得都快睡着了。不过别急，喝杯咖啡回来就好了。
验证环境
打开浏览器，访问 http://localhost:8080。你应该能看到 ThingsBoard 的登录页面。
- 默认用户名：
tenant@thingsboard.org - 默认密码：
tenant
重要：首次登录后，系统会提示你修改密码。建议改成自己好记的，但别太简单。我一般用 Test1234! 这种，开发环境无所谓。
常用 Docker 命令
| 命令 | 说明 |
|---|---|
docker compose up -d |
后台启动所有服务 |
docker compose down |
停止并删除所有容器 |
docker compose logs -f |
实时查看日志 |
docker compose restart |
重启服务（修改配置后常用） |
避坑指南：我曾经在 Windows 上遇到 Docker 启动后端口被占用的问题。检查一下 8080 端口是否被其他程序占用了。用 netstat -ano | findstr :8080 查一下，如果有冲突，改一下 docker-compose.yml 里的端口映射就行。
2.4 验证开发环境是否就绪
环境搭好了，咱们跑个简单的测试，确保一切正常。
测试 Node.js 和 npm
mkdir test-component && cd test-component
npm init -y
npm install @thingsboard/rule-engine如果安装成功，没有报错，说明 Node.js 环境没问题。
测试 ThingsBoard 连接
在浏览器中登录 ThingsBoard，进入「设备」页面，创建一个测试设备。如果能正常创建，说明 Docker 环境跑起来了。
注意：如果你用的是 macOS M1/M2 芯片，Docker 镜像可能需要指定平台。在 docker-compose.yml 里加上 platform: linux/amd64 即可。我当初在 M1 MacBook 上折腾了半小时才找到这个原因。
2.5 本章小结
好，到这步为止，咱们的开发环境就全部准备好了。你手头应该有：
- Node.js 18.x LTS 或 20.x LTS
- VS Code 配上几个趁手的插件
- 一个跑在 Docker 里的 ThingsBoard 本地实例
下一章，咱们就要开始写第一个自定义组件了。说实话，我第一次写 ThingsBoard 组件时，心里也没底。但只要你环境搭好了，后面就是水到渠成的事。
嗯，如果你在搭建过程中遇到任何问题，别慌。先看看日志，Google 一下，大概率能找到答案。实在不行，回头看看这一章，我踩过的坑都写在里面了。
准备好了吗？咱们下一章见。
公众号:蓝海资料掘金营，微信deep3321