Vue原型上自定义属性类型检查配置，提升vscode项目开发效率

1 体验效果

1.1 配置前

按住Ctrl键，用鼠标左键点击挂载在Vue原型上的自定义属性时，无法自动跳转到该属性定义的对应位置，只能通过全局搜索查找，效率低下。

1.2 配置后

按住Ctrl键，用鼠标左键点击挂载在Vue原型上的自定义属性时，可以非常方便地自动跳转到该属性定义的对应位置，开发效率大大提升。

2 项目开发环境配置

配置完成后，重启vscode才能生效

2.1 Vue原型上挂载自定义属性举例

// src/commom/index.js
import Request from "./request"
import Constant from "./constant"
import Utils from "./utils"
const common = {
  Request,
  Constant,
  Utils
}
export default function install (Vue, options) {
  Object.entries(common).forEach(([key, value]) => {
    Vue.prototype['$' + key] = value
  })
}

2.2 新增Vue自定义属性类型声明文件

// src/types/vue.d.ts
import Request from '@/common/request'
import Constant from '@/common/constant'
import Utils from '@/common/utils'
declare module 'vue/types/vue' {
  interface Vue {
    $Request: typeof Request;
    $Constant: typeof Constant;
    $Utils: typeof Utils;
  }
}
export { }

2.3 新增jsconfig.json文件

vscode检测javascript项目文件的配置，文件位置处于项目根目录下

{
  "compileroptions": {
    "moduleResolution": "node",
    "module": "commonjs",
    "target": "es6",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"],
  "include": ["src/**/*"]
}