vue使用typescript 在vscode中快速创建组件(vscode vue typescript files)

基本功能

创建时自动添加模板,少打一个tab是一个tab.
在这里插入图片描述

右击菜单

生成组件

在这里插入图片描述
创建组件示例,组件默认类命使用驼峰式命名。使用中线命名方式时,文件中的类名将自动转换为驼峰式。
在添加组件时存在三个可选参数。

componentName -c     在本次创建中清除设置中的前后缀
componentName -p     添加/覆盖设置的组件前缀
componentName -s     添加/覆盖设置的组件后缀

tips: 若全局设置了组件的前后缀。在单次创建中,想只生成带有前缀/后缀的类命,请结合 -c参数

生成声明文件

生成声明文件
生成的声明文件是个较为通用的声明,只适合在全局引用中防止报错。

生成vuex子模块

使用此功能时,请先确定安装了vuex-module-decorators开发依赖。

npm install -D vuex-module-decorators

需要更改cli生成的index.ts文件,以便自动注入子模块。可以在文件中使用snippets> vx-init快速生成
生成vuex模块

Directive

指令

Interface,Class,Enum

基本空白类创建。如export class ClassName{}
class

配置

配置详细
该插件主要有以上配置。
以上所有前后缀设置,不会改变文件名称,只会修改文件中的类名。可以通过ctrl+,快速进入设置界面,搜索Vue-typescript-files进行配置。
一个设置前缀为test,后缀为page,模板引擎选用pug,css预处理器使用scss,并向template插入了自定义标签的组件如下。
创建增强组件
其中需要主要,添加自定义标签时选用的时数组形式,当插入多个上下级关系的标签时不会自动进行缩进。若有需要可向字符中增加\t添加缩进。

snippets

v-beforeCreate 
v-created
v-beforeMount
v-mounted
v-beforeUpdate
v-updated
v-beforeDestroy
v-destroyed
constructor
快速创建生命周期钩子。
v-init 	       在不使用插件的情况下生成vue模板
vx-init   	   生成vuex根文件模板
vx=module      生成vuex子模块模板

github地址:github

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

zz56138

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值