在WebStorm中更改代码自动完成

Question

WebStorm为React.js提供了特定的JSX代码自动完成功能。它是这样的：

div. + Tab => <div className=""></div>

但我使用的是SCSS，因此我需要将自动填充功能从className更改为styleName：

div. + Tab => <div styleName=""></div>

Answer 1

您可以通过创建Jetbrains所谓的“实时模板”来覆盖此默认行为（此功能也存在于其他Jetbrains产品中）。

首先导航到Webstorm首选项。在左侧，您将看到一个树形结构，显示按类别列出的首选项。展开“编辑器”以查找“实时模板”。

选择动态模板后，右侧会显示一个树形结构，显示当前启用的动态模板。 在这张桌子的最右侧，你会找到一个小+按钮，可以让你创建自己的实时模板。

选择+ - ＆gt;后您需要填写底部的缩写，说明和模板文本的实时模板 缩写是您键入以激活此模板的字符。在这种情况下，请输入 div 。 描述字段可以是您要描述此模板的任何内容，它没有任何功能影响 模板文本部分是替换文本。在这种情况下，我会使用

＆lt; div styleName =“$ END $”＆gt;＆lt; / div＆gt;

请注意，$ END $是一个变量，可在激活实时模板后将光标置于该位置。

最后，您需要指定实时模板应该使用哪些文件类型。请注意页面底部的短语“没有应用程序上下文。定义”。单击 Define 一词，在出现的弹出菜单中展开Javascript以找到JSX HTML的选项并进行检查。如果您希望实时模板在其他情况下工作，请随意选择其他文件类型。