如何在VSCode中实现类Tailwind CSS IntelliSense的Chakra UI自动补全？

• 安装Chakra UI官方VSCode插件：在VSCode扩展商店搜索Chakra UI，找到官方发布的插件并安装。
• 配置项目的jsconfig.json或tsconfig.json：确保项目配置文件包含Chakra UI的类型提示，添加如下配置（已有则调整）：

  {
    "compilerOptions": {
      "jsx": "react-jsx",
      "types": ["@chakra-ui/react"]
    }
  }
  

• 重启VSCode：插件生效需重启编辑器，之后编写Chakra组件时，即可自动补全组件名称、props属性等基础内容。

要获得和Tailwind CSS IntelliSense一致的智能补全体验（实时提示样式值、自定义主题变量等），可通过以下步骤实现：

• 安装Chakra UI IntelliSense插件：在VSCode扩展商店搜索该插件并安装，它针对Chakra UI做了深度补全优化。
• 配置VSCode设置：打开settings.json（快捷键Ctrl+,后点击右上角打开JSON编辑器），添加如下配置启用智能补全：

  {
    "chakraUI.enable": true,
    "chakraUI.showDocumentation": true,
    "chakraUI.themePath": "./src/theme.ts" // 替换为你的自定义主题文件路径，无自定义主题可省略
  }
  

• 适配自定义主题：若项目有自定义Chakra主题，确保主题文件导出extend后的完整配置，插件会自动识别主题中的自定义颜色、字体、间距等变量，编写props时实时提示这些自定义值。
• 类名模式补全：如果项目使用className结合Chakra样式系统，插件同样能识别类名并提供补全，体验和Tailwind一致。

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