VS Code中Vite JavaScript模板下Chakra UI智能提示失效求助

Chakra UI的智能提示在JS项目里不像TS项目那样开箱即用，需要手动配置类型支持和VS Code的JS检查，以下是经过验证的解决步骤：

方法一：通过类型定义和JS配置开启提示 #

1. 安装React的类型定义依赖（虽然是JS项目，但类型文件能帮助VS Code识别组件结构）

npm install @types/react @types/react-dom --save-dev

2. 在项目根目录创建jsconfig.json，配置项目的类型检查范围：

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ES2020",
    "jsx": "react-jsx",
    "strict": false,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

3. 开启VS Code的JavaScript类型检查：

• 打开VS Code设置（快捷键Ctrl+,）
• 搜索「javascript implicit check js」
• 勾选「Enable type checking in JavaScript files」选项

4. 重启VS Code（快捷键Ctrl+Shift+P，选择「Reload Window」），之后输入Chakra组件或在导入语句里按Ctrl+Space就能看到提示了。

方法二：配合自动导入插件增强体验 #

如果希望不用手动导入就能获得组件提示，可以用unplugin-auto-import实现自动导入：

1. 安装插件依赖

npm install unplugin-auto-import --save-dev

2. 修改vite.config.js，添加自动导入配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    react(),
    AutoImport({
      imports: [
        'react',
        {
          '@chakra-ui/react': [
            'ChakraProvider',
            'Box',
            'Button'
            // 按需添加你常用的组件，不需要全部列出来
          ]
        }
      ],
      dts: true, // 生成类型定义文件，进一步提升提示精度
      eslintrc: {
        enabled: false // 不需要ESLint配置的话可以保持关闭
      }
    })
  ]
})

配置完成后重启VS Code，不仅能获得组件提示，还能自动导入用到的Chakra组件，不用手动写import语句。

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