VSCode(Vetur)不识别组件中的自定义Vue属性

VSCode是一款流行的开源代码编辑器，而Vetur是一个用于提供Vue.js开发支持的插件。在开发Vue.js项目时，有时候会遇到VSCode（通过Vetur插件）无法识别组件中的自定义Vue属性的问题。

自定义Vue属性是指在Vue组件中定义的非Vue内置属性。由于VSCode默认情况下只能识别Vue的内置属性，因此无法正确地提供代码补全、语法高亮等功能。

解决这个问题的方法是通过配置Vetur插件来告诉VSCode如何识别自定义Vue属性。具体步骤如下：

确保已安装了Vetur插件。可以在VSCode的扩展商店中搜索并安装Vetur插件。
在Vue项目的根目录下创建一个名为jsconfig.json的文件（如果已存在则跳过此步骤）。
在jsconfig.json文件中添加以下内容：

{
  "compilerOptions": {
    "types": ["vuetify"]
  }
}

上述配置中的vuetify是一个示例，表示你可以根据自己项目中使用的自定义Vue属性库进行配置。如果你没有使用任何自定义Vue属性库，则可以将types字段的值设置为空数组[]。

保存jsconfig.json文件。

通过以上配置，Vetur插件将能够正确地识别组件中的自定义Vue属性，并提供相应的代码补全和语法高亮功能。

对于Vue.js开发中的其他问题和技术，可以参考腾讯云的相关文档和产品：

Vue.js官方文档：https://cn.vuejs.org/
腾讯云云开发：https://cloud.tencent.com/product/tcb
腾讯云Serverless Framework：https://cloud.tencent.com/product/sls
腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
腾讯云COS：https://cloud.tencent.com/product/cos
腾讯云CDN：https://cloud.tencent.com/product/cdn
腾讯云API网关：https://cloud.tencent.com/product/apigateway
腾讯云容器服务：https://cloud.tencent.com/product/ccs
腾讯云数据库（MySQL、MongoDB等）：https://cloud.tencent.com/product/cdb
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/product/um

相关·内容

2022，VSCode 前端插件推荐

当你在开发页面时, 想点击别名路径导入的组件时（演示如下）配置说明下载后只需自定义配置一些自己常用的别名路径即可 // 文件名别名跳转 "alias-skip.mappings": {...查看作者、修改时间等等 open in browser 功能：在浏览器打开当前文件 Vue 开发推荐 vue-component 插件名：vue-component 功能：输入组件名称自动导入找到的组件...，自动导入路径和组件选中后自动输入组件名（包含必填属性）、import语句、components属性 Vetur 插件名：Vetur 开发 Vue 必备 Vue 3 Snippets 插件名：Vue...3 Snippets 基本必备：很多Vue的代码段，很方便开发 React 开发推荐 React Style Helper 插件名：React Style Helper 功能：在React中更快速地编写内联样式...CSS Initial Value 插件名：vscode-icons 功能：显示每个CSS属性的初始值，当光标停留在css属性时画板作图插件名：Draw.io Integration 功能：在VSCode

1.1K1 0

1.7K4 0

vscodewebstorm自定义vue模板

引导语在进行vue项目时，我们需要对编译器进一步配置来支持vue文件以及相关模板语法的高亮显示等。本文列出关于webstorm和vscode两种常用编译器的模板语法配置。 webstorm 1....自定义模板有时候我们新建vue文件时默认的模板不是我们想要的，这时可以自定义模板：还是在设置中，搜索框输入 fileandcodetemplate或者在设置中找到该选项也行，在右侧选择vue模板，...参考给出一份我自己的作为参考，可按自己常用规则优化修改。其中， ${COMPONENT_NAME}直接获取组件名。...安装Vetur 在应用市场中安装 Vetur 2. 使用此时，在vue项目中新建 .vue文件，然后输入 vue时，按 tab键则会出来一份默认的模板。...自定义模板打开文件=>首选项=>用户片段搜索关键词 vue 在候选列表中选择 vue.json 在打开的文件中自定义配置即可如果没有找到 vue.json，可以重启一下vscode试一下。

2.3K1 0

你的代码好看吗

} 上面只是一些基本的语言的格式化规范，prettier 每一个属性的配置都有详细的说明，大家可以根据自己的情况进行调整。...相信每个在vscode上编写vue的都会下载 Vetur 插件，它目前是 vscode 上面最好用的一款vue插件。现在要说的是，如何使用prettier格式化vue的代码。...你没法使用类似格式化html/css/js的方式来格式化vue格式的代码，像下面这样子的： { "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode.../xxx.js 当然，默认的配置规则是不符合我们的需求的，我们需要自定义配置规则。...也就是说，如果你在一个项目中有 .prettierrc 配置文件，然后你又在settings.json也配置了格式化规则，那么当你在vscode编辑器中对一个文件点击鼠标右键[格式化文档]的时候，格式化规则会以

1.3K2 0

Vue3中的组件：组件的定义、组件的属性和事件、组件的Slots和动态组件

7.2K1 0

前端-团队效率（二）代码规范

团队协作中最重要的一点就是代码规范开发规范文档为尺度 vscode编码格式为利刃(文章结尾分享本人使用的vscode配置) 插件（重要） Beautify css/sass/scss/less，Chinese...": "js-beautify-html", // #让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript..." // #vue组件中html代码格式化样式 } }, "explorer.confirmDelete": false, "fileheader.customMade"...": "js-beautify-html", // #让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript..." // #vue组件中html代码格式化样式 } }, "explorer.confirmDelete": false, "fileheader.customMade": {

1.3K3 0

一款超人气代码格式化工具prettier

false // 不让prettier使用tslint的代码格式进行校验 } 上面只是一些基本的语言的格式化规范，prettier 每一个属性的配置都有详细的说明，大家可以根据自己的情况进行调整。...相信每个在vscode上编写vue的都会下载 Vetur 插件，它目前是 vscode 上面最好用的一款vue插件。现在要说的是，如何使用prettier格式化vue的代码。...你没法使用类似格式化html/css/js的方式来格式化vue格式的代码，像下面这样子的： { "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode.../xxx.js 当然，默认的配置规则是不符合我们的需求的，我们需要自定义配置规则。...也配置了格式化规则，那么当你在vscode编辑器中对一个文件点击鼠标右键[格式化文档]的时候，格式化规则会以 .prettierrc 为准。

3.8K2 0

Vue.js学习笔记

taskkill /pid 2228 /F 使用v-for指令遍历组件时产生警告，提示需要在组件上增加一个key属性当使用v-for指令遍历组件时，需要在组件上添加一个key属性 <router-link...不能使用标签名作为组件名执行npm run build命令构建Vue.js项目后，在浏览器中打开生成的HTML文件，网站资源文件的路径错误进入项目目录下的config/index.js文件中的build...修改props属性中的值报错不能在组件中直接修改props属性中的值，可以通过引入一个中间变量修改prps中的值 export default { //获取从父组件中传递过来的数据 props...，就得到了： render: h => h(App); 使用ES6中的属性简写 new Vue({ router }); 是下面代码的简写形式 new Vue({ router: router.../mongodb/db.js'; 打印 Proxy 对象中的属性 console.log(JSON.parse("proxyData:", JSON.stringify(proxyData))); 子组件中更新数据后

7422 0

Vue:VSCode完美配置指南

前言上篇文章介绍了常用的IDE，这一篇介绍搭载完善插件的VSCode进行Vue开发。...Vue的组件有独立格式.vue，许多IDE都不能正确识别其中的三部分，经过调教后的VSCode就可以，下面来看看效果图效果图 ?...HTML部分.png 可以看见标签属性都得到正确的高亮，包括Vue的标签 ? scirpt部分.png 方法有高亮，同时又Vue 的代码补全 ?...style部分.png CSS预处理使用的是SCSS，同时也支持sass Stylus ? 目录部分.png vs-icon使得文档类型赏心悦目，一目了然 Vue相关插件 ?...插件部分.png VueHelper提供.vue格式支持，以及语法高亮和补全 ? vetur.png vetur提供预处理器语法支持 ?

7K8 0

【推荐】1408- 分享 6 个 Vue3 开发必备的 VSCode 插件

Volar 下载数 153 万+ 相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生，作为 Vue2 配套的 VSCode 插件，它的主要作用是对 Vue 单文件组件提供高亮...而随着 Vue3 正式版发布，Vue 团队官方推荐 Volar 插件来代替 Vetur 插件，不仅支持 Vue3 语言高亮、语法检测，还支持 TypeScript 和基于 vue-tsc 的类型检查功能...使用时需要注意：首先要禁用 Vetur 插件，避免冲突；推荐使用 css/less/scss 作为的语言，因为这些基于 vscode-css-language 服务提供了可靠的语言支持...Vue VSCode Snippets 下载数 152 万+ Vue VSCode Snippets 插件旨在为开发者提供最简单快速的生成 Vue 代码片段的方法，通过各种快捷键就可以在 .vue文件中快速生成各种代码片段...使用方式如下：右键组件标签，跳转到组件定义的文件：右键组件标签，弹窗显示组件定义的文件： 5.

2.6K1 0

vscode 前端最佳插件配置

: 任何 vue 后缀的文件会被认为是 html 文件，(查看编辑器右下角) 然后 vscode 会用 html 规则匹配 vue 文件做相应格式化，代码提示等。...任何 wxss 后缀的文件被认为是 css 文件，然后 vscode 会用 css 规则匹配 wxss 文件，对 css 的属性排序，rem 自动转换，格式化等 "files.associations...vetur 和prettier以及stylus是用于vue开发时的代码格式化, 代码提示....// 可选值： eslint ："dbaeumer.vscode-eslint" vetur: "octref.vetur" prettier: "esbenp.prettier-vscode...此时会提示自定义的缩写语句，以及各插件自定义的缩写语句.

5.4K2 0

vscode-前端插件

智能提示 css 的 class 名 require 时的包提示(node必备) Vetur (推荐)(vue必备) VueHelper Vue TypeScript Snippets Vue 2 Snippets...不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari...，使用者可以定义不同括号类型和不同颜色 Debugger for Chrome 映射vscode上的断点到chrome上，方便调试调试方式 ESLint js语法纠错，可以自定义配置，不过配置较为复杂...) Npm Intellisense Vetur (推荐)(vue必备) Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。...vscode官方钦定Vue插件，Vue开发者必备。

1.7K2 0

vscode-vue-debug

今天写个node+vue的vscode里对chrome进行debug 首先确保你的路径是项目根目录，懒得踩坑或者去对应配置我这里用vue-cli创建一个新的vue项目没有tyarn或者cnpm的话可以安装一个...路径如下我们运行一下 cnpm run serve # OR yarn serve 这里我编写代码时发现格式化老出问题，我不想让它换行我的标签属性，于是我修改了vscode的settings.json...组件中写代码： export default { name: "HelloWorld", props: { msg: String, }, created()...debug配置找不到了的话，在根目录的.vscode下面有个launch.json { // 使用 IntelliSense 了解相关属性。...://下的src目录，那么vue2可以按照上面修改package.json的依赖解决目前没有找出vue3的debug更好方案，留个坑在这，解决思路暂时为了解学习vscode的debugger对应再修改

6702 0

Vue 2.5中将迎来有关TypeScript的优化！

例如：TypeScript不能轻易地推断出Vue使用的默认基于对象的API中的 this类型。...为了使我们的Vue代码与TypeScript更好地协作，我们需要使用vue-class-component装饰器，它允许我们使用基于类的语法来写Vue组件。...在单文件组件中同样有效！基于组件的 props配置的 this的props的类型推断。更重要的是，这些改进也会使原生JavaScript用户受益！...，如果你正在使用VSCode且安装了优秀的Vetur扩展，在Vue组件中使用原生JavaScript时，你会获得十分完善的自动补全提示甚至是类型提示！...运行中的 VSCode + Vetur + 新类型声明感兴趣的话，就克隆这个体验项目（确保是 new-types分支）并使用VSCode + Vetur打开它来尝试一下吧。

1.2K2 0

VSCode

正文本文针对的开发工具是vscode, 配合vue-cli创建的项目，告诉你安装什么插件，每个插件的作用，每行配置代码的作用一、插件网上搜索vscode插件的文章，动辄十几个，其实根本用不了那么多...这里精简为主，每一个插件都发挥它最大的作用，并尽量说明它们的作用 Vetur 用vue开发的必装，官方推荐,别纠结用哪个，就它了。...，点击灯泡可以自动帮你修正代码格式： [图片上传失败…(image-6048ce-1528709488785)] 我们可以找到编辑器左上角，依次打开文件、首选项、设置，将i面配置加入到右边的用户设置中...这是由于vetur插件默认格式化vue文件里面的js代码使用的prettier,和我们的standard规范有冲突，你可以点击这里查看vetur插件格式化的默认配置既然知道了原因，我们可以覆盖它的默认配置...： "vetur.format.defaultFormatter.js": "vscode-typescript", 再试一次格式化，发现问题解决了，不过还是报错： [图片上传失败…(image-5562e8

1.5K5 0

VSCode代码格式化设置

VSCode代码格式化设置安装插件 ESLint、Prettier-code formatter、Vetur ?...文件中 template 的格式化工具 "vetur.format.defaultFormatter.html": "prettier", // 显示 markdown 中英文切换时产生的特殊字符...中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", // vetur 的自定义设置...false } }, // Ctrl + Shift + F 快捷键设置（依照vetur格式化代码） "[vue]": { "editor.defaultFormatter...": "prettier", //全语言格式化 Vetur对于html文件默认使用的是prettyhtml，但是由于prettier也可以支持html的格式化，所以我觉得统一使用prettier对全语言的格式化是比较简洁的

4.2K2 0

vscode下配置vue.js的插件

1、vetur 2、Vue 2 Snippets：主要加强vue的便捷写法 3、language-stylus 4、Auto Close Tag：自动闭合标签所用 5、Auto Rename Tag：自动修改重命名配对的标签...9、Path Intellisense：路径自动感知，在配置文件中配置@后我们就可以很方便快捷的引用各种文件了 10、Vue Peek：用于Vue快速查看组件定义以及组件跳转。...18、ESLint：规范代码格式的同时，在设置中要自己定义： // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false...": "js-beautify-html", // #让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript..." // #vue组件中html代码格式化样式 } } // 格式化stylus, 需安装Manta's Stylus Supremacy插件 // "stylusSupremacy.insertColons

3.2K2 0

VSCode支持Vue自动保存格式化的配置

安装插件安装三个插件：Prettier - Code formatter、ESLint、Vetur。对应的插件图片如下： ? ? ?...", "autoFix": true } ], // 格式化.vue中html "vetur.format.defaultFormatter.html": "js-beautify-html...", // 让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatterOptions...": { "js-beautify-html": { "wrap_attributes": "force-aligned" // 属性强制折行对齐 } }, "vetur.format.enable...默认的配置有冲突可能会出现问题，请确保根目录下的.vscode/settings.json文件和上面的文件并不冲突，可以把.vscode/settings.json设置为一个空JSON。

7.2K3 1

在 Vue 中使用 TypeScript 的一些思考（实践）

此种写法与 Vue 单文件组件标准形式最为接近，唯一不同仅是组件选项需要被包裹在 Vue.extend() 中。...mixins mixins 是一种分发 Vue 组件中可复用功能的一种方式。当在 TypeScript 中使用它时，我们希望得到有关于 mixins 的类型信息。...一些其它做为 Vue 中最正统的方法（与标准形式最为接近），Vue.extends() 有着自己的优势，在 VScode Vetur 插件辅助下，它能正确提示子组件上的 Props: ?...文件存在时，引用正确的文件定义。这让人很困惑，而这些都是 Vetur 的功劳。...在这个 PR 下，我找到相关解答：这个 PR 里，Vetur 提供解析其他 .vue 文件的功能，以便能获取正确的信息，当 .vue 文件不存在时，会读取 .d.ts 里的信息。

3.2K3 0

「vue基础」Vue相关构建工具和基础插件简介

工具中的 vue-loader webpack 插件，将标签内的HTML代码编译成JavaScript代码，和组件内的JavaScript代码一起打包到应用程序中。...Vue CLI Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。...安装 VSCode 插件大部分前端开发者想必都喜欢用微软的 VSCode 开发工具，目前针对Vue来说，使用最广泛的要数 Vetur VSCode扩展插件，安装也十分简单：启动VSCode，并选择扩展选项卡菜单...在搜索栏搜索“vetur” 从结果中选择由Pine Wu 开发的 Vetur 插件，点击安装即可。...小节今天的内容就和大家聊到这里，我们一起学习了为什么要使用构建工具，如何来安装构建工具以及相关的浏览器、编辑器插件，下一篇文章我将和大家聊聊如何编写自定义组件。

8273 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云