LissetteIbnz/vscode-vue-typescript-sfc-snippets

A collection of snippets for Vue.js with TypeScript using SFC or class based API (vscode)

Vue.js + TypeScript SFC Snippets for VS Code

This extension for VS Code adds snippets to use Vue with TypeScript as Composition API, standard API and based on class-style, as well HTML.

Usage

Type part of a snippet, press enter, and the snippet unfolds.

Snippets

Base for Vue Composition API using Vue 2

Snippet	Purpose
vcompbase	Base for Composition API plugin for Vue 2 with TS

Base for Vue Standard API

Snippet	Purpose
vbase	SFC standard API with TS
vcbase	SFC standard API with VueConstructor & TS
vcibase	SFC standard API with VueConstructor extending interface & TS

Base for Class-style API

Snippet	Purpose
vcsbase	SFC class-style API with TS
vcsibase	SFC class-style API extending Props with TS

Template

Snippet	Purpose
vfor	v-for directive
vmodel	v-model directive
vmodel-num	v-model directive with number modifier
von	v-on custom handler
von-arg	v-on custom handler with arguments
von-click	v-on click handler with arguments
von-submit	v-on submit handler with prevent

Script for Vue Standard API

Snippet	Purpose
vc-imp	Import Vue and VueConstructor
vc-header	Definition export default component as VueConstructor
vci-header	Definition export default component as VueConstructor + interface
vdata	Component type data as a function
vprops	Vue props
vprops-req	Vue props required
vinterface	Interface for extend Vue
vmethod	Vue method
vcomputed	Vue computed
vwatcher	Vue watcher
vrefs	Declaration Refs by VueConstructor
vfilter	Vue filter
vrender	Vue render

Scripts for Class-style API

Snippet	Purpose
vcc-imp	Import Component with vue-class-property
vpd-imp	Import Vue and Component with vue-property-decorator
vcs-data	Class-style API initial data
vcs-refs	Class-style API annotate refs type
vcs-computed	Class-style API computed

Scripts TypeScript file

Snippet	Purpose
v-augmenting	Augmenting Types to declare an instance property
v-augmenting-global	Declare additional global properties
v-augmenting-comp	Declare additional components options

Installation

1. Install Visual Studio Code
2. Launch VS Code
3. From the command palette Ctrl-Shift-P (Windows, Linux) or Cmd-Shift-P (OSX)
4. Select Install Extension
5. Type LissetteIbnz
6. Choose the extension
7. Reload Visual Studio Code

Thanks

Inspired by Vue VSCode Snippets of Sarah Drasner

Contributing

This is an open source project open to anyone. Contributions are welcome github

License

Vue.js + TypeScript SFC Snippets for VS Code is released under the MIT licensed