VS Code中Organize Imports误删Preact的h导入如何解决？

这个问题我之前也踩过坑！核心原因很直白：VS Code的Organize Imports只会识别源码里显式出现的变量引用，但Preact的JSX代码会在编译阶段偷偷转换成h()函数调用——这个引用是隐式生成的，工具根本看不到，所以它会误以为h没被使用，直接给你删掉了。

下面给你两个靠谱的解决办法，按推荐程度排序：

方法1：启用Preact自动JSX导入（推荐） #

这是Preact官方现在主推的方案，直接让编译器自动处理h的导入，你甚至都不用手动写import { h }了，从根源上解决问题。

只需要在项目根目录的tsconfig.json（纯JS项目用jsconfig.json）里添加如下配置：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  }
}

配置完成后，你的代码可以直接写成这样，完全不用管h的导入：

import { render } from "preact";
render(<p>Hello World!</p>, document.querySelector("#root"));

编译器会自动帮你注入需要的JSX相关函数，Organize Imports也不会再乱删东西了。

方法2：手动标记h为已使用（适合旧项目） #

如果你暂时不想切换到自动导入模式，可以用小技巧让工具知道h是被用到的：

方式A：显式引用（简单粗暴） #

在代码里加一行无意义的引用，让工具误以为h被实际使用了：

import { render, h } from "preact";
// 让工具识别到h的引用
h;
render(<p>Hello World!</p>, document.querySelector("#root"));

方式B：用注释禁用规则（更优雅） #

如果项目用了ESLint，可以在导入行加注释忽略未使用导入的检查规则：

import { render, h } from "preact"; // eslint-disable-next-line unused-imports/no-unused-imports
render(<p>Hello World!</p>, document.querySelector("#root"));

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