如何为WebStorm Live Templates配置自动导入useState的功能

我有一个名为useS的Live Template，代码内容如下：

const [$VAR1$, set$VAR2$] = useState($END$);

其中useState需要从React导入，导入语句为：

import { useState } from "react";

希望每次使用该模板时，能自动在当前文件顶部添加这条导入语句，但直接把导入语句加入模板会导致插入到函数内部，以下是对应的配置方案：

JetBrains系列IDE（WebStorm/IntelliJ IDEA等）配置步骤 #

• 打开IDE设置（快捷键：Windows/Linux用Ctrl+Alt+S，Mac用Cmd+,），定位到Editor > Live Templates
• 在左侧列表找到useS模板所在的分组（比如自定义分组或React分组），选中该模板
• 在模板编辑区的Options板块，勾选「Add import statement」选项
• 点击选项旁的「Edit」按钮，在弹出窗口中配置导入信息：
  • 导入符号填写useState
  • 导入路径填写"react"
• 保存设置后，下次使用useS模板时，IDE会自动检测当前文件是否已导入useState，未导入则自动在文件顶部添加正确的导入语句，不会将导入插入到函数内部

VSCode配置方案 #

如果是在VSCode中使用代码片段，可通过以下方式实现自动导入：

• 打开设置（快捷键Ctrl+,），搜索「Auto Import」，勾选JavaScript > Suggest: Auto Imports和TypeScript > Suggest: Auto Imports
• 开启后，使用useS代码片段时，VSCode会自动提示添加useState的导入语句，或在保存文件时自动补全缺失的导入

内容的提问来源于stack exchange，提问作者henk