Analyze Your Code and Deploy It to Your Org

备注

用中文（简体）学习？在此徽章中，Trailhead 实践挑战验证使用英文。括号中提供了译文，用作参考。在您的 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，您会获得如下列表。

基本的 Lightning 组件 IntelliSense 窗口，显示基本 Lightning 组件列表。

当您将光标悬停在现有标记上时，扩展会为您提供有关所选基本组件的丰富信息。

基本 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 组件。