配置:设置/首选项 | 编辑 | 一般 | 代码完成

要自动完成,请启用“键入时显示建议”选项

基本完成:Ctrl+Space

代码完成是 WebStorm 编辑器的基本功能之一。为了向您显示完成建议,WebStorm 使用源代码检查项目文件,并将其中定义的类、方法、函数和变量添加到特殊的内部索引中。来自JSDoc注释、TypeScript 类型定义等的附加信息也可以显着提高完成度。

本节介绍了各种上下文感知代码完成技术,可让您加快编码过程。

1.gif

基本完成

基本代码完成可帮助您完成可见范围内的类、方法、字段和关键字的名称。当您调用代码完成时,WebStorm 会分析上下文并建议可从当前插入符号位置访问的选项(建议还包括实时模板)。

调用基本完成

  1. 开始输入名称。默认情况下,WebStorm 会在您键入时自动显示代码完成弹出窗口。

2.png

如果禁用自动完成,请按Ctrl+Space或选择代码 | 代码完成 | 主菜单中的基本。

  1. 要获得更多建议,Ctrl+Space请第二次按(或按Ctrl+Alt+Space)。
  2. 要缩小建议列表的范围,请键入预期名称或关键字的任何部分(甚至接受中间某处的字符)或在点分隔符后调用代码完成。WebStorm 显示在任何位置包含输入字符的建议。

3.png

对于CamelCasesnake_case名称,WebStorm 仅自动识别和匹配首字母。

接受列表中的建议

  • 按Enter或双击相关列表项以将其插入到插入符号的左侧。
  • 按Tab替换插入符号右侧的字符。
  • 用于Ctrl+Shift+Enter使当前代码结构在语法上正确(平衡括号、添加缺少的大括号和分号,等等)。
  • 使用特定语言和上下文相关的键来插入选定的补全建议。

查看所选建议的参考

  • 要快速查找文档,请在建议列表中选择一个项目,然后按Ctrl+Q。WebStorm 在文档弹出窗口中向您显示它的快速文档。

4.png

  • 要在具有更多控件的工具窗口中查看文档,请固定文档弹出窗口。要在文档弹出窗口和文档工具窗口之间切换,请按Ctrl+Q顺序按。
  • 要查看所选建议的定义,请按Ctrl+Shift+I。

5.png

查看代码层次结构

在建议列表中选择一个条目,然后按以下快捷键之一:

  • Ctrl+H查看类型层次结构
  • Ctrl+Alt+H查看视图调用层次结构。
  • Ctrl+Shift+H查看方法层次结构。

对新变量和参数名称的建议

除了完成对现有符号的调用外,WebStorm 还可以在声明期间为新变量和参数建议名称。这些建议基于在您的项目、您正在使用的库和标准 API 中定义的类、类型和接口的名称。

默认情况下,此功能处于关闭状态。要打开它,请转到编辑器 | 一般 | IDE 设置的代码完成页面并在JavaScript部分中Ctrl+Alt+S选择建议变量和参数名称。

6.gif

从 JavaScript 中的 TypeScript 语言服务完成

您可以使用来自TypeScript 语言服务的建议来增强 JavaScript 文件中的基本代码完成。从验证 TypeScript中了解更多信息。

  1. 打开jsconfig.json或tsconfig.json文件并添加'allowJS' : true到其中。
  2. 按Ctrl+Alt+S打开 IDE 设置并选择Languages & Frameworks | 打字稿。
  3. 在打开的TypeScript 页面上,确保选中TypeScript Language Service复选框。

语句完成

您可以使用语句完成创建语法正确的代码结构Ctrl+Shift+Enter。它插入必要的语法元素(圆括号、大括号和分号)并让您处于可以开始输入下一条语句的位置。

7.gif

完整的方法声明

  • 开始输入方法或函数声明,然后按Ctrl+Shift+Enter。WebStorm 创建一个方法的完整构造,并将光标放在方法主体内。

8.gif

  • 或者Ctrl+Shift+Enter在左括号之后按稍后。

完整的代码结构

  • 开始键入代码结构,例如,键入if,然后按Ctrl+Shift+Enter。WebStorm 会自动添加所需的标点符号并将光标置于下一个编辑点。

9.gif

嬉皮完成

Hippie 补全是一个补全引擎,可以在可见范围内分析您的文本并根据当前上下文生成建议。它可以帮助您完成任何当前打开的文件中的任何单词。

将插入符号处的字符串扩展为现有单词

  1. 键入初始字符串并执行以下操作之一:

    • 按Alt+/或选择代码 | 代码完成 | 循环展开单词以在插入符号之前搜索匹配的单词。
    • 按Alt+Shift+/或选择代码 | 代码完成 | 循环展开单词(向后)以在插入符号之后和其他打开的文件中搜索匹配的单词。

出现第一个建议值,并且原型在源代码中突出显示。

  1. 接受建议,或按住Alt键并按住/直到找到所需的单词。

10.gif

后缀代码完成

后缀代码完成可帮助您在编写代码时减少向后的插入符号跳转。您可以根据在点后键入的后缀、表达式的类型及其上下文,将已键入的表达式转换为不同的表达式。

WebStorm 附带一组预定义的后缀模板,允许您为 JavaScript 和 TypeScript 定义自己的自定义模板。

可以复制、更新和删除自定义模板。对于预定义模板,您只能更改它们的后缀,例如用较短的键替换长键。

JavaScript 模板也适用于 TypeScript 文件。

启用和配置后缀补全

  • 转到设置/首选项 | 编辑 | 一般 | 后缀补全并选中启用后缀补全复选框。
  • 选择Tab、Space或Enter用于扩展后缀模板。
  • 启用/禁用所选语言的特定后缀模板。

完成覆盖

在 JavaScript 和 TypeScript 中可以生成用于覆盖的方法体。

当您想要覆盖父类或接口中的方法并从完成建议列表中选择此方法时,WebStorm 会自动添加参数,生成super()调用,并在可能的情况下添加类型信息。

11.gif

关闭覆盖的方法体的生成

  1. 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到Languages & Frameworks | JavaScript。
  2. 在打开的JavaScript页面上,清除Expand method body in completion for overrides复选框。

完成标签、属性和属性

WebStorm 自动完成许多文件类型中标签和属性的名称和值:

  • HTML/XHTML,包括CSS 类和JSX 中的 HTML 标签的补全。

如果启用了 Emmet 支持,Emmet 模板也会在 HTML 和 XML 上下文中自动完成。

  • XML/XSL,包括命名空间的完成。
  • JSON,有关详细信息,请参阅编辑 package.json。

标记和属性名称的完成基于与文件关联的DTD 或模式。如果没有架构关联,WebStorm 将使用文件内容(标签和属性名称及其值)来完成您的输入。

  1. 按<并开始输入标签名称。WebStorm 显示适合当前上下文的标记名称列表。

使用Up和Down按钮滚动列表。

  1. 按下Enter以接受列表中的选择。如果您的文件与模式或 DTD 相关联,WebStorm 会根据它自动插入强制属性。

12.gif

机器学习辅助代码完成

WebStorm 允许您根据其他用户在类似情况下做出的选择来确定完成建议的优先级。

ML 完成机制不添加任何新元素,而是对从代码中检索到的元素进行排序。数据不会暴露在任何地方;它是在本地收集的。

启用 ML 完成

  1. 按Ctrl+Alt+S打开 IDE 设置并选择Editor | 一般 | 代码完成。
  2. 在Machine Learning-Assisted Completion下,启用基于机器学习对完成建议进行排序选项,然后选择要使用 ML 完成的语言。

13.png

启用相关性标记

  1. 按Ctrl+Alt+S打开 IDE 设置并选择Editor | 一般 | 代码完成。
  2. 启用以下选项:

    • 在完成弹出窗口中标记位置更改:使用机器学习排名上升机器学习排名下降图标指示建议的相关性是增加还是减少,因此建议在建议列表中向上或向下移动。
    • 在完成弹出窗口中标记最相关的项目:使用ML相关提案图标指示列表中最合适的建议。

14.png

配置代码完成行为

要自定义默认完成行为,请转到Editor | 一般 | IDE 设置Ctrl+Alt+S和更新默认完成设置的代码完成页面。要在 JavaScript 上下文中调整完成,请使用JavaScript 区域中的控件。

键入时自动显示建议列表

  1. 按Ctrl+Alt+S打开 IDE 设置并选择Editor | 一般 | 代码完成。
  2. 选中键入时显示建议复选框。如果清除该复选框,则必须通过按Ctrl+Space基本完成或Ctrl+Shift+Space类型匹配完成来显式调用代码完成。

当只有一个选项时,您还可以选择自动插入建议:在自动插入单个建议下选择完成类型。

默认情况下,“键入时显示建议”复选框处于选中状态。

按字母顺序显示建议

  • 按Ctrl+Alt+S打开 IDE 设置并选择Editor | 一般 | 代码完成。
  • 选中按字母顺序排列建议复选框。默认情况下,复选框被清除,建议按相关性排序。
  • 或者,使用建议列表右下角的 或 来切换这些模式按字母顺序排序按相关性排序请注意,仅包含几个条目的列表不会显示这些图标。

在列表中包含有关案例的建议

  • 选择匹配大小写复选框,然后选择是只匹配首字母还是所有字母的大小写。

打开自动文档查找

  1. 按Ctrl+Alt+S打开 IDE 设置并选择Editor | 一般 | 代码完成。
  2. 选中显示文档弹出框复选框。

使用特定键插入建议

  1. 按Ctrl+Alt+S打开 IDE 设置并选择Editor | 一般 | 代码完成。
  2. 通过按空格、点或其他与上下文相关的键选择插入所选建议复选框。这些键取决于调用完成的语言和上下文。
  • 选中此复选框后,无论设置/首选项 |中的完成时插入括号选项是否都会自动插入括号。编辑 | 一般 | 智能钥匙 | JavaScript是否被选中。
  • 虽然此设置可以帮助您节省时间,但打开它可能会导致意外插入项目。

基于机器学习对建议进行排序

  1. 按Ctrl+Alt+S打开 IDE 设置并选择Editor | 一般 | 代码完成。
  2. 默认情况下,JavaScript 和 TypeScript 文件中的补全建议根据机器学习算法按相关性排序。

要关闭基于 ML 的排序,请清除基于机器学习的排序完成建议复选框。

要仅在 JavaScript 或 TypeScript 中关闭基于 ML 的排序,请清除相应的复选框。

  1. WebStorm 可以根据相关性对建议进行排名,并显示特殊标记来指示此排名。

    • 最相关的建议标有星号最相关的提案图标。要显示此指示器,请选中在完成弹出框中标记最相关的项目复选框。
    • 机器学习排名上升和箭头图标指示建议的机器学习排名下降相关性是增加还是减少,因此建议在列表中向上或向下移动。

    要显示这些指示符,请选中在完成弹出复选框中标记位置更改。

显示的 ML 标记

15.png

ML 标记隐藏

16.png

为 JavaScript 配置完成

除了完成行为的常用设置外,您还可以在Editor |上配置一些 JavaScript 特定的选项。一般 | 设置/首选项对话框 ( Ctrl+Alt+S)的代码完成页面。

  • WebStorm 建议对符号进行补全,无论其类型如何。使用这种方法,在复杂的情况下,列表会显示多个完成变体。

要使补全更加精确,请选择Only type-based completion。完成列表将在很大程度上取决于 WebStorm 推理。因此,在推理不佳的情况下,列表可能会保持为空。

  • WebStorm 建议使用可选的链接运算符 (?) 完成符号。

要抑制此行为,请清除Suggest items with optional chaining for nullable types复选框。

  • 当您想要覆盖父类或接口中的方法并从完成建议列表中选择此方法时,WebStorm 会自动添加参数,生成super()调用,并在可能的情况下添加类型信息。

清除Expand method body in completion for overrides复选框以禁止在完成期间自动生成覆盖方法体。

  • 为名称配置完成:

    • 建议变量和参数名称:默认情况下,复选框被清除。当它被选中时,WebStorm 会在声明过程中建议新变量和参数的名称。这些建议基于在您的项目、您正在使用的库和标准 API 中定义的类、类型和接口的名称。
    • 为类字段建议名称

    该选项默认关闭。

    • 为建议的参数名称添加类型注释:选中此复选框可为每个完成建议提供有关其类型的信息。

    仅在选择建议变量和参数名称复选框时才可用。

  • 配置检查或接受建议时参数信息的显示方式。

    • 显示参数信息弹出窗口(以毫秒为单位):选中此复选框可让 WebStorm 在编辑器中键入左括号或从建议列表中选择方法时自动显示包含所有可用方法签名的弹出窗口。

    在右侧的文本字段中,指定弹出窗口出现后的延迟时间(以毫秒为单位)。

    如果未选中此复选框,请选择查看 | 主菜单中的参数信息。

    • Show full method signatures:如果选中此复选框,参数信息将显示完整的签名,包括方法名称和返回类型。

完成路径

这种类型的完成加快了文件和文件夹的选择。用于此目的的对话框经常被调用,例如,当您指定外部工具或版本控制引擎的安装文件夹或配置Node.js解释器时。

  1. 通过在“文件”菜单上选择“打开文件”或通过单击需要路径的字段旁边的“浏览”来打开“选择路径”对话框。
  2. 确保路径字段可见。如果该字段被隐藏,请单击显示路径链接。
  3. 开始输入路径。WebStorm 建议了一个列表,您可以在其中快速找到所需的目录。

在您键入时,建议列表会缩小以仅显示匹配的路径。

您也可以按Ctrl+Space显示建议列表。

  1. 从列表中选择相关建议。

17.gif

故障排除

如果代码完成不起作用,这可能是由于以下原因之一:

  • 省电模式已打开(文件|省电模式)。打开它可以消除后台操作,包括错误突出显示、动态检查和代码完成,从而最大限度地减少笔记本电脑的功耗。
  • 您的文件不驻留在内容根目录中,因此它没有获得代码完成所需的类定义和资源。
  • 带有要在代码完成中使用的符号的文件被标记为纯文本文件。
  • 包含要在代码完成中使用的符号的第三方文件未配置为外部 JavaScript 库。

标签: webstorm注册码, webstorm激活码, webstorm破解, webstorm破解教程, webstorm注册码2021, webstorm注册码失效, webstorm注册码永久, webstorm注册码2022, WebStorm, WebStorm教程, WebStorm基础教程, WebStorm入门教程, WebStorm高级教程, WebStorm核心教程, WebStorm破解插件, WebStorm注册码在线生成, WebStorm插件, WebStorm主题, Code completion, 代码自动完成, 代码提示