如何配置Three.js以在Vue3项目的.vue文件中实现代码自动补全

解决方案 #

• 第一步：安装Three.js类型声明包
  部分版本的Three.js内置类型无法被Vue官方插件直接识别，先显式安装类型包：

  npm install --save-dev @types/three
  

• 第二步：配置项目类型识别规则
  在项目根目录找到jsconfig.json（JavaScript项目）或tsconfig.json（TypeScript项目），修改compilerOptions和include配置：

  {
    "compilerOptions": {
      "types": ["three"],
      "allowJs": true
    },
    "include": ["src/**/*.vue", "src/**/*.js", "src/**/*.ts"]
  }
  

• 第三步：重启Vue服务和VSCode窗口
  确认你使用的VSCode Vue插件是官方的「Vue - Official」（原Volar，不要使用旧版Vetur），按下Ctrl+Shift+P（Mac系统按Cmd+Shift+P），依次执行以下两个命令：
  1. Vue: Restart Vue Server
  2. Developer: Reload Window

配置完成后在.vue文件的script标签中按如下方式导入Three.js即可触发自动补全：

import * as THREE from 'three'

不要将Three.js挂载到Vue全局属性上使用，该写法无法被类型推导，会失去自动补全能力。

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