在vscode里编辑Hbuilder建立的项目代码

对于HbuilderX建立的工程（也用HbuilderX来运行和打包发布），因为习惯而使用 vscode 来编辑代码，然而在vscode里编辑的时候， import 里的 @ 路径不认识，因此要做一些配置使得工作方便点。

因为在Hbuilder里同时又用了js，又用了ts，所以要配置 tsconfig.json 和 jsconfig.json 文件。

注：不用配置 vite.config.ts 文件，因为我们是用 HBuilderX 来编译运行，而不是脱离HbuilderX

两个文件内容如下：

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"],
    },
    "types": [
      "vite/client",
      "vue",
    ]
  },
  "include": [".**/*.ts", ".**/*.d.ts", ".**/*.tsx", ".**/*.vue"],
  "exclude": ["node_modules", "dist"] // Indicates the file directory that does not need to be compiled
}

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"], // 将 "@/" 映射到项目根目录
    }
  },
  "exclude": ["node_modules", "dist"]
}

同时，为了解决不认识 vue 的问题，在根目录下加上一个 vue.d.ts 文件：

// vue.d.ts

declare module 'vue' {

        export * from '@vue/runtime-core'

}

如果加了后还不认识vue， 那在命令行安装以下：

pnpm install --save-dev @types/node @vue/runtime-core

这种情况下，vscode仍然不认识以下这种，但无伤大雅（想简单的配置别名或路径映射好像不行）。

import { onShow } from '@dcloudio/uni-app'