标签： LWC概述

LWC概述

适用于 VS Code 的 Lightning Web 组件扩展利用编辑器的内置代码导航和语言功能，以便您可以高效地构建 Lightning Web 组件。

利用以下适用于 VS Code 的 Lightning Web 组件扩展功能：

  • 代码补全
  • Linting
  • 查看有关悬停的文档
  • 代码导航

代码补全

Lightning Web 组件扩展基于 VS Code 的 HTML 和 JavaScript 语言功能构建，包括语法突出显示、括号匹配以及使用 IntelliSense 完成特定于语言的代码。该扩展为以下 Lightning Web 组件资源提供代码完成。

代码片段

代码片段可用于基架类和接口定义，以及各种语句（如循环和条件语句等）。在处理 LWC HTML 文件时，请从命令面板运行以查看可用代码段。您还可以通过键入组件名称（例如，）。Insert Snippetaccordion

以下存储库中提供了用于 Salesforce 开发的开箱即用代码段：

  • Apex 代码片段
  • 用于 LWC 开发的 HTML 代码片段
  • 用于 LWC 开发的 JavaScript 代码片段

@salesforce作用域模块

Lightning 组件通过作用域模块访问 Salesforce 值。Lightning Web 组件扩展为以下作用域模块提供代码完成：

  • @salesforce/resourceUrl
  • @salesforce/contentAssetUrl
  • @salesforce/apex
  • @salesforce/user

要了解有关模块的更多信息，请参阅《Lightning Web 组件开发人员指南》中的@salesforce模块了解更多信息。@salesforce

在此示例中，VS Code 显示完成语句时可供选择的可能静态资源名称。import

下面是 的代码完成。@salesforce/schema

下面是 Apex 控制器的代码完成示例。

闪电 API

VS Code 还完善了 Lightning API 资源，例如 和 .有关详细信息，请参阅《照明 Web 组件开发人员指南》中的 lightning/ui*Api Wire和功能。lightning/uiRecordApilightning/uiObjectInfoApi

Lightning Web 组件语法

VS Code 完善了 Lightning Web Components 框架的反应式属性和连线服务。有关详细信息，请参阅《Lightning Web 组件开发人员指南》中的反应性属性和使用线路服务获取数据。

下面是在装饰器中包含 Apex 函数的代码完成示例。getContactList@wire

HTML 属性和标记中的命名空间补全

还为 和 命名空间中组件的 HTML 标记和属性提供了代码完成功能。在这里，VS Code 使用 ，完成其属性。lightningcc-view-sourcesource

查看有关悬停的文档

当您将鼠标悬停在命名空间中的标准 Lightning Web 组件上时，VS Code 会显示文档，如果您为自定义组件提供文档，则会显示命名空间。以下是显示的文档。该下拉列表还提供了一个链接，用于在组件库中查看组件。lightningclightning-layout

Linting

Linting 会在您编辑时提供有关格式错误或外观可疑的代码的错误。 VS Code 强制执行 Salesforce 的 ESLint 规则。要激活 ESLint，请从命令行安装它。有关说明，请参阅 Lightning Web 组件 ESLint 插件和 Lightning Web 组件 ESLint 配置存储库。

在此示例中，当将鼠标悬停在 上时，linter 会报告您不能命名以“on”开头的 API 属性。onpress

窥视问题和快速修复

VS Code 具有一系列操作来快速解决问题和重构代码，包括快速修复和速览问题。若要了解详细信息，请参阅 VS Code 文档中的重构。

单击错误消息上的“查看问题”将突出显示 linter 发现错误的行。如果邮件显示存在多个错误，请单击邮件右上角的向下箭头以查看其他错误。

单击“快速修复”可提供用于禁用行或文件中有效 API 名称警告的选项，以及指向文档的链接。您可以通过单击旁边的黄色灯泡图标来查看这些相同的选项。@api onpress;

错误和警告

悬停时显示文件和编译器错误。在这里，当鼠标悬停在上面时，错误消息说必须声明它。@track

代码导航

VS Code 提供了预览或跳转到代码中定义的快捷方式，而不会丢失当前正在处理的代码。有关详细信息，请参阅 VS Code 文档的“代码导航”部分。

若要预览定义，请按住 Ctrl（Windows 或 Linux）或 Command （macOS），然后将鼠标悬停在要查看其定义的项目上。此示例显示命名空间组件源的预览。c

若要查看定义，请右键单击该项并选择“速览定义”，或按 Alt+F12。

若要跳转到定义的位置，请右键单击该项，然后选择“转到定义”，或按 F12。

支持 js-meta.xml

VS Code 通过集成红帽对 js-meta.xml 的 XML VSCode 扩展来提供 IntelliSense 支持。它支持扩展开箱即用的功能，例如但不限于自动建议、语法错误报告、重命名支持、自动代码生成等。

快速启动 LWC 开发

概述

