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旁边的复选框。

要使用Lightning Explorer，请单击屏幕左侧的闪电图标。单击名称空间以查看所有可用组件。闪电Web组件和Aura具有不同的闪电图标。

在c名称空间下，我们选择了Lightning Web组件c-wire-get-object-info。当您单击组件的名称时，其对应的文件将显示在主代码面板中。

这是Aura组件force:inputField。组件名称右侧的蓝色图标将浏览器打开到“组件库”中的组件引用。

您的自定义Aura组件和文档也可在Aura组件扩展中找到。要了解有关为Aura组件编写文档的更多信息，请参阅《Lightning Aura组件开发人员指南》。

---

✍作者

• 更多参考精彩博文请看这里：陈永佳的博客

• 喜欢博主的小伙伴可以加个关注、点个赞哦，持续更新嘿嘿！

---

🎉致谢

• 在这里还要感谢默默支持我的小粉丝👸【三旬@理想】，后面还要继续努力请多多支持哦！