vue 项目拆分后如何快速查看变量声明位置（alt+左键）

编辑器：vscode + 插件 vetur

普通项目

vue 普通项目结构差不多这样：

–根目录
—-src
—-public
—-node_modules
—-各种配置

普通的 vue 项目只需要在根目录下新增 jsconfig.json 或者 tsconfig.json 即可。

jsconfig.json 常见配置：

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    },
    // 指定要使用的默认库（lib.d.ts）。
    "target": "ES6",
    "module": "es6",
    // 允许从没有默认导出的模块进行默认导入。 这不会影响代码发出，只会影响类型检查。
    "allowSyntheticDefaultImports": true,
    // 启用JavaScript文件的类型检查。
    // "checkJs": true,
  },
  "exclude": ["node_modules", "dist"]
}

有此配置之后，要查看变量定义位置，只需要 alt + 鼠标左键 即可快速定位，包括引入的外部变量都可这样使用。

快速回到上一次编辑位置小技巧：alt+键盘左右方向键

多项目

我的项目结构大概长这样：

–根目录
—-common // 公用函数、配置等
—-main // 主站目录
—-node_modules
—-topic // 专题活动目录
—-vue-plugins // 公用vue插件目录
—-各种配置

由于专题活动相对独立，并且活动图片较多，不适合放入主程序代码下，毕竟每次打包几十兆也不适合，所以独立了专题活动，抽出了公用插件。

项目由于都是基于 vue 开发，topic 和 main 都有普通 vue 项目的目录结构，下面都有路径别名 @ 和 root (根目录)。

如果这时候在根目录下新建 jsconfig.json，仅能指定路径别名 root 位置，无法针对 main 和 topic 指定不同的路径别名 @ 位置。

处理办法

vscode 插件 vetur 支持配置多项目，官方文档：https://vuejs.github.io/vetur/reference/#example

根目录新增 vetur.config.js

vetur.config.js

// https://vuejs.github.io/vetur/reference/#example
// vetur.config.js
/** @type {import('vls').VeturConfig} */
module.exports = {
  // support monorepos
  projects: [
    './main', // Shorthand for specifying only the project root location
    './topic'
  ]
}

main 和 topic 下同时新增 jsconfig.json，如下：

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "root/*": ["../*"],
    },
    // 指定要使用的默认库（lib.d.ts）。
    "target": "ES6",
    "module": "es6",
    // 允许从没有默认导出的模块进行默认导入。 这不会影响代码发出，只会影响类型检查。
    "allowSyntheticDefaultImports": true,
    // 启用JavaScript文件的类型检查。
    // "checkJs": true,
  },
  "exclude": ["node_modules", "dist"]
}

重启 vscode 即可愉快的使用 alt + 左键 了。

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2022-03-11/vue-var-pos/

如果您觉得文章不错，可以请我喝一杯咖啡！

赏