创建一个名为 LWC 的组件，用于在应用中显示联系人姓名和电话号码。您将从名为 的 Apex 类中获取要显示的联系信息。contactListContactController

在开始之前，请安装 Salesforce Extensions for Desktop 或 Set Up Code Builder

添加查询联系人的 Apex 类

  1. 在 VS Code 中，运行命令 SFDX：从命令面板创建项目以创建 Salesforce DX 项目（如果没有）。
  2. 登录到要添加 LWC 的组织。
  3. 从命令面板运行 SFDX： Refresh SObject Definitions 命令，以获取 SObjects 相关代码的完成建议。
  4. 从命令面板中，运行 SFDX： Create Apex Class 并创建一个名为 .ContactController

接下来，让我们添加一个调用到此类的方法。使此方法既是公共的，又是静态的。因为它是一个静态方法，所以你不需要创建类的实例来访问该方法，你只需使用类的名称，后跟点 （） 和方法的名称。此方法查询联系人对象上的一组字段。将此代码粘贴到：getContacts.ContactController.cls

public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContacts() {
        return [
SELECT
Id,
Name,
Email,
Phone
FROM Contact
WITH SECURITY_ENFORCED
LIMIT 10
];
    }
}

接下来，添加显示查询字段的 LWC 组件。

创建显示联系人信息的 LWC 组件

  1. 从命令面板中，运行 SFDX：创建 Lightning Web 组件，并创建在默认位置调用的组件。contactList
  2. 在文件中，剪切并粘贴以下代码，然后保存文件：contactList.html
<template>
    <lightning-card title="Contact List">
        <template if:true={contacts.data}>
            <template for:each={contacts.data} for:item="contact">
                <div class="slds-var-p-horizontal_medium" key={contact.Id}>
                    <p>{contact.Name}, {contact.Phone}</p>
                </div>
            </template>
        </template>
        <template if:true={contacts.error}>
            <p>{contacts.error}</p>
        </template>
    </lightning-card>
</template>
  1. 在文件中，剪切并粘贴以下代码并保存：contactList.js
import { LightningElement, wire } from 'lwc';
import getContacts from '@salesforce/apex/ContactController.getContacts';

export default class ContactList extends LightningElement {
    @wire(getContacts) contacts;
}
  1. 将以下代码剪切并粘贴到文件中并保存：contactList.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
 	<apiVersion>57.0</apiVersion>
 	<isExposed>true</isExposed>
 	<targets>

   		<target>lightning__HomePage</target>
 	</targets>
</LightningComponentBundle>
  1. 右键单击“SFDX：将源部署到组织”下的默认文件夹，然后运行“将源部署到组织”。force-app/main

在 Lightning Experience 中将新组件添加到您的应用程序

  1. 在 Visual Studio Code 中，打开命令面板并运行 SFDX： Open Default Org。 这将在单独的浏览器中打开您的组织。
  2. 在应用启动器中，找到并选择销售。
  3. 点击设置齿轮，然后选择编辑页面。
  4. 将 Lightning Web 组件从“Lightning 组件”列表的“自定义”区域拖动到“页面画布”的顶部。contactList
  5. 点击保存。
  6. 单击“激活”。
  7. 单击 Assign as Org Default（分配为组织默认值）。
  8. 点击保存。
  9. 再次单击“保存”，然后单击“后退”箭头返回页面。
  10. 刷新页面以查看新组件。

测试 Lightning Web 组件

内容

  • 探索您的 LWC 测试
  • 为 Jest 测试添加调试配置
  • 在文件内运行、调试或观看 Jest 测试

安装 sfdx-lwc-jest，以便准备好 Lightning Web 组件的 Jest 测试运行程序。

探索您的 LWC 测试

LWC 测试边栏提供了一个中心位置，供你对你编写的代码运行测试。可以运行一个测试用例、一个文件中的测试用例或所有测试。您还可以查看上次测试运行的结果，并直接从测试导航到相应的代码行。要访问测试侧边栏，请单击视图栏中的烧杯图标（悬停文本：测试）。如果未看到此图标，请确保在 VS Code 中打开的项目在其根目录中包含 sfdx-project.json 文件。

若要运行选定的测试，请将鼠标悬停在测试用例或文件的名称上，以显示 LWC 测试视图中的播放图标。单击播放图标（悬停文本：SFDX：运行 Lightning Web 组件测试用例，SFDX：运行 Lightning Web 组件测试文件）以运行测试用例或文件中的所有测试用例。要运行视图中的所有测试，请单击 LWC 测试视图顶部较大的播放图标（悬停文本：SFDX：运行所有 Lightning Web 组件测试）。

测试结果记录如下：绿色表示通过测试，红色表示测试失败，橙色表示跳过测试。

若要跳转到测试文件或测试用例，请点按边栏中的测试名称。

要清除测试结果，请单击边栏顶部的刷新图标（悬停文本：SFDX：刷新 Lightning Web 组件测试资源管理器）。

为 Jest 测试添加调试配置

添加 Jest Tests 调试配置以自动更新 。作为先决条件，必须安装 node.js 和 npm。launch.json

注意：如果您从空项目开始，请先安装 sfdx-lwc-jest，然后使用所述步骤添加测试配置。

要快速将 Jest Tests 配置添加到您的标准项目中：

  1. 转到活动栏中的“运行和调试”。
  2. 从下拉列表中选择“添加配置”。
  3. 选择 Debug： LWC Jest Tests。
  4. 保存更新后的 .launch.json
  5. 从“运行”视图的“配置”下拉列表中选择“调试：LWC Jest 测试”配置，然后开始调试。

在文件内运行、调试或观看 Jest 测试

你可以在文件中的上下文操作中运行或调试 Jest 单元测试，也可以通过单击编辑器窗口右上角菜单栏中的按钮来运行或调试 Jest 单元测试。在“终端”面板中查看测试结果。

运行 Jest 测试

要运行单个 Jest 测试用例，请导航到该文件，然后单击 Jest 测试用例定义上方的 Run Test。.test.js

要运行 Jest 测试文件中的所有测试用例，请单击编辑器窗口右上角菜单栏上的播放图标。

调试 Jest 测试

要调试单个 Jest 测试用例，请导航到该文件，然后单击 Jest 测试用例定义上方的 Debug Test。.test.js

要调试 Jest 测试文件中的所有测试用例，请单击编辑器窗口右上角菜单栏上的调试图标。

将启动 VS Code 的内置调试器，以便在 VS Code 中调试测试。您可以设置断点，通过调试操作控制调试会话，或使用调试控制台来计算表达式。

观看 Jest 测试

要观看 Jest 测试文件，请单击编辑器窗口右上角菜单栏上的眼睛图标。切换图标以停止观看。在观看 Jest 测试文件时，如果您编辑 Jest 测试文件或 Jest 测试文件正在测试的 LWC JavaScript 文件，则测试文件将重新运行。

Linting

内容

  • 先决条件
  • 安装
  • 配置 Linting 规则
  • 添加其他脚本
  • 另见

Linting 在编辑时提供有关格式错误的代码的错误。 VS Code 强制执行 Salesforce 的 ESLint 规则。

先决条件

使用 SSL 支持构建的 Node.js 的活动 LTS 版本。

安装

对于新项目

如果使用该命令创建 SFDX 项目，则您的项目将包含一个已包含 ESLint 插件的文件。sfdx force:project:createpackage.json

  1. 要安装 ESLint 插件和其他依赖项，请在项目目录中运行。npm install
  2. 配置 ESLint 插件规则（可选）。
  3. 若要运行 linting，项目中必须有组件。要开始 linting，请运行 。npm run lint:lwc

对于现有项目

  1. 验证您的项目是否具有这些配置。如果您没有配置，请运行 .package.jsonpackage.jsonnpm install eslint @salesforce/eslint-config-lwc --save-dev "scripts": { "lint": "npm run lint:lwc", "lint:lwc": "eslint force-app/main/default/lwc" } "devDependencies" { "@salesforce/eslint-config-lwc": "3.4.0", "eslint": "^5.16.0" }
  2. 如果项目没有 package.json 文件，请复制该文件并将其添加到项目目录。
  3. 验证您的项目是否具有此 .eslintignore 文件。此文件指定哪些文件不进行 lint 检查。如果您的项目没有它，请将其添加到您的项目目录中。
  4. 验证您的项目是否具有此 .eslintrc.json 文件。此文件指定 linting 配置级别。如果您的项目没有它，请将其添加到您的项目目录中。
  5. 要安装 ESLint 插件和其他依赖项，请在项目目录上运行。npm install
  6. 若要运行 linting，项目中必须有组件。要开始 linting，请运行 。npm run lint:lwc

配置 Linting 规则

ESLint 包括三个配置级别。缺省级别为 。@salesforce/eslint-config-lwc/recommended

要更改配置级别，请在.eslintrc.json

{
 "extends": ["@salesforce/eslint-config-lwc/recommended"]
}
  • @salesforce/eslint-config-lwc/base此配置可防止 Lightning Web 组件的常见陷阱，并强制实施其他 Salesforce 平台限制。
  • @salesforce/eslint-config-lwc/recommended此配置可防止常见的 Javascript 陷阱，并强制执行所有最佳实践。
  • @salesforce/eslint-config-lwc/extended此配置限制了某些 Javascript 语言功能的使用，这些功能在较旧的浏览器（如 IE11）中有时速度较慢。为了在较旧的浏览器上支持新的 Javascript 语法和语言功能，Lightning Web 组件编译器转换了 Lightning Web 组件模块。

有关 linting 规则和单独使用它们的更多详细信息，请参阅 ESLint 插件 Github 存储库。

添加其他脚本

该部分包括一些已预先配置为运行 ESLint 的脚本。若要添加自己的，请参阅 npm 文档。"scripts"package.json