[英]vscode+vetur: go to definition from .js files doesn't work
I have Vetur installed and a jsconfig.js
file in the root of my project.我在项目的根目录中安装了 Vetur 和一个
jsconfig.js
文件。 It is a javascript vue-cli 3 project.这是一个 javascript vue-cli 3 项目。
I do can go to definition from a .vue file to another .vue file.我确实可以从 .vue 文件到另一个 .vue 文件进行定义。
I do can go to definition from a .js file to another .js file.我确实可以从 .js 文件到另一个 .js 文件进行定义。
I do can go to definition from a .vue file to a .js file.我确实可以从 .vue 文件到 .js 文件进行定义。
But,但,
I cannot go to definition from a .js file to a .vue file.我无法从 .js 文件转到 .vue 文件的定义。 When I try to do so, vscode opens the 'go to references' widget.
当我尝试这样做时,vscode 会打开“转到参考”小部件。
Contents of my jsconfig.file
:我的
jsconfig.file
的内容:
{
// This file is required for VSCode to understand webpack aliases
"module": "es6",
"moduleResolution": "node",
"compilerOptions": {
"resolveJsonModule": true,
"jsx": "preserve",
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"allowSyntheticDefaultImports": true,
"baseUrl": ".",
// Relative to "baseUrl"
"paths": {
"@/*": ["./src/*"],
"mocks/*": ["./tests/unit/specs/__mocks__/*"],
"test-e2e/*": ["./tests/e2e/specs/*"],
"test-unit/*": ["./tests/unit/specs/*"]
}
},
"exclude": [
".git",
".app-cache",
".npm",
".npm-tmp",
"dist",
"dist*",
"node_modules",
"subfolder/dist",
"subfolder/node_modules",
"**/dist/*",
"**/node_modules/*"
]
}
I know there are a lot of issues related to this on GitHub, but all of them seem to be related to typescript projects or only referring to .vue
files.我知道 GitHub 上有很多与此相关的问题,但似乎都与 typescript 项目有关或仅涉及
.vue
文件。 I could not find any solution to this specific problem.我找不到任何解决这个特定问题的方法。
I tried to install the 'vue peek' extension, but nothing changed.我尝试安装“vue peek”扩展,但没有任何改变。
This is not an answer, but more information about the problem since I also have it and I don't know how to solve it.这不是答案,而是有关该问题的更多信息,因为我也有它,但我不知道如何解决它。
The problem seems to be that *.vue
files are handled by Vetur extension.问题似乎是
*.vue
文件由 Vetur 扩展处理。 Vetur extension is invoking typescript on the <script>
in a way that allows it to correctly resolve *.vue
file imports. Vetur 扩展在
<script>
上调用 typescript,以使其能够正确解析*.vue
文件导入。
However, *.js
files are handled by typescript directly and typescript have no idea what *.vue
is and it is trying to resolve it as if it were a filename without an extension by appending various default extensions: *.vue.ts
, *.vue.tsx
, *.vue.js
, etc. That's why it is not finding it.但是,
*.js
文件由 typescript 直接处理,并且 typescript 不知道*.vue
是什么,它试图通过附加各种默认扩展名来解析它,就好像它是一个没有扩展名的文件名: *.vue.ts
, *.vue.tsx
, *.vue.js
等。这就是它没有找到它的原因。
I ran npx typescript --traceResolution
on the code and in the output is the following:我在代码上运行了
npx typescript --traceResolution
,输出如下:
======== Resolving module './App.vue' from 'src/main.js'. ========
Module resolution kind is not specified, using 'NodeJs'.
Loading module as file / folder, candidate module location 'src/App.vue', target file type 'TypeScript'.
File 'src/App.vue.ts' does not exist.
File 'src/App.vue.tsx' does not exist.
File 'src/App.vue.d.ts' does not exist.
Directory 'src/App.vue' does not exist, skipping all lookups in it.
Loading module as file / folder, candidate module location 'src/App.vue', target file type 'JavaScript'.
File 'src/App.vue.js' does not exist.
File 'src/App.vue.jsx' does not exist.
Directory 'src/App.vue' does not exist, skipping all lookups in it.
======== Module name './App.vue' was not resolved. ========
这个 VSCode 扩展对我很有效,希望对我有帮助https://marketplace.visualstudio.com/items?itemName=zardoy.vetur-extended
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.