Salesforce（0）：使用VsCode使用Aura组件并展示组件扩展

📖目录

摘要
代码补全
悬停查看组件文件
Linting
代码导航
大纲视图
Lightning Explorer（闪电浏览器–测试版）
作者
致谢

🌂摘要

今天博主将给大家分享–Salesforce（0）：使用VsCode使用Aura组件并展示组件扩展。欢迎关注收藏！

⛳代码补全

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

Tag–标签

注意：如果您的工作区中有任何Lightning Web组件，这些组件也将出现在建议完成的列表中。Lightning Web Component建议将以正确的Aura语法显示。

属性

😊悬停查看组件文件

将鼠标悬停在组件名称或属性上会在编辑器中显示组件文档，以及指向组件库的链接。您可以查看Aura组件和嵌套在Aura组件中的Lightning Web组件的参考文档。

这是该lightning:card组件的参考文档。

❤Linting

在您编辑时，Linting提供有关格式错误或可疑代码的错误。VS Code强制执行Salesforce的ESLint规则。要激活ESLint，请从命令行安装它。传送门：SalesForce系列

注意：当您在CSS style标签中包含模板代码时，lint会引发错误。例如，此代码示例将引发error <div style="{# 'background-image:url(' + v.url+ ')'}"> ... </div>。linter尝试将模板代码验证为CSS。这是Aura LSP中的一个已知问题，您可以忽略该错误。

🚀代码导航

VS Code提供了快捷方式，可以预览或跳转到代码中的定义，而不会丢失当前正在使用的代码。在VS Code文档的“代码导航”部分中了解更多信息。

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

这是AuraPubSubAura pubsub组件中引用的Lightning Web组件定义的预览。

要查看定义，请右键单击该项目，然后选择“ Peek Definition”，或按Alt + F12。

要跳至定义的位置，请右键单击该项目，然后选择“ Go to Definition”，或按F12键。

👌大纲视图

轮廓视图使您可以查看组件的轮廓，即其HTML标记和JavaScript属性。在Windows和Linux上使用Ctrl + Shift + O，在Mac上使用Cmd + Shift + O调用它。

🌂Lightning Explorer（闪电浏览器–测试版）

通过Lightning Explorer，您可以查看Aura组件和Lightning Web组件的参考文档。要启用它，请转到Preferences > Settings。lightning explorer在搜索栏中输入。然后，单击salesforcedx-vscode-lightning：Show Lightning Explorer旁边的复选框。