搭建 Lightning Web Components 开发者工具（Set Up Your Lightning Web Components Developer Tools）

从零到实时预览一个 Lightning Web Component。本文带你走完整条工具链：安装 Salesforce CLI、Visual Studio Code 与 Salesforce Extension Pack，激活 Developer Hub，创建 Salesforce DX 项目和 scratch org，生成 LWC 并用 ESLint 与 IntelliSense 修复代码错误，最后部署到记录页面，并用 Live Preview 在桌面和 iOS 模拟器实时预览。...

首页/ 文章列表/ 搭建 Lightning Web Components 开发者工具（Set Up Your Lightning Web Components Developer Tools）
📅 2026/10/14 ✍️ ponybai 🏷️ salesforce, headless

01 安装开发工具（Install Development Tools）

slide_2

你已经学习了 Lightning Web Components 这个编程模型，现在想开始构建自己的 Web 组件。本项目将带你完成：安装推荐的开发者工具、创建 Lightning Web Component、用工具修复代码错误、配置记录布局来展示组件，并在 Salesforce Org 中启用 Live Preview。

虽然确实可以用任意文本编辑器创建 Lightning Web Component，但那样得不到专业工具集所提供的支持。因为 LWC 基于现代 Web 标准，其工具链自然也建立在 Web 开发者当前流行的工具之上。

创建新的 Trailhead Playground（Create a New Trailhead Playground）

slide_3

本项目需要一个全新的 Trailhead Playground。滚动到页面底部，点击 playground 名称，再点击 Create Playground。创建一个新的 Trailhead Playground 通常需要 3–4 分钟。

注意：是的，我们真的指一个全新的 Trailhead Playground！如果你使用现有的 Org 或 Playground，完成本项目的步骤时可能会遇到问题。这个 Playground 将作为你的 Developer Hub 和测试环境。

获取 Trailhead Playground 的用户名和密码

slide_4

先打开你的 Trailhead Playground，然后按以下步骤获取凭据：

  1. 点击 Get Your Login Credentials 标签页，记下你的用户名；
  2. 点击 Reset My Password，系统会向与你用户名关联的邮箱发送一封邮件；
  3. 点击邮件中的链接；
  4. 输入新密码、确认密码，然后点击 Change Password。

这些凭据稍后会用于授权你的 Dev Hub 以及从 CLI 登录。

设置 Salesforce CLI（一）：它是什么

slide_5

和许多其他编程语言和模型一样，Salesforce 也包含一个命令行界面（CLI）。如果你用过 npm、Yarn、Gradle 或 Maven，Salesforce CLI 会让你觉得很熟悉——它就是为 Salesforce 开发任务量身定制的。

Salesforce CLI 让你能以多种方式与 Salesforce 环境交互，比如检索（retrieve）或推送（push）代码，或与数据交互。CLI 由多个插件组成，这些插件提供重要的特定功能。例如，plugin-org 插件提供管理 Salesforce Org 的能力，比如创建 scratch org。而且，安装 Salesforce CLI 时会自动包含 Live Preview——一套用于测试 Lightning Web Components 和 React 应用的工具。

小知识：Salesforce CLI 是 100% 开源的，你可以查看所有源代码，甚至贡献新功能。

设置 Salesforce CLI（二）：安装

slide_6

如果你已经安装了 Salesforce CLI，可以跳过本节。否则按以下步骤安装：

  1. 从 developer.salesforce.com/tools/salesforcecli 安装 CLI；
  2. 在命令行运行 sf update，确认 CLI 已正确安装且为最新版本；
  3. 你应该看到类似 @salesforce/cli: Updating CLI… 的输出。

Salesforce CLI 就绪了。接下来是工具箱里的关键工具——集成开发环境（IDE）。

下载并配置 Visual Studio Code

slide_7

Visual Studio Code 是 Salesforce 开发者的首选代码编辑器。它免费、开源，支持 Windows、Linux 和 macOS。VS Code 是 Web 开发者中久经考验的 IDE，如今也是构建 Lightning Web Components 的高效 IDE。Salesforce 提供了免费的 VS Code 扩展，让开发体验更加简化——即 Salesforce Extension Pack，它为 Lightning Platform 开发提供了出色的工具，包括用于 Apex、Visualforce 甚至 Replay Debugger 的工具。

  1. 下载并安装适合你操作系统的最新版 Visual Studio Code（已安装则无需重装）；
  2. 启动 Visual Studio Code；
  3. 点击侧边栏的 Extensions 图标；
  4. 搜索 Salesforce Extension Pack 并点击 Install（已安装则继续）；
  5. 按 Command + Shift + P（macOS）或 Ctrl + Shift + P（Windows/Linux）打开命令面板，输入 sfdx 查看可用命令。

