分析您的代码并将其部署到您的组织
备注
用中文（简体）学习？在中文（简体）Trailhead Playground 中开始挑战，用括号中提供的译文完成挑战。仅复制并粘贴英文值，因为挑战验证基于英文数据。如果在中文（简体）组织中没有成功通过挑战，我们建议您 (1) 将区域设置切换为美国，(2) 按此处说明将语言切换为英文，(3) 再次单击“检查挑战”按钮。
查看 Trailhead 本地化语言徽章详细了解如何利用 Trailhead 译文。
您已安装我们推荐用于开发 Lightning Web 组件的工具。您也复制并粘贴了一些损坏的代码，这会导致部署失败。您可能会说您以前从未在现实生活中这样做过，对吧？
修复 JavaScript 错误
作为开发人员最重要的任务是在网上搜索（希望有用）代码后，自己编写有效代码。让我们修复之前引入的错误，从 JavaScript 文件开始。
- 打开 Visual Studio Code。
- 单击 myFirstWebComponent.js。
- 将鼠标悬停在红色下划线单词
track上。将显示与此特定错误相关的错误提示：
- 单击 Problems（问题）选项卡显示您当前打开的文件中显示的所有错误。您应看到如下内容：
当前文件以及 Problems（问题）选项卡都向您显示您的代码中检测到的错误。
第一个错误提示表明这是 Lightning Web 组件引擎要求的结果。此类错误包括“LWC”后跟一个数字。如果您仔细看下代码，您会在第一行看到我们正在从 lwc 引擎导入 LightningElement，但我们没有导入 track。让我们来解决这个问题：
- 右击单词
LightningElement（在大括号内）。
- 输入
track，不要忘记用逗号将两个单词隔开。您的代码看起来应是：import { LightningElement, track } from 'lwc';
- 按 macOS 上的 CMD + S 或 Windows 或 Linux 上的 CTRL + S 保存文件。
两个错误和红线都消失了。
默认情况下，IDE 会在您键入时验证文件内容。您可以在 Visual Studio Code 中将其设置为首选项，以便在键入时或在保存文件后进行验证。
等等，为什么两个错误都消失了？为什么另一个错误提示前面加上 [eslint]？
Lightning Web 组件扩展默认随 ESLint 一起提供。ESLint 是一种广泛使用的 lint 分析工具，用于评估代码中的错误、最佳实践编码等。Salesforce 为您这样的 Lightning Web 组件开发人员提供了现成的特定 ESLint 规则，以便您可以编写出色的代码。如果您犯了错误，lint 分析规则可帮助您在部署代码之前查看错误。是不是很棒？
以上错误提示指示 [no-undef]。该错误提示表示您定义了一个属性（在本例中为 decorator track），但之前未声明。这是许多超级有用的 lint 分析规则之一，可帮助您保持代码干净且可维护。
还记得自动添加到 lwc 元数据文件夹的 .eslintrc 文件吗？那是配置文件，定义 Salesforce 特定的 lint 分析规则：
{
"extends": "plugin:@salesforce/eslint-config-lwc/recommended"
}
Salesforce 提供不同的规则集，包括 base、recommended 和 extended。因为这些 lint 分析规则是特定于某个项目的，您可以为不同的项目使用不同的规则集。
当您部署 Lightning Web 组件时，Salesforce 会自动用 @salesforce/eslint-config-lwc/base lint 分析规则验证您的代码。如果您自己重新配置 lint 分析规则，请记住这一点。
如果您想了解有关 ESLint 或 Salesforce 提供的 lint 分析规则的更多信息，请查看 GitHub 存储库。
现在我们有了有效的 JavaScript 文件，让我们修复 Web 组件模板中的 HTML 标记。
修复 HTML 模板错误
现在您已修复 JavaScript 文件中的错误，您将学习如何将 Visual Studio Code 的 IntelliSense 功能与 Salesforce Lightning Web 组件扩展结合使用。
- 在 Visual Studio Code 中打开 myFirstWebComponent.html。
- 将光标放到带有红色下划线的
for:each属性的空大括号中。
- 按 CTRL + Space。您将看到 IntelliSense 下拉菜单。
- 选择 contact（联系人） 然后按 Enter 插入
contact。
- 添加一个
s使 contact 成为复数形式：contacts。
- 下一步，将此属性添加到红色标记
div标记：key={contact.Id}中。
- 按 macOS 上的 CMD + S 或 Windows 或 Linux 上的 CTRL + S 保存文件。
您的代码看起来应是这样：
<lightning-card title="ContactInformation" icon-name="custom:custom14">
<div class="slds-m-around_medium">
<template for:each={contacts} for:item="contact">
<div key={contact.Id}>
{contact.Name}, {contact.Title}
</div>
</template>
</div>
</lightning-card>
修复代码时，您将看到以下两项内容。
首先，HTML 标记中的表达式的 IntelliSense。Lightning Web 组件扩展提供了 IntelliSense，这意味着如果您将其他属性或函数添加到 JavaScript 文件中，它们将在模板文件中自动可用。这样非常节约时间！
其次，您体验了代码的动态验证，或者本例中的标记。与 JavaScript 文件中相同。例如，如果缺少必需属性，IDE 将告诉您。
您还可以在模板文件中的所有基本 Lightning 组件上获得 IntelliSense。当您开始键入 <lightning，您会获得如下列表。
当您将光标悬停在现有标记上时，扩展会为您提供有关所选基本组件的丰富信息。
有关代码或令牌的警告消息的一个原因是 Salesforce CLI 的安装已过时。CLI 生成的组件代码仅与您的 CLI 安装一样是最新的。SLDS Validator（Salesforce Extension Pack 的一部分）标记过时的代码，因此较旧的 CLI 可能会导致更多警告。
对于本徽章，您可以忽略设计令牌警告，因为它们不会阻碍您完成步骤。但是，在此徽章之外，您应该调查所有警告消息，并使 Salesforce CLI 保持最新。
部署并配置您的新 Lightning Web 组件
现在您的所有的代码都已修复，是时候将本地元数据推送到临时组织了。
- 要将元数据部署到您的组织，请在 Terminal（终端）选项卡中输入以下命令：
sf project deploy start
- 按 Enter 键。
成功将您的元数据推送到临时组织后，您可以将组件添加到 Account（客户）记录布局。
- 要打开默认的临时组织，请在 Terminal（终端）选项卡中输入以下命令：
sf org open
- 按 Enter 键。
现在让我们来配置 Accounts（客户）记录页面。
- 从应用程序启动器 (
)，找到并选择 Sales（销售）。
- 单击 Accounts（客户）选项卡，然后单击 New（新建）来创建客户。输入 Component Developers（组件开发人员）作为 Account Name（客户名称），然后单击 Save（保存）。
- 单击齿轮图标 (
)，然后选择 Edit Page（编辑页面）打开 Lightning 应用程序生成器。
- 将 myFirstWebComponent 组件拖到页面。
- 单击 Save（保存），然后单击 Activate（激活）。
- 单击 Assign as Org Default（分配为组织默认设置），然后单击 Next（下一步），然后单击 Save（保存）。
- 单击 Back（返回）
返回 Account（客户）记录。
就是这么简单！本项目向您展示了如何安装和使用推荐的开发人员工具来开发 Lightning Web 组件。并且您学习了如何复制和粘贴有错误的代码（将来应避免这种情况）。
我们无法在临时组织中检查您的工作，但您仍然可以单击 Verify Step（验证步骤）并获得徽章。查看 Trailhead 示例库和 Lightning Web 组件模式了解更多代码示例，帮助您学习如何开发出色的 Lightning Web 组件。