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

Posted 2023-02-22

【中文标题】转到定义不适用于我的项目（vue 和 sass 文件）[visual-studio-code]

【英文标题】：Go to definition not working on my project (vue & sass file) [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 的定义

感谢您的帮助，

本。

【参考方案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' 

它解决了我的问题。