Vue - 在工作区和独立中转到定义答案

【问题标题】：Vue - Go to Definition in workspace and standaloneVue - 在工作区和独立中转到定义
【发布时间】：2020-10-17 08:00:39
【问题描述】：

当我将我的 vue 项目（打字稿）添加到工作区时，我似乎无法让 Go to Definition (GTD) 在 vscode 中工作。但是，如果项目仅作为独立/文件夹打开，则 GTD 可以完美运行。 GTD 在使用类似 tsconfig 文件在工作区中对基于 typescript 的服务器端进行编程时可以完美运行。

已包含工作区文件和 tsconfig 文件。另外，Vue 项目是由 vue-cli v3 创建的。如果还有什么需要提供的，请告诉我。

一个例子是 .vue 文件中的这些导入：

import IProjectSlot from '@/interfaces/IProjectSlot';
import Container from '@/components/Container.vue';
import ProjectSlot from '@/components/ProjectSlot.vue';

当按下 CTRL + 单击时，它只会打开一个对话框，其中包含当前文件内的引用，并且不针对实现本身。

知道如何解开这个谜吗？

Workspace.code-workspace

{
    "settings": {
        "files.exclude": {
            "**/node_modules/": true,
        },
        "eslint.workingDirectories": [
            {
                "directory": "client-vue",
                "changeProcessCWD": true
            },
            {
                "directory": "server",
                "changeProcessCWD": true
            },
        ],
        "vetur.validation.script": false,
        "eslint.alwaysShowStatus": true,
        "eslint.codeActionsOnSave.mode": "all",
        "eslint.format.enable": true,
        "eslint.validate": [
            "javascript",
            "javascriptreact",
            "vue"
        ],
        "eslint.options": {
            "extensions": [
                ".ts",
                ".js",
                ".vue"
            ]
        },
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": false
        },
        "[vue]": {
            "editor.tabSize": 2,
            "editor.formatOnSave": false, // true = prettier not working completely
        },
        "[javascript]": {
            "editor.formatOnSave": false, // true = prettier not working completely
            "editor.tabSize": 2
        },
        "[typescript]": {
            "editor.formatOnSave": false, // true = prettier not working completely
            "editor.tabSize": 2
        },
    },
    "folders": [
        {
            "path": ".vscode"
        },
        {
            "path": "client-vue",
        },
        {
            "path": "database"
        },
        {
            "path": "server"
        }
    ],
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "strictPropertyInitialization": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "./src/*"
      ],
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

【问题讨论】：

标签： typescript vue.js visual-studio-code

【解决方案1】：

我在某处读到，如果 Vue 项目是工作区中要加载的第一个项目，然后 Vetur 的 Vue 插件会将其注册为根项目，从而解决问题。

移动时记得重新加载 vscode。

【讨论】：