您已经安装了我们推荐的用于开发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。而且您学习了如何复制和粘贴有错误的代码（以后应避免使用）。

在这一步中，您将学习如何使用之前安装的工具。

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

使用Salesforce CLI与组织进行交互的基本基础是Salesforce DX项目。一个项目由几个本地配置文件以及要部署的代码组成。用Salesforce术语来说，我们将此代码称为元数据，它是Salesforce平台的基础。如果您不熟悉Salesforce，请查看“ 平台开发基础知识”以了解有关我们元数据驱动方法的更多信息。

我们将使用Visual Studio Code创建一个项目。

1. 打开Visual Studio代码。
2. 在macOS上按Command + Shift + P或在Windows或Linux上按Ctrl + Shift + P，然后键入create project。选择SFDX：创建项目，然后按Enter。
3. 保留默认的项目类型选择Standard，然后按Enter。
4. 输入Trailhead作为项目名称，然后按Enter。
5. 在您的本地计算机上选择将要存储项目的目录。单击创建项目。

大！您已经创建了第一个用于使用Lightning Web Components的Salesforce DX项目。Visual Studio Code将自动为您打开新项目。

下一步是对开发中心进行身份验证。如果您使用的是Trailhead Playground，则可以在“ 获取Trailhead Playground用户名和密码”中了解如何获取下一步的凭据。

1. 在Visual Studio Code中，在macOS上按Command + Shift + P，在Windows或Linux上按Ctrl + Shift +P。
2. 键入sfdx。
3. 选择SFDX：授权开发中心。
4. 使用您的Dev Hub组织凭据登录。
5. 点击允许。
   
6. 在浏览器中进行身份验证之后，CLI会记住您的Dev Hub凭据。成功消息应如下所示：   

验证Dev Hub是创建临时组织的先决条件，这是在Salesforce平台上进行开发的临时环境。我们在下一步中创建一个。

1. 在Visual Studio Code中，在macOS上按Command + Shift + P，在Windows或Linux上按Ctrl + Shift +P。
2. 键入sfdx。
3. 选择SFDX：创建一个默认暂存组织…。
4. 按Enter接受默认值project-scratch-def.json。
5. 按Enter接受默认的trailhead临时组织别名。
6. 按Enter接受默认的7 days临时组织工期。
7. 请耐心等待，创建临时组织可能需要一分钟。在VS Code的输出面板中，成功消息应如下所示：

17:18:11.779 sfdx force:org:create -f config\project-scratch-def.json --setalias trailhead --durationdays 7 --setdefaultusername --json --loglevel fatal ended with exit code 0

现在，您已经准备好开发第一个Lightning Web组件。如果您想了解有关Salesforce DX的更多信息，请查看使用Salesforce DX进行 应用程序开发。

创建Lightning Web组件是一个简单的过程。而且Salesforce CLI已经创建了一个项目结构，可以帮助您更轻松地上手。

文件夹结构如下所示：

我们创建的项目有一个特殊的文件夹force-app/main/default。此文件夹称为包目录，包含当前Salesforce DX项目的所有元数据。由于Lightning Web组件也是元数据，因此它们存储在名为的子文件夹中lwc。在下一步中，我们将Lightning Web组件添加到此文件夹。

我们可以像创建Salesforce DX项目一样使用Visual Studio Code创建Lightning Web组件。或者，我们可以直接使用Salesforce CLI。

1. 打开Visual Studio代码。
2. 在macOS上按Command + Shift + P或在Windows或Linux上按Ctrl + Shift + P，然后键入focus terminal。按Enter键。
3. 输入sfdx force:lightning:component:create -n myFirstWebComponent -d force-app/main/default/lwc --type lwc，然后按Enter确认。

这将为您的第一个Lightning Web组件创建所需的文件。

这些是您在命令中使用的参数。

• -n-定义Lightning Web组件文件夹及其文件的名称。
• -d-这定义了应在其中创建Lightning Web组件的目标目录。目标目录必须命名lwc
• –type-这指定您要创建Lightning Web组件。

现在让我们看一下构成Lightning Web组件的文件。为此，我们将复制并粘贴我们已经为您准备的一些HTML，JavaScript和XML。我们从myFirstWebComponent.js-meta.xml文件开始。

1. 打开新的子文件夹myFirstWebComponent，我们只是在LWC子文件夹中创建
2. 单击myFirstWebComponent.js-meta.xml。
3. 用以下XML标记替换XML文件的内容：

   <?xml version="1.0" encoding="UTF-8"?>
   <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
      <apiVersion>45.0</apiVersion>
      <isExposed>true</isExposed>
      <targets>
          <target>lightning__AppPage</target>
          <target>lightning__RecordPage</target>
          <target>lightning__HomePage</target>
      </targets>
   </LightningComponentBundle>
4. 在macOS上按CMD + S，在Windows或Linux上按CTRL + S来保存文件。

您刚刚更新的文件是元数据定义文件。它包含几个配置元素，这些元素控制例如使用Lightning App Builder（目标）将其添加到Salesforce用户界面的位置。您可以在文档中阅读有关元数据配置选项的更多信息 。

接下来，我们将更新Lightning Web组件的JavaScript文件。

1. 在Visual Studio代码中，单击myFirstWebComponent.js。
2. 用以下代码替换文件的内容：

   import { LightningElement } from 'lwc';
   export default class HelloIteration extends LightningElement {
       @track
       contacts = [
           {
               Id: 1,
               Name: 'Amy Taylor',
               Title: 'VP of Engineering',
           },
           {
               Id: 2,
               Name: 'Michael Jones',
               Title: 'VP of Sales',
           },
           {
               Id: 3,
               Name: 'Jennifer Wu',
               Title: 'CEO',
           },
       ];
   }
3. 在macOS上按CMD + S，在Windows或Linux上按CTRL + S 来保存文件。

保存文件后，您会立即注意到一些事情。

• 带注释的单词@track在红色波浪线下划线。
• 资源管理器中的JavaScript文件颜色变为红色，并且旁边有2。

两者都表明JavaScript代码中的某些内容不正确。作为一名优秀的开发人员，您通常会立即对其进行修复。但是现在您可以忽略这些问题。而是将HTML标记添加到Web组件模板文件。

1. 在Visual Studio代码中，单击myFirstWebComponent.html。
2. 将此标记插入现有<template></template>标签中：

   <lightning-card title="ContactInformation" icon-name="custom:custom14">
      <div class="slds-m-around_medium">
         <template for:each={} for:item="contact">
            <div>
               {contact.Name}, {contact.Title}
            </div>
         </template>
      </div>
   </lightning-card>
3. 在macOS上按CMD + S，在Windows或Linux上按CTRL + S来保存文件。

同样，您会看到一个指示，表明HTML标记中的某些内容不是应该的。

让我们也忽略它（暂时）。

通常，下一步是将项目部署到组织中。但是代码中充满了错误，并且部署将失败。在现实生活中，您可能会或可能不会遇到失败的部署。请务必注意IDE中显示的所有错误，并立即进行修复。