Skip to content

FrontEnd VSCode Snippets

Installation

click the extensions button (lowest square icon in the editor), and type in FrontEnd VSCode Snippets, select the one by sdras

Snippets

Vue

Snippet	Purpose
`vbase`	Single file component base

Template

Snippet	Purpose
`vfor`	v-for directive
`vmodel`	Semantic v-model directive
`von`	v-on click handler with arguments
`vel-props`	Component element with props
`vsrc`	Image src binding
`vstyle`	Inline style binding
`vstyle-obj`	Inline style binding with objects
`vclass`	Class binding
`vclass-obj`	Class binding with objects
`vclass-obj-mult`	Multiple conditional class bindings
`vanim`	Transition component with JS hooks
`vnuxt`	Nuxt Routing Link
`vroutename`	router-link Named Routing
`vroutenameparam`	router-link Named with Parameters
`vroutepath`	router-link Path Routing Link

Script

Snippet	Purpose
`vdata`	Component data as a function
`vmethod`	Vue method
`vcomputed`	Vue computed property
`vcreated`	created lifecycle method
`vmounted`	vmounted lifecycle method
`vdestroyed`	destroyed lifecycle method
`vprops`	Props with type and default
`vmixin`	Create a Vue Mixin

Javascript

Snippet	Purpose
`impv`	Import Vue
`log`	Log output to console

React

Snippets	Content
`imr`	Import React
`imro`	Import React as Object
`imrc`	Import React Component
`imrpc`	Import React PureComponent
`imrn`	Import React-Native Element
`ims`	Import Styled-Components
`imsn`	Import Styled-Components Native
`impt`	Import PropTypes

Flutter

Shortcut	Description
`stless`	Creates a Stateless widget
`stful`	Creates a Stateful widget
`build`	Describes the part of the user interface represented by the widget.
`initS`	Called when this object is inserted into the tree. The framework will call this method exactly once for each State object it creates.
`dis`	Called when this object is removed from the tree permanently. The framework calls this method when this State object will never build again.
`importM`	Import Material package.
`importC`	Import Cupertino Package

Extra (gitignore)

Snippet	Purpose
`gitignore`	.gitignore file presets

Contributing

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