您已经安装了我们推荐的用于开发Lightning Web Components的工具。然后您复制并粘贴了一些损坏的代码，我们知道这将导致部署失败。您可能会说您以前从未在现实生活中做到过，对吧？

您知道您可以向专家学习吗？ 观看此视频，以了解有关该项目主题的更多信息：

在网络上搜索（希望能正常工作的）代码后，作为开发人员最重要的任务是自己编写有效的代码。让我们修复前面介绍的错误，从JavaScript文件开始。

1. 打开Visual Studio代码。
2. 单击myFirstWebComponent.js。
3. 将鼠标悬停在带有红色下划线的单词上track。这将显示与此特定错误相关的错误消息：
   
4. 单击“问题”选项卡以显示当前打开的文件中出现的所有错误。您应该会看到以下内容：
   

当前文件以及“问题”选项卡都显示代码中检测到的错误。

第一条错误消息表明这是Lightning Web Components引擎要求的结果。此类错误包括“ LWC”后跟数字。如果仔细看一下代码，您会在第一行中看到我们正在LightningElement 从lwc引擎导入，但是我们没有在导入track。让我们修复一下：

1. 在单词后面LightningElement（在花括号内）单击鼠标右键。
2. 输入track，不要忘了用逗号分隔两个单词。您的代码应如下所示：
   import { LightningElement, track } from 'lwc';
3. 在macOS上按CMD + S，在Windows或Linux上按CTRL + S来保存文件。

错误和红线都消失了。

但是等等，为什么两个错误都消失了？又为什么其他错误消息以[eslint]开头？

默认情况下，ESLint附带Lightning Web Components扩展。ESLint是一种广泛使用的整理工具，可评估代码是否有错误，编码最佳实践等。作为Lightning Web组件开发人员，Salesforce为您提供了开箱即用的特定ESLint规则，以便您可以编写出色的代码。而且，如果您犯了一个错误，则在部署代码之前，插入规则可以帮助您查看错误。那不是很好吗？

显示以上错误信息[no-undef]。该错误消息表示您定义了一个属性，在本例中为decorator track，但之前未进行声明。这是 许多超级有用的整理规则之一，可帮助您保持代码的清洁和可维护。

您还记得.eslintrc自动添加到lwc元数据文件夹的文件吗？这是配置文件，用于定义特定于Salesforce的整理规则：

{
   "extends": "plugin:@salesforce/eslint-config-lwc/recommended"
}

Salesforce提供了不同的规则集，包括基本，推荐和扩展。由于这些棉绒规则是特定于项目的，因此您可以将不同的规则集用于不同的项目。

如果您想了解有关ESLint或Salesforce提供的插入规则的更多信息，请查看 GitHub存储库。

现在我们有了一个有效的JavaScript文件，让我们在您的Web组件模板中修复HTML标记。

现在，您已经修复了JavaScript文件中的错误，您将学习如何与Salesforce Lightning Web Components扩展一起使用Visual Studio Code的智能功能。

1. 在Visual Studio代码中打开myFirstWebComponent.html。
2. 将光标置于带红色下划线的for:each属性的空花括号中。
3. 按CTRL +空格键。您会看到智能感知下拉列表。
   
4. 按Enter键。
5. 接下来，将此属性添加到带有红色标记的div标记中：
   key={contact.Id}
6. 在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标记内的表达式进行智能感知。Lightning Web Components扩展提供了智能感知功能，这意味着如果您将其他属性或功能添加到JavaScript文件中，则模板文件中将自动为您提供它们。节省大量时间！

其次，您经历了代码的动态验证，或者在这种情况下是标记。与JavaScript文件中的相同。例如，如果您缺少必填属性，IDE会告诉您。

您还将在模板文件中的所有基本Lightning组件上获得智能感知。当您开始输入时<lightning，您将得到一个这样的列表。

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

现在，我们所有的代码都已修复，现在是将本地元数据推送到草稿组织的时候了。

1. 打开Visual Studio代码。
2. 在macOS上按Command + Shift + P或在Windows或Linux上按Ctrl + Shift + P，然后键入focus terminal。按Enter键。
3. 输入以下命令以将元数据部署到您的组织中：
   sfdx force:source:push
4. 按Enter键。

将元数据成功推送到草稿组织后，您可以将组件添加到“客户记录”布局中。

正如我们已经在Visual Studio Code中一样，我们可以利用Salesforce CLI的另一个功能。

1. 转到Visual Studio代码终端。
2. 输入以下命令，然后按Enter。这将打开默认的临时组织。
   sfdx force:org:open

现在，让我们配置Accounts对象的布局。

1. 在应用启动器（）中，找到并选择销售。
2. 单击“帐户”选项卡，然后单击“新建”以创建一个帐户。输入Component Developers作为Account Name，然后点击Save。
3. 单击齿轮图标（ ），然后选择“编辑页面”以打开Lightning App Builder。
4. 将myFirstWebComponent组件拖到页面上。
5. 单击保存，然后单击激活。
6. 单击“指定为组织默认值”，然后单击“保存”。
7. 单击上一步以返回到帐户记录。

而已！该项目向您展示了如何安装和使用推荐的开发人员工具来开发Lightning Web Components。而且您学习了如何复制和粘贴有错误的代码（以后应避免使用）。