CtrlShiftO或Shift Shift提示活动文本编辑器不提供符号信息。怎么办安装Vue Language Features (Volar)插件或者 安装Vue (Official)插件通过安装该插件才能通过赚到编辑器中的符号Vue Language Features 是为 Vue、Vitepress 和 petite-vue 构建的语言支持扩展。这是基于vue/reactivity按需计算一切实现原生 TypeScript 语言服务级别性能。[温馨提示]快速开始创建 vue维特斯娇小的vue3-eslint-stylelint-demoVolar ESLint stylelint huskyvolar-starter用于错误报告和实验功能测试用法Vue 2 的设置添加vue/runtime-dom此扩展需要vue/runtime-dom.Vue 3 和 Vue 2.7 具有内置的 JSX 类型。对于 Vue 版本 2.6.14您需要通过 install 添加 JSX 类型vue/runtime-dom// package.json { devDependencies: { vue/runtime-dom: latest } }消除Vue.extend不支持模板类型检查Vue.extend。您可以使用composer-api、vue-class-component或export default { ... }代替export default Vue.extend.以下是不同编写脚本块方式的兼容性表组件选项类型检查script插值类型检查template跨组件 props 类型检查export default { ... }与JS不支持不支持不支持export default { ... }与 TS不支持支持但已弃用支持但已弃用export default Vue.extend({ ... })与JS不支持不支持不支持export default Vue.extend({ ... })与 TS有限支持data类型但不支持props类型有限的不支持export default defineComponent({ ... })支持的支持的支持的类组件支持的通过附加代码支持 ( #21 )通过附加代码支持请注意您defineComponent甚至可以使用使用Options API.支持 Vue 2 模板Volar优先支持Vue 3。Vue 3和Vue 2模板有一些差异。您需要设置选项target以支持 Vue 2 模板。// tsconfig.json { compilerOptions: { // ... }, vueCompilerOptions: { target: 2.7, // target: 2, // For Vue version 2.6.14 } }删除.d.ts文件如果存在。对于Vue CLI生成的项目.d.ts包含文件。删除这些文件。rm src/shims-tsx.d.ts src/shims-vue.d.ts定义全局组件公关https: //github.com/vuejs/vue-next/pull/3399本地组件、内置组件、原生 HTML 元素无需配置即可进行类型检查。对于全局组件需要定义GlobalComponents接口例如// components.d.ts declare module vue { // Vue 2.7 // declare module vue/runtime-dom { // Vue 2.6.14 export interface GlobalComponents { RouterLink: typeof import(vue-router)[RouterLink] RouterView: typeof import(vue-router)[RouterView] } } export {}笔记维图尔您需要禁用 Vetur 以避免冲突。推荐使用 css / less / scss 作为style语言因为这些基于vscode-css-languageservice提供可靠的语言支持。如果使用 postcss / stylus / sass则需要安装额外的扩展以进行语法高亮。我试过了有效你也可以选择其他的。postcss语言-postcss。手写笔语言手写笔萨斯萨斯Volar 不包含 ESLint 和 Prettier但官方ESLint和Prettier扩展支持 Vue因此您可以根据需要自行安装这些扩展。如果使用 Vetur 的可自定义脚手架片段建议使用片段生成器转换为 VSCode 片段。如果您更喜欢无需自定义的现成片段VSCode Marketplace 上也有一些片段例如 Sarah Drasner 的Vue VSCode Snippets 。class如果 VSCode 给出如下错误slot这是因为您的项目中安装的软件包之一使用了它types/react这破坏了 Volar 的某些部分。请参阅以下解决方案JSX issues in template · vuejs/language-tools · Discussion #592 · GitHubJSX issues in template · vuejs/language-tools · Discussion #592 · GitHub递归组件由于 TS 限制Volar 无法开箱即用地对递归组件进行类型检查。但有一个解决方法您可以显式指定组件的 props如下所示Bar.vuetemplate Bar :awrong / /template script setup langts import { defineAsyncComponent, type DefineComponent } from vue interface Props { a: number } const Bar defineAsyncComponentDefineComponentProps( () import(./Bar.vue) as any ) definePropsProps() /script自定义文件扩展名语法突出显示和智能感知可以应用于除vue. 这需要在三个不同的地方进行配置才能获得全面支持。在 Volar 扩展的 VS Code 设置中添加您需要的任何其他扩展Additional Extensions。比如ext。在 tsconfig.json 文件中您需要确保 TypeScript 包含您的自定义扩展。如果您有一个包含值那么您也./src/*.vue想添加一个包含值。./src/*.extinclude: [ ./src/*.ts, ./src/*.vue, ./src/*.ext, ]最后您需要让 VS Code 识别您的新扩展并自动将其与 Vue 语言格式关联。为此您需要配置文件关联设置以映射*.ext到语言值vue。这可以在“文本编辑器”“文件”下或使用 键来完成files.associations。制作人员vscode-extension-samples显示了开发扩展所需的所有知识。Angular展示了 TS 服务器插件如何与语言服务配合使用。语法高亮是在vue-syntax-highlight 的基础上重写的。vscode-fenced-code-block-grammar-injection-example展示了如何将 vue 语法高亮注入到 markdown 中。开箱即用的格式化工作方式如果您想使用其他格式化程序请查看https://github.com/vuejs/language-tools-pluginsvscode-html-语言服务htmlvscode-css-语言服务css、less、scss、postcss哈巴狗美化: 哈巴狗打字稿js、ts、jsx、tsx【推荐】Vue代码格式化插件Vue 3 Support - All In One_你挚爱的强哥的博客-CSDN博客会将同一个节点里面的不同属性换行排列对齐这样看起来更加清晰尤其是一个节点绑定十几个属性、事件的时候这样的排列方式更有效、快捷进行修改、删除。https://blog.csdn.net/qq_37860634/article/details/133632844