完成！你已经安装了开发第一个 Lightning Web Component 所需的全部工具。

激活 Developer Hub

slide_8

本项目会把 Trailhead Playground 用作 Developer Hub，并在 scratch org 中创建 Lightning Web Component。先解释一下两个术语：

  • Scratch Org：一个专用的、可配置的、短期的 Salesforce 环境，你可以在启动新项目、新功能分支或功能测试时快速创建。
  • Developer Hub（Dev Hub）：你和团队用来创建和管理 scratch org 的主 Salesforce Org。

激活 Dev Hub：

  1. 启动你的 Trailhead Playground；
  2. 点击齿轮图标进入 Setup；
  3. 在 Quick Find 框搜索并选择 Dev Hub；
  4. 点击滑块启用 Dev Hub。

注意：在 Org 中启用 Dev Hub 之后，就无法再禁用它了。

02 创建 Lightning Web Component（Create a Lightning Web Component）

slide_9

本单元使用已安装的工具，创建一个 Salesforce DX 项目、授权 Dev Hub、创建 scratch org，并创建一个 Lightning Web Component。

创建 Salesforce DX 项目

slide_10

使用 Salesforce CLI 与 Org 交互的基础是 Salesforce DX 项目。一个项目由若干本地配置文件和你想部署的代码组成——在 Salesforce 术语中，这些代码被称为"元数据（metadata）"，它是 Salesforce Platform 的基础。

创建项目：

  1. 打开 Visual Studio Code；
  2. 按 Command + Shift + P（macOS）或 Ctrl + Shift + P（Windows/Linux），输入 create project；
  3. 选择 SFDX: Create Project 并按 Enter；
  4. 保持默认项目类型 Standard，按 Enter；
  5. 输入项目名 trailhead，按 Enter；
  6. 在本机选择一个目录存放项目，点击 Create Project。

Visual Studio Code 会自动为你打开新项目。

授权你的 Dev Hub

slide_11

下一步是授权 Dev Hub。在 VS Code 中：

  1. 按 Command + Shift + P（macOS）或 Ctrl + Shift + P（Windows/Linux）；
  2. 输入 sfdx；
  3. 选择 SFDX: Authorize a Dev Hub；
  4. 输入 trailheadOrg 作为 Org 别名并按 Enter；
  5. 用你的 Dev Hub Org 凭据登录；
  6. 点击 Allow。

浏览器认证后，CLI 会记住你的 Dev Hub 凭据，成功消息如上图所示（SFDX: Authorize a Dev Hub successfully ran）。授权 Dev Hub 是创建 scratch org 的前提——scratch org 是 Salesforce Platform 上进行开发的临时环境。

创建 Scratch Org

slide_12
  1. 在 VS Code 中，按 Command + Shift + P（macOS）或 Ctrl + Shift + P（Windows/Linux），输入 focus terminal 并选择 Terminal: Focus Terminal；
  2. 在终端输入 sf org create scratch --definition-file config/project-scratch-def.json --alias scratchOrg --target-dev-hub trailheadOrg 并按 Enter。

这条 CLI 命令使用你的 project-scratch-def.json 文件和别名 scratchOrg 创建 scratch org。耐心一点，创建 scratch org 可能需要一分钟。成功时，终端会显示如上图所示的输出（org ID、用户名、别名、耗时，以及 "Your scratch org is ready"）。

创建 Lightning Web Component

slide_13

创建 Lightning Web Component 是个直接的过程。Salesforce CLI 已经创建了让上手更轻松的项目结构。项目有一个特殊文件夹 force-app/main/default，这个被称为"包目录（package directory）"的文件夹包含当前 Salesforce DX 项目的所有元数据。因为 Lightning Web Components 也是元数据，它们存储在名为 lwc 的子文件夹里。

上图是 VS Code 中 Salesforce DX 项目的文件浏览器视图，能看到 .sfdx、.vscode、config 和 force-app 等子目录。

用终端创建组件：

  1. 打开 VS Code；
  2. 按 Command + Shift + P 或 Ctrl + Shift + P，输入 focus terminal 并选择 Terminal: Focus Terminal；
  3. 在 Terminal 标签页输入 sf lightning generate component -n myFirstWebComponent -d force-app/main/default/lwc --type lwc 并按 Enter。

这会为你的第一个 Lightning Web Component 创建文件（如上图所示）。命令参数含义：-n 定义组件文件夹及其文件的名称；-d 定义组件的目标目录（目录名必须为 lwc）；--type 指定要创建 Lightning Web Component。

为你的第一个 Lightning Web Component 添加代码和元数据

slide_14

一个 Lightning Web Component 由三个核心文件组成：

  • myFirstWebComponent.js-meta.xml——元数据定义文件，控制例如可以把它添加到 Salesforce 界面的哪些位置（targets）；
  • myFirstWebComponent.js——JavaScript 文件，从 lwc 引擎导入；
  • myFirstWebComponent.html——模板文件。

打开刚创建的 myFirstWebComponent 文件夹，把这三个文件的内容分别替换为提供的代码。

提醒：你即将粘贴的 JavaScript 和 HTML 代码里故意内置了一些错误（例如 @track 装饰器没有导入），所以看到红色波浪线不要担心——这些错误会由 VS Code 结合 Salesforce Lightning Web Components 扩展来标记，我们稍后修复。

保存 JS 文件后，你会注意到两件事：注解词 @track 下方出现红色波浪线，且浏览器中 JS 文件名颜色变成红色——两者都提示代码有误。

同样地，HTML 模板文件里第 4 行也有错误被高亮（如上图）。现在先忽略这些问题，继续下一步。

03 分析代码并部署到你的 Org（Analyze Your Code and Deploy It to Your Org）

slide_15

本单元使用 IDE 工具修复 JavaScript 和 HTML 中的错误，然后把组件部署到 scratch org 并添加到记录页面。

修复 JavaScript 错误

slide_16

开发者最重要的任务，是写出能正常工作的代码。先修复 JavaScript 文件里的错误：

  1. 打开 VS Code，点击 myFirstWebComponent.js；
  2. 将鼠标悬停在红色下划线的 track 上，会显示相关错误信息：LWC1102: Invalid 'track' decorator usage. Supported decorators (api, wire, track) should be imported from "lwc"；
  3. 点击 Problems 标签页查看所有错误。

第一个错误信息以 "LWC" 加数字开头，说明它来自 Lightning Web Components 引擎的校验。仔细看代码会发现，第一行我们从 lwc 引擎导入了 LightningElement，却没导入 track。修复方式：在花括号里、LightningElement 之后输入 track（两个词之间用逗号分隔），变成 import { LightningElement, track } from 'lwc';，然后保存。

两个错误和红色波浪线都消失了。为什么？因为 Lightning Web Components 扩展默认自带 ESLint——一个广泛使用的 linting 工具，用于评估代码错误和最佳实践。Salesforce 为 LWC 开发者开箱提供了特定规则，让错误在部署前就暴露出来。还记得自动添加到 lwc 元数据文件夹里的 .eslintrc 文件吗？它就是定义 Salesforce 专属 linting 规则的配置文件。

修复 HTML 模板错误

slide_17

现在修复 HTML 模板。利用 VS Code 的 IntelliSense 配合 Salesforce Lightning Web Components 扩展：

  1. 打开 myFirstWebComponent.html；
  2. 把光标放到红色下划线的 for:each 属性的空花括号里；
  3. 按 Ctrl + Space，出现 IntelliSense 下拉框；
  4. 选择 contact 并按 Enter，再加个 s 变成复数 contacts；
  5. 给红色标记的 div 标签添加属性 key={contact.Id}；
  6. 保存文件。

修复代码时你体验了两件事：一是模板表达式上的 IntelliSense（在 JS 文件里添加属性或函数后，模板里会自动可用）；二是即时的代码/标记校验（缺少必需属性时 IDE 会提示）。

模板里所有基础 Lightning 组件也有 IntelliSense——输入 <lightning 时会出现 lightning-accordion、lightning-button 等列表。

把光标悬停在已有标记上，扩展还会提供所选基础组件的丰富文档信息。

注：关于代码或 token 的警告，一个原因是 Salesforce CLI 版本过旧（组件代码只和你的 CLI 版本一样新）。SLDS Linter 和 SLDS Validator 会标记过时代码，所以旧 CLI 可能导致更多警告。完成本徽章可忽略设计 token 警告。

部署并配置你的新 Lightning Web Component

slide_18

代码都修复好了，现在把本地元数据推送到 scratch org：

  1. 在 Terminal 标签页输入 sf project deploy start --target-org scratchOrg 并按 Enter；
  2. 元数据推送成功后，运行 sf org open --target-org scratchOrg 打开 scratch org。

接下来配置 Account 记录页面：

  1. 从 App Launcher 找到并选择 Sales；
  2. 点击 Accounts 标签页，再点 New 创建账户；
  3. Account Name 填 Component Developers，点击 Save；
  4. 点击齿轮图标，选择 Edit Page 打开 Lightning App Builder；
  5. 把 myFirstWebComponent（在 Custom 下）拖到页面上；
  6. 在菜单栏点 Desktop 下拉，选择 Phone，确认组件在页面上显示；
  7. 点击 Save，再点击 Activate；
  8. 点击 Assign as Org Default，选择 Desktop and phone；
  9. 点击 Next，再 Save。

点击 Back 返回 Account 记录，你的 Lightning Web Component 应如上图所示——ContactInformation 组件在 Component Developers 账户的 Related 标签页下列出联系人。

04 使用 Live Preview 测试你的组件（Test Your Component Using Live Preview）

slide_19

最后一单元使用 Live Preview 在桌面和 iOS 模拟器中查看组件的实时更新。

在桌面环境运行 Lightning 应用的 Live Preview

slide_20

借助 Live Preview，你可以在桌面或 Salesforce 移动应用（iOS/Android）环境中实时预览 Lightning 应用。预览会在本地组件变化时自动更新，无需部署代码或刷新浏览器。

  1. 在 VS Code 中，按 Command + Shift + P 或 Ctrl + Shift + P，输入 new terminal 并选择 Terminal: Create New Terminal；
  2. 先运行 sf update 确保 Live Preview 命令为最新版；
  3. 首次运行 Live Preview 命令时，终端会提示启用该工具，按 Enter 或输入 y 启用；
  4. 提示选择要预览的 Lightning Experience 应用时，用方向键选择 Sales 并按 Enter。

命令成功运行后，浏览器会打开新标签页，显示 Org 的 Seller Home 页面预览。命令参数：--target-org 指定要预览的目标 Org（设为 scratchOrg）；--device-type 定义预览运行的环境（设为 desktop）。

现在编辑组件看看预览如何实时更新：在浏览器预览中点击 Accounts 标签页并打开 Component Developers 记录；在 VS Code 中打开 myFirstWebComponent.html，把 lightning-card 元素的 title 从 "ContactInformation" 改为 "Contact Information"，保存。看浏览器预览，组件标题会自动更新——无需重新部署或手动刷新。

在 iOS 环境运行 Lightning 应用的 Live Preview（macOS only）

slide_21

Mac 用户可以通过 Xcode 在 iOS 模拟器中运行 Live Preview。需要先安装 Xcode 和 iOS 模拟器。运行步骤如下：

  1. 在 VS Code 中打开新终端，运行 sf lightning dev app --target-org scratchOrg --device-type ios；
  2. 提示选择应用时选 Sales，提示选择设备时用方向键选一款 iPhone；
  3. 提示下载安装 Salesforce Mobile App 时输入 y 并按 Enter；
  4. Salesforce 应用会在 iPhone 模拟器中打开，接受使用条款后显示登录页；
  5. 在模拟器右上角点 Settings 打开 Choose Connection 菜单，点 Add 添加新 host，Host 字段填 scratch org 的 URL（可运行 sf org display user --target-org scratchOrg 获取 Instance URL）；
  6. Username 填终端输出里的用户名，密码运行 sf org generate password --target-org scratchOrg 生成，然后点 Log In to Sandbox；
  7. 如提示，选择 Allow 允许访问。

上图是模拟器中的 Salesforce 登录页。登录后导航到 Component Developers 账户，在 VS Code 中把标题改为 "Contact Info" 并保存，回看模拟器，组件标题已自动更新——这就是 Live Preview 带来的快速迭代体验。

上图是 Xcode iPhone 模拟器中 Salesforce Mobile App 显示 Allow Access 提示的窗口。

至此，本项目结束：你安装并使用了开发 LWC 的推荐工具，用 Live Preview 在桌面（以及 Mac 上的 iOS 模拟器）实时预览了组件改动。

文章来源：Trailhead - Set Up Your Lightning Web Components Developer Tools