正文 

当前位置： 首页 > 源码 >

VSCode 和 Vue 2 插件 TypeScript 定义

     2023-02-22     112

关键词：

【中文标题】VSCode 和 Vue 2 插件 TypeScript 定义【英文标题】：VSCode and Vue 2 plugin TypeScript definitions 【发布时间】：2017-06-21 02:13:57 【问题描述】：

我正在使用 VSCode 和 TypeScript 类进行 Vue 2 组件开发。请参阅：vuejs/vue-class-component。

在我当前的项目中，我使用 vue-i18n 之类的插件来翻译标签等。这些插件使用自己的功能扩展了 Vue 组件，例如 this.$t(...) 以按键获得翻译，但 VSCode 不识别/不不关闭这些扩展（或者它们是 mixins？）等等。

我怎样才能知道这些扩展功能存在并且智能感知开始工作的 VSCode？我可以创建自己的 *.d.ts 文件吗？如果是这样，我怎样才能将它们连接起来，以便 VSCode 可以找到它们进行智能感知？欢迎任何例子。或链接到完成此操作的一些示例 Github 存储库？

【问题讨论】：

vue 有 .d.ts 文件，如果你正在寻找它们，你可以在这里找到它们。 npmjs.com/package/@types/vue 我的问题是关于为 Vue 2 插件创建/使用定义文件，这些插件将自定义函数添加到 Vue 类。我知道 Vue 本身有 *.d.ts 文件，但这些文件工作正常。 您可以根据需要扩展这些类型。 Typescript 接口是开放式的，如果您向它们添加更多方法，它们应该被编译器拾取。 我遇到了同样的问题，并决定尝试添加类型 vue-i18n 存储库。正在进行的工作分支位于github.com/aom/vue-i18n/tree/typescript-support 我还在 vue-i18n 存储库中打开了一个问题：github.com/kazupon/vue-i18n/issues/130 【参考方案1】：

此问题现已解决，并记录在 Vue TypeScript 文档中。它叫做"Augmenting Types for Use with Plugins"。

以下sn-p来自此页面以供快速参考：

// For example, to declare an instance property $myProperty with type string:

// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'

// 2. Specify a file with the types you want to augment
//    Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' 
  // 3. Declare augmentation for Vue
  interface Vue 
    $myProperty: string

【讨论】：

【参考方案2】：

vue-i18n 不提供自己的 TypeScript 类型。

相反，您可以使用DefinitelyTyped:

npm i -D @types/vue-i18n 或 yarn add -D @types/vue-i18n

【讨论】：

您好，欢迎您！通过添加更多详细信息并解释这些命令的实际作用以及它们回答问题的原因，您可以显着提高您的回答质量。

前端开发vscode基本使用插件，vue插件

1.AutoRenameTag （标签插件）   2.BracketPairColorizer（对代码中的括号添上一抹亮色）   3.ChineselanguagePackforVisualStudioCode（vscode中文插件）   4.CodeSpellChecker（TS和JS拼写检查器） 查看详情

vscode中elementui代码提示设置

VSCode中ElementUI代码提示设置添加ElementUISnippets插件添加vue-helper插件添加ElementUISnippets插件1、搜索ElementUISnippets插件2、点击Install按钮添加vue-helper插件1、搜索vue-helper插件2、点击Install按钮 查看详情

vscode中elementui代码提示设置

VSCode中ElementUI代码提示设置添加ElementUISnippets插件添加vue-helper插件添加ElementUISnippets插件1、搜索ElementUISnippets插件2、点击Install按钮添加vue-helper插件1、搜索vue-helper插件2、点击Install按钮 查看详情

在 Vue 2 / Nuxt / Typescript / @nuxtjs-composition-api 项目中使用 VSCode Volar 扩展

】在Vue2/Nuxt/Typescript/@nuxtjs-composition-api项目中使用VSCodeVolar扩展【英文标题】：UseofVSCodeVolarextensionforaVue2/Nuxt/Typescript/@nuxtjs-composition-apiproject【发布时间】：2021-11-2902:37:03【问题描述】：我正在尝试设置VolarVSCode扩展以使用NuxtJS/Typ... 查看详情

vscode常用插件的安装

...体ctrl+alt+p输入config"locale":"zh-cn"vue-color//vue文件代码颜色vscode提高效率有效使用插件：vscode-DocumentThis-----jsdoc注释生成。vscode-eCSStractor-----抽取页面的class，生成一个css文档。vscode-CSSPeek------class名字定义跳转。（终于拥有dwcc的这个... 查看详情

vue开发工具vscode插件安装及调试

1.vue的开发工具VisualStudioCode下载链接：进入vscode官网（https://code.visualstudio.com/Download）2.选择下一步安装，我接受协议，选择安装位置，将打开方式添加到鼠标右键菜单上（勾选“其他”中的第一选项），继续点击下一步，完成... 查看详情

vscode配置和插件

使用VisualStudioCode编写Vue的札记梁源 2017-04-28 2860标签： ESLint ， VSCode ， 网络编程前言VisualStudioCodeisalightweightbutpowerfulsourcecodeeditorwhichrunsonyourdesktopandisavailable 查看详情

vue：vscode中，.ts文件没有代码及报错提示(代码片段)

...现：没有报错提示，也没有相关提示原因：是同时安装了VSCode插件：VueDX和TypeScriptVuePlugin(Volar)解决方法：卸载VueDX即可。其他优化开启TakeOverMode：更新Volar插件到0.27.17版本以上.关闭内置的TS插件，方法：2.1Ctrl+Shift+P打开命令面板... 查看详情

vscode中vue怎么格式化代码

...7，结果sublimetext插件无法安装，各种心塞，于是决定转战vscode。与sublimetext相比，vscode有不少优点：中文输入法支持更好。在windows平台下，需要st支持中文输入需要安装各种插件，而且效果也是差强人意。基础功能更全面。vscode... 查看详情

vscode中的插件及使用设置

目前我装的一些插件:  ---------------------------------------------------分割线------------------------------------------------------------选择vscode文件->首选项->设置1.防止vscode启动后rg.exe进程导致的cup过高电脑卡死2.配置在vue组件文件.vue 查看详情

可视化vue开发小助手-troll(vscode插件）(代码片段)

...今天向大家推荐一个Vue开发辅助工具Troll，这是一个VSCode插件。Troll工具的主要优点：能够把.vue文件中的<template>部分转变为可视化图形模式，开发人员就可以通过拖放来自由移动各个element和property，比在文本... 查看详情

可视化vue开发小助手-troll(vscode插件）(代码片段)

...今天向大家推荐一个Vue开发辅助工具Troll，这是一个VSCode插件。Troll工具的主要优点：能够把.vue文件中的<template>部分转变为可视化图形模式，开发人员就可以通过拖放来自由移动各个element和property，比在文本... 查看详情

vue3+tsts插件安装

...和vue3兼容的问题，编译没问题，但是会警告解决方法：vscode禁用Vetur插件，安装使用volar插件点击插件商店右侧，从vsix安装出现与版本不兼容的情况解决方法:修改安装包内的package.json文件中的版本号与vscode版本号对应即可.1.用... 查看详情

vscode----热门插件超实用插件汇总（史上最全）

Vscode----热门插件超实用插件汇总一、汉化Vscode二、Vue配件1.Vetur2.Vue3Snippets三、配置类插件1.AutoRenameTag2.AutoCloseTag3.Beautify4.DebuggerforChrome5.DebuggerforJava6.ESLint7.HighlightMatchingTag8.ImagePreview9.ImageSnippets10.LiveServer11.OpeninBrowser12.Prettier-Codefor... 查看详情

vue开发环境配置visualstudiocode配置和安装教程查询

    方便前端vue开发，使用vscode插件安装详细教程，关于vscode在网络上查询相关的教程，插件安装如下图所示，大家发现常用的，好用的插件可以留言分享，或与我联系。1 安装Vue语法高亮显示插件：... 查看详情

vscode常用好用插件/配置+开发vue必装的插件

一、VsCode常用好用插件1、实时刷新网页的插件：LiveServer2、自动保存：不用装插件，在VsCode中设置一下就行3、openinbrowser支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Op... 查看详情

vscode保存后自动格式化vue代码

  在VSCode里面编辑Vue代码，通常我们会安装插件Vetur，本次介绍的格式化代码也依赖于Vetur插件。具体见一下步骤　注：VSCode版本为1.74.3   1.安装插件Vetur  2.配置自动格式化，具体路径【文件】-【首选项... 查看详情

vscode开发vue的常用插件

  查看详情