如何让JSDoc识别Vite别名？（React17+Vite5+VSCode环境）

Vite的别名配置仅作用于构建过程，VS Code的JSDoc/智能提示服务无法直接读取Vite配置，因此需要额外配置项目的路径映射文件，让编辑器识别别名对应的实际路径。

配置步骤： #

1. 创建路径映射配置文件
   在项目根目录新建jsconfig.json（JavaScript项目）或tsconfig.json（TypeScript项目），添加以下配置：

   {
     "compilerOptions": {
       "baseUrl": ".",
       "paths": {
         "components/*": ["src/components/*"]
       }
     },
     "include": ["src/**/*"]
   }
   

   这里的paths要和你Vite配置中的别名完全对应，通配符*用于匹配所有子路径。

2. 重启VS Code语言服务
   保存配置文件后，按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入Reload Window重启编辑器窗口，让配置生效。

3. 验证效果
   重新使用别名导入组件，比如import Button from 'components/general/Buttons/Button'，此时JSDoc弹窗应该能正常显示组件的注释、类型等信息。

注意事项： #

• 确保Vite的别名配置和jsconfig.json/tsconfig.json中的路径映射保持一致，避免出现路径不匹配的问题。
• 如果使用TypeScript，确保tsconfig.json的include字段包含了所有需要识别的源码文件。

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