转到定义不适用于我的项目（vue 和 sass 文件）[visual-studio-code]答案

【问题标题】：Go to definition not working on my project (vue & sass file) [visual-studio-code]转到定义不适用于我的项目（vue 和 sass 文件）[visual-studio-code]
【发布时间】：2020-09-15 14:17:25
【问题描述】：

通过在 vscode 上开发 Nuxt 项目，我对两点感到失望。在 vscode 上，我的 jsconfig.js 是默认的：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}

它正在处理 vue 文件以自动完成以导入一些组件，例如（使用 ctrl+空格）但是无法使用 cmd+click 进行下一步定义。我不明白为什么，这真的很烦人。

我不能发布图片（需要 10 个声望），但这是我在 vue 文件上的导入（没有找到...的定义）

import PldFooter from '@/components/Footer';

另外一点，我在 assests 文件夹中使用 sass 文件。编译运行良好，但我无法通过 cmd+click 访问 node_modules 中的文件。这是一个导入示例：

@import "~bulma/sass/base/helpers.sass";

==> 没有找到 helpers.sass 的定义

感谢您的帮助，

本。

【问题讨论】：

标签： vue.js visual-studio-code import sass nuxt.js

【解决方案1】：

您是否在一个窗口中打开了多个文件夹（项目）？

我不确定你的问题是否和我一样。当我打开 multiples 文件夹（项目） 时，我在 Visual Studio Code 中遇到了“转到定义不起作用”的问题，我解决了。

我使用插件 Vetur 来支持 .vue 文件。有两种方法效果很好：

在一个窗口中只打开一个项目
您可以在一个窗口中打开多个项目，但您想要“转到定义”的项目运行良好，它必须是文件夹树中的第一个项目探索者标签。

插件 Vetur 似乎选择了多个项目中的第一个项目作为根文件夹。

我的文件tsconfig.json

{
  ...

  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
    }
  },
  "exclude": ["node_modules", "dist"]

  ...
}

参考： https://github.com/vuejs/vetur/issues/423#issuecomment-405415204

如果我的回答对您没有帮助，我深表歉意。

【讨论】：

谢谢，这个答案帮助了我。我的 jsconf 文件缺少 compilerOptions，一旦我添加它们，vscode 就能够识别导入和常量

【解决方案2】：

根据Vetur 设置指南：如果你使用Webpack's alias或者TypeScript's path mapping来解析组件，你需要更新Vetur的tsconfig.json或者jsconfig.json

例如：

└── src
    ├── components
    │   ├── a.vue
    │   └── b.vue
    ├── containers
    │   └── index.vue
    ├── index.js
    └── jsconfig.json

jsconfig.json：

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "components/*": [
                "src/components/*"
            ]
        }
    }
}

index.vue

import a from 'components/a.vue'
import b from 'components/b.vue'

它解决了我的问题。

【讨论】：