问题标签 [vetur]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
3545 浏览

typescript - Intellisense 不适用于 .vue 文件

我正在使用 Visual Studio Code 和 Vetur 扩展中的 Vue 和 Typescript。问题:当我更新任何代码时,智能感知在处理.vue文件时无法识别更改。在.ts文件中,智能感知正在工作!

我使用这个定义文件,以便打字稿识别.vue文件扩展名:

例子

test.ts 刚刚改变

app.vue 智能感知不工作

在任何.vue文件中,intellisense 不断提示 testFunction 并且无法识别 dummyFunction:

somefile.ts 智能感知正在工作

在常规的旧 .ts 文件中,智能感知有效。

如果我关闭 VS Code 并重新打开,则会更新新的更改。这是 Vetur 故障吗?我需要更改我的 tsconfig 或定义文件吗?

0 投票
0 回答
1123 浏览

typescript - 对 vue 文件的 Typescript 支持与 Vetur 插件冲突

官方 vue文档和 github建议您通过包含以下 sfc.d.ts 文件在 Typescript 中启用 .vue 文件扩展支持:

但这似乎与 Vetur 插件冲突。在我的.vue组件中,当我使用 sfc.d.ts 文件时,完全禁用了路径/文件检查导入!此外,.vue 文件中的更改不再反映在自动完成中。

索引.ts

应用程序.vue

这是 Vetur 的故障吗?如何在打字稿中启用 .vue 文件类型而不会弄乱单文件组件代码完成?

0 投票
2 回答
108 浏览

vue.js - Vue 变异型智能感知 VS Code

有没有办法让智能感知适用于使用 Vue 和 VS Code 导入的突变类型。我安装了 Vetur 扩展,并且正在使用命名突变。

我想要一个文件——mutation-types.js

然后每当我导入:

我想对mutationTypes对象进行智能感知。

这有可能吗?

0 投票
1 回答
1611 浏览

vue.js - Visual Studio 代码:初始 VueJS 设置找不到模块“@/..”

如您所知@,它是一个占位符,/src如果我使用它,应用程序可以正确编译和运行。但我的 VSCode 认为该模块不存在并向我显示错误消息:

Visual Studio 代码:找不到模块

问题 1:如何教 VSCode 如何查找模块?

类似的情况如下:

IDE 中有两个错误(当应用程序编译和运行正常时):

1)!:带有红色下划线 ->预期表达式

在此处输入图像描述

2)带有string红色下划线 ->成员“字符串”隐含地具有“任何”类型。

在此处输入图像描述

但这些并不是真正的错误,这是正常的语法,VSCode 无法处理它。Vetur Extension (Vue Tooling for VSCode) 已经安装。

问题 2:我该如何处理 VSCode 中的 Vue + TypeScript?我必须考虑什么(全部)?

0 投票
2 回答
11017 浏览

vue.js - 如何在 vscode 中重新格式化 Vue.js 组件?

我使用 Visual Studio Code 编写 Vue.js 组件,需要重新格式化该组件的代码。

我没有找到任何内置插件,插件的第一选择是vue-buetify在安装后通知

扩展有很多bug,请不要使用,更好的选择是vetur

然后我通过安装它尝试了 Vetur,但我没有看到美化编辑器中当前代码的选项。Shift++Alt命令F 无效。_

如何真正美化(重新格式化)Vue 组件的代码?

0 投票
2 回答
3887 浏览

typescript - VS Code 中 Vuex Store 的 Intellisense

我正在使用在vi​​sual 中构建应用程序。我安装了扩展。我已经为我的大部分项目构建了一个定义文件来为我提供智能感知,但我一直无法弄清楚如何将我的存储添加到智能感知。我已经通读了定义文档,但我无法一起思考如何做到这一点。我的目标是能够在this.$store.. 目前,为 , 等提供智能感知stategetters但不为下一层提供智能感知(例如this.$store.state.TestVariable)。如何为我的商店获取智能感知?

合同管理商店

合约组件

合同线组件

0 投票
2 回答
3251 浏览

typescript - TypeScript、Vue 和实验性装饰器

我已经通过 Vue-CLI v3.0.0-beta.15 创建了一个 Vue 项目,现在,一切正常,我的意思是,当我npm run serve编译并运行良好但 TypeScript仅在编辑器内抛出以下错误消息!

我尝试过但没有用的东西:

  1. 我仔细检查了我的文件中的 Vue 默认情况下experimentalDecorators是否设置为 true 。tsconfig.json

  2. 我尝试jsconfig.json使用以下选项创建文件:

    /li>
  3. 我尝试在 VSCode 中更改以下选项"javascript.implicitProjectConfig.experimentalDecorators": true

现在,我正在使用带有 VSCode 的 Vetur 扩展,我已经在他们的 repo 上发布了一个问题,但是我没有使用 Visual Studio for Vue 的任何扩展,但是我得到了同样的错误,所以我不知道是什么触发了它但是我认为有些东西不会选择tsconfig.json文件。

以下是我为生成项目所采取的步骤:

  1. mkdir 实验 && cd $_
  2. npm 初始化
  3. npm 安装 -D@vue/cli
  4. ./node_modules/.bin/vue 创建仪表板
  5. 我使用了以下选项:

    • 检查项目所需的功能:Babel、TS、PWA、Router、Vuex、CSS Pre-processors、Linter、Unit、E2E
    • 使用类风格的组件语法?是的
    • 使用 Babel 和 TypeScript 来自动检测 polyfill?是的
    • 选择一个 CSS 预处理器(默认支持 PostCSS、Autoprefixer 和 CSS 模块):SCSS/SASS
    • 选择一个 linter/formatter 配置:TSLint
    • 选择其他 lint 功能:保存时使用 Lint
    • 选择一个单元测试解决方案:Mocha
    • 选择 E2E 测试解决方案:Cypress
    • 你更喜欢在哪里放置 Babel、PostCSS、ESLint 等的配置?在专用配置文件中
    • 将此保存为未来项目的预设?不
  6. 然后导航到dashboard/src/views/Home.vue

这就是它在Visual Studio中的样子:

在此处输入图像描述

这就是它在VSCode中的样子:

在此处输入图像描述

0 投票
1 回答
448 浏览

vue.js - 如何使 Vue CLI 和 Vetur(在 VS Code 中)生成带双引号的代码

我在我的 TypeScript 和 JavaScript 代码中使用双引号来表示字符串。

但是 Vue CLI 和插件 Vetur(用于 VS Code)生成的所有样板文件都使用单引号作为字符串。有没有办法配置它?

奖励:此外,我希望看到生成的代码没有分号……</p>

0 投票
0 回答
111 浏览

javascript - JSConfig Webpack Alias 适用于文件夹但不适用于文件

我目前使用 VueJS 以及 Vetur 和 VSCode 作为我的 IDE。在 VueJS 中,有一个 webpack 别名设置 '@' 重定向到 './src'。我已经用配置设置了一个 jsconfig.json 文件;

这适用于文件夹,但是它不会列出单个文件。例如,它将在智能感知中显示文件夹名称,如“组件”,但一旦进入组件文件夹,它就不会列出组件名称,如“组件.vue”。

我想知道是否有人知道为什么会这样,以及我的配置文件中是否有错误?

谢谢!

0 投票
2 回答
764 浏览

vue.js - .vue 文件的脚本部分由 Vetur 格式化,但没有使用 Prettier

设置:带有 Typescript 的新 vue-cli 3.0 项目,VSCode 中的 ESlint Active 插件:Vetur,Prettier

我检查了所有我能找到的设置并反复试验,但无法解决以下问题:

Prettier 格式化项目的.ts文件没有任何问题。在我的.vue文件中,Vetur 使用prettyhtml作为模板部分,它也可以正常工作。但是对于脚本 ( lang="ts") 部分,Vetur 根据一些我在任何地方都找不到的规则对其进行格式化 - 但绝对不是 Prettier/Prettier 配置。例如,我更改singleQuotes = truesemi = false在我的 Prettier 设置中对我的.ts文件运行良好,但在我的文件的脚本部分中,.vue它只会自动格式化为双引号和分号。

知道为什么 Vetur 不依赖 Prettier 作为.vue文件的脚本部分吗?此外,应用于该部分的设置在哪里(例如 singleQuotes true/false)?