📖目录
🌂摘要
今天博主将给大家分享–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组件开发人员指南》。
✍作者
-
更多参考精彩博文请看这里:陈永佳的博客
-
喜欢博主的小伙伴可以加个关注、点个赞哦,持续更新嘿嘿!
🎉致谢
- 在这里还要感谢默默支持我的小粉丝👸【三旬@理想】,后面还要继续努力请多多支持哦!