phpstorm - 更改 WebStorm 中的代码自动完成功能

Question

WebStorm 具有针对 React.js 的特定 JSX 代码自动完成功能。事情是这样的:

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

但我使用的是 SCSS，因此我需要将自动完成从 className 更改为 styleName:

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

Answer 1

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

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

选择实时模板后，您将在右侧看到一个树结构，其中显示当前启用的实时模板。在此表格的最右侧，您会发现一个小 + 按钮，可让您创建自己的实时模板。

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

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

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