Useful VS Code Snippets

Visual Studio Code Snippets for daily use with Angular, Vue, Typescript and Javascript.

See the CHANGELOG for the latest changes.

Usage

Type part of a snippet, press enter and the snippet unfolds. Pressing space at anytime shows the description and preview of a snippet.

General Snippets

| Snippet | Description | | ---------------- | ------------------------------------------------------------------------------------------------- | | import | Import entire module: import Module from 'module' | | import-no-name | Import entire module without module name: import 'module' | | import-all | Import all as alias from module: import * as alias from 'module' | | import-part | Import only a specific part from a module: import { part } from 'module' | | import-as | Import only a specific part from a module with an alias: import { part as alias } from 'module' | | clog | Print a message to the console: console.log(message) | | clogo | Print object to the console: console.log('object': object) | | cwarn | Print warning to console: console.warn(message) | | ccount | Print occurrences to console: console.count(message) | | cdir | Print object represantation: console.dir(object) | | cerror | Print error: console.error(object) | | ctable | Print a collection as table: console.table(collection) |

Typescript Snippets

| Snippet | Description | | ---------- | --------------------------------------- | | ts-class | Class with Partial constructor assign |

Angular Snippets

| Snippet | Description | | ------------------------ | ------------------------------------------ | | ng-module | Module | | ng-module-with-routing | Module with Routing (for child) | | ng-service | Service (provided in root) | | ng-component | Component (change detection on push) | | ng-directive | Directive | | ng-guard | Guard (can activate) | | ng-interceptor | Http Interceptor | | ng-pipe | Pipe | | ng-route-404 | 404 Route | | ng-route-default | Default Route | | ng-route-eager | Eager loaded Route | | ng-route-lazy | Lazy loaded Route (with new import syntax) | | ng-route-children | Route with children | | ng-output | @Output event emitter |

Vue 3 Snippets

General

| Snippet | Description | | ------------------------------ | ---------------------------------------------- | | vue-sfc | Vue Single File Component |

Javascript / Typescript

| Snippet | Description | | ------------------------------------- | ------------------------------------------------------- | | vue-import-component | Import a component | | vue-import-component-dynamic | Import a lazy loaded component | | vue-import-lib | Import a library | | vue-define-component | Vue Typescript component | | vue-test | Unit test Single File Component | | vue-prop | Vue Composition API - prop | | vue-ref | Vue Composition API - ref | | vue-reactive | Vue Composition API - reactive | | vue-computed | Vue Composition API - computed | | vue-watch | Vue Composition API - watch() for single source | | vue-watch-array | Vue Composition API - watch() for array of sources | | vue-watcheffect | Vue Composition API - watchEffect()method | | vue-life-onmounted | Vue Composition API - onMounted() Lifecycle hook | | vue-life-onbeforemount | Vue Composition API - onBeforeMount() Lifecycle hook | | vue-life-onbeforeupdate | Vue Composition API - onBeforeUpdate() Lifecycle hook | | vue-life-onupdated | Vue Composition API - onUpdated() Lifecycle hook | | vue-life-onerrorcaptured | Vue Composition API - onErrorCaptured() Lifecycle hook| | vue-life-onbeforeunmount | Vue Composition API - onBeforeUnmount() Lifecycle hook| | vue-life-onunmounted | Vue Composition API - onUnmounted() Lifecycle hook |

Html

Before these snippets started with only v-. New syntax starts with vue-.

| Snippet | Description | | ---------------- | -------------------------------------------------- | | vue-html | Bind HTML directly to an element with :html | | vue-class | Bind CSS class to an element with :class | | vue-if | Conditional statement | | vue-if-else | Conditional statement with else clause | | vue-if-else-if | Conditional statement with else-if and else clause | | vue-show | Displaying or hiding an element with v:show | | vue-for | Loop | | vue-for-index | Indexed loop | | vue-for-object | L | | vue-for-range | Loop over a range | | vue-on | Event Listener | | vue-on-args | Event Listener with arguments | | vue-on-modified | Event Listener with event modifier | | vue-model | Model | | vue-model-number | Model with type number |

Vue 2 Snippets

General

| Snippet | Description | | ------------------------------ | ---------------------------------------------- | | vue2-component | Vue Class Component |

Typescript

| Snippet | Description | | -------------------- | ----------------------------------------------------------------- | | vue2-global-component | Register a global component | | vue2-router-class | Router Class | | vue2-route-default | Default Route | | vue2-route-eager | Eager loaded Route | | vue2-route-lazy | Lazy loaded Route | | vue2-route-children | Route with children | | vue2-component | Component with vue-class-component and vue-property-decorator | | vue2-store | Dynamic Vuex Store | | vue2-store-module | Dynamic Vuex Store Module | | vue2-model | Interface and class with create and update functions |

Typescript Class Component

All of them need a reference to vue-property-decorator.

Prior these snippets started with only v-. New syntax starts with vue2-class- as these are legacy snippets.

| Snippet | Description | | ------------------------------ | ---------------------------------------------- | | vue2-component | Generates a vue single class component | | vue2-class-prop | Property | | vue2-class-prop-default | Property with default value | | vue2-class-prop-sync | Reactive Property | | vue2-class-prop-sync-default | Reactive Property with default value | | vue2-class-model | Model | | vue2-class-watch | Watcher | | vue2-class-watch-options | Watcher with default options | | vue2-class-emit | Event Emitter - method name is used as $emit | | vue2-class-emit-self | Event Emitter - name is used as $emit | | vue2-class-ref | Reference to another component | | vue2-class-ref-key | Reference to another HTML element |

Emmet

If you want intellisense to show emmet before the snippets, you can force the emmet suggestions to show up at the top, by add the following to your editor user settings:

{
  "emmet.showSuggestionsAsSnippets": true,
  "editor.snippetSuggestions": "top"
}