在 WebStorm 中更改代码自动完成
Changing code autocomplete in WebStorm
WebStorm 具有针对 React.js 的特定 JSX 代码自动完成功能。它是这样的：
div. + Tab => <div className=""></div>
但是我正在使用 SCSS，所以我需要将自动完成从 className 更改为 styleName:
div. + Tab => <div styleName=""></div>
您可以通过创建 Jetbrains 所称的 "Live Template" 来覆盖此默认行为（此功能也存在于其他 Jetbrains 产品中）。
首先导航到 Webstorm 首选项。在左侧，您会看到一个树结构，显示按类别列出的首选项。展开 "Editor" 找到 "Live Templates"。
select Live Templates 后，您会在右侧看到一个树结构，其中显示了当前启用的 Live Templates。
在此 table 的最右侧，您会找到一个小 + 按钮，您可以使用它创建自己的实时模板。
在 select + -> 实时模板之后，您需要在底部填写缩写、描述和模板文本。
缩写 是您输入以激活此模板的字符。在这种情况下，输入 div。
描述 字段可以是您想要描述此模板的任何内容，它没有功能影响。
Template 文本部分是替换文本。在这种情况下，我会使用
请注意，$END$ 是一个变量，可在激活实时模板后将光标置于该位置。
最后，您需要指定实时模板应针对哪些文件类型工作。请注意页面底部的短语 "No application contexts yet. Define"。单击单词 Define，在出现的弹出菜单中展开 Javascript 以找到 JSX HTML 的选项并选中它。如果您希望 Live Template 在其他情况下工作，请随意 select 其他文件类型。
WebStorm 具有针对 React.js 的特定 JSX 代码自动完成功能。它是这样的：
div. + Tab => <div className=""></div>
但是我正在使用 SCSS，所以我需要将自动完成从 className 更改为 styleName:
div. + Tab => <div styleName=""></div>
您可以通过创建 Jetbrains 所称的 "Live Template" 来覆盖此默认行为（此功能也存在于其他 Jetbrains 产品中）。
首先导航到 Webstorm 首选项。在左侧，您会看到一个树结构，显示按类别列出的首选项。展开 "Editor" 找到 "Live Templates"。
select Live Templates 后，您会在右侧看到一个树结构，其中显示了当前启用的 Live Templates。 在此 table 的最右侧，您会找到一个小 + 按钮，您可以使用它创建自己的实时模板。
在 select + -> 实时模板之后，您需要在底部填写缩写、描述和模板文本。
缩写 是您输入以激活此模板的字符。在这种情况下，输入 div。
描述 字段可以是您想要描述此模板的任何内容，它没有功能影响。
Template 文本部分是替换文本。在这种情况下，我会使用
请注意，$END$ 是一个变量，可在激活实时模板后将光标置于该位置。
最后，您需要指定实时模板应针对哪些文件类型工作。请注意页面底部的短语 "No application contexts yet. Define"。单击单词 Define，在出现的弹出菜单中展开 Javascript 以找到 JSX HTML 的选项并选中它。如果您希望 Live Template 在其他情况下工作，请随意 select 其他文件类型。