# Vue 2 Snippets for Visual Studio Code 这个插件基于最新的 Vue 的 API 添加了Code Snippets。后续将集成基于vue的各种代码提示，各种解决方案，一键解决 ## 已集成 ##### HTML ES6 Vue VueRouter Vuex [![](https://vsmarketplacebadge.apphb.com/version/hollowtree.vue-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=1194979849.code-snippets) [![](https://vsmarketplacebadge.apphb.com/installs/hollowtree.vue-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=1194979849.code-snippets) ### It looks like: ![](https://raw.githubusercontent.com/hollowtree/vscode-vue-snippets/master/img/show1.png) ![](https://raw.githubusercontent.com/hollowtree/vscode-vue-snippets/master/img/show2.png) # Snippets ## JavaScript Snippets ### Declarations | Trigger | Content | | -------: | ------- | | `v⇥` | `var ` | | `v=⇥` | `var name = value;` | | `l⇥` | `let ` | | `l=⇥` | `let name = value;` | | `dl=⇥` | `let {name} = value;`| | `co⇥` | `const`| | `co=⇥` | `const name = value;` | | `dco=⇥`| `const {name} = value;` | ### Flow Control | Trigger | Content | | -------: | ------- | | `if⇥` | `if (condition}) {}` | | `el⇥` | `else { }` | | `ife⇥` | `if (condition){ } else { }` | | `ei⇥` | `else if (condition) { }` | | `ter⇥` | `condition ? expressionTrue : expressionFalse;`| | `fl⇥` | `for (let i = 0, len = iterable.length; i < len; i ++) {}` | | `rfl⇥` | `for (let i = iterable.length - 1; i >= 0; i--) {}` | | `fi⇥` | `for (let key in array) {if (array.hasOwnProperty(key)) {}}` | | `fo⇥` | `for (let key of array) {}` | | `wl⇥` | `while (condition) {}` | | `tc⇥` | `try {} catch (err) {}` | | `tf⇥` | `try {} finally {}` | | `tcf⇥` | `try {} catch (err) {} finally {}` | | `sw⇥` | `switch (expr) { case value: return ; default: return;}` | ### Functions | Trigger | Content | | -------: | ------- | | `f⇥` | `function (arguments) {}` | | `fn⇥` | `function name (arguments) {}` | | `iife⇥` | `((arguments) => {})();` | | `fa⇥` | `fn.apply(this, arguments)` | | `fc⇥` | `fn.call(this, arguments)` | | `fb⇥` | `fn.bind(this, arguments)` | | `af⇥` | `(arguments) => statement` | | `afb⇥` | `(arguments) => {}` | | `gf⇥` | `function* (arguments) {}` | | `gfn⇥` | `function* name(arguments) {}` | ### Iterables | Trigger | Content | | -------: | ------- | | `seq⇥` | `[...Array(length).keys()]` | | `fe⇥` | `${1}.forEach((item) => {});` | | `map⇥` | `${1}.map((item) => {});` | | `reduce⇥` | `` | | `filter⇥` | `${1}.filter(item => {});` | | `find⇥` | `${1}.find(item => {});` | #### `reduce⇥` reduce ```javascript ${1}.reduce((${2:previous}, ${3:current}) => { }${4:, initial}); ``` ### Objects and Classes | Trigger | Content | | -------: | ------- | | `ol⇥` | `换行对象{
}` | | `slol⇥` | `行内对象{ kv${0} };` | | `kv⇥` | `key:value,` | | `c⇥` | `class name {constructor(arguments) {}}` | | `cex⇥` | `class name extends base {constructor(arguments) {super(arguments);}}` | | `ctor⇥` | `constructor(arguments) {super(arguments); }` | | `m⇥` | `method(arguments) {}` | | `get⇥` | `get ${1:property}() {}` | | `set⇥` | `set ${1:property}(value) {}` | | `gs⇥` | `get property() {} set property(value) {}` | | `pctor⇥` | `var Class = function(arguments) {};` | | `proto⇥` | `Class.prototype.method = function(arguments) {};` | | `oa⇥` | `Object.assign(dest,source)` | | `oc⇥` | `Object.assign({}, original, source)` | ### Returning values | Trigger | Content | | -------: | ------- | | `r⇥` | `return ${0};` | | `rp⇥` | `return new Promise((resolve, reject) => {});` | | `rc⇥` | `return ( );` | | `rc⇥` | `return ( );` | ### Types | Trigger | Content | | -------: | ------- | | `tof⇥` | `typeof source === 'undefined'` | | `iof⇥` | `source instanceof Object` | ### Promises | Trigger | Content | | -------: | ------- | | `pr⇥` | `new Promise((resolve, reject) => {})` | | `then⇥` | `promise.then((value) => {})` | | `catch⇥` | `promise.catch((err) => {})` | ### ES6 Modules | Trigger | Content | | -------: | ------- | | `ex⇥` | `export member;` | | `exd⇥` | `export default member;` | | `im⇥` | `import * from 'module';` | | `ima⇥` | `import * as name from 'module';` | ### Node.js | Trigger | Content | | -------: | ------- | | `cb⇥` | `(err, value) => { }` | | `re⇥` | `require('module');` | | `rel⇥` | `require('./module');` | | `req⇥` | `const module = require('module');` | | `reql⇥` | `const module = require('./module');` | | `dreq⇥` | `const {module} = require('module');` | | `dreql⇥` | `const {module} = require('./module');` | | `em⇥` | `exports.member = value;` | | `me⇥` | `module.exports = name;` | | `meo⇥` | `module.exports = {member };` | | `on⇥` | `emitter.on('event', (arguments) => {});` | ### BDD Testing (Mocha, Jasmine, etc.) | Trigger | Content | | -------: | ------- | | `desc⇥` | `describe('description', () => {});` | | `cont⇥` | `context('description', () => {});` | | `it⇥` | `it('description', () => {});` | | `its⇥` | `it('description', () => {});` | | `ita⇥` | `it('description', (done) => { done();});` | | `bf⇥` | `before(() => {});` | | `bfe⇥` | `beforeEach(() => {});` | | `aft⇥` | `after(() => {});` | | `afe⇥` | `afterEach(() => {});` | ### Console | Trigger | Content | | -------: | ------- | | `cl⇥` | `console.log();` | | `ce⇥` | `console.error();` | | `cw⇥` | `console.warn();` | | `cll⇥` | `日至标记 console.log('${0}', ${0});` | | `cel⇥` | `日至标记 console.error('${0}', ${0});` | | `cwl⇥` | `日至标记 console.warn('${0}', ${0});` | ### Timers | Trigger | Content | | -------: | ------- | | `st⇥` | `setTimeout(() => { }, delay);` | | `si⇥` | `setInterval(() => { }, delay);` | | `sim⇥` | `setImmediate(() => { });` | | `nt⇥` | `process.nextTick(() => {});` | ### Miscellaneous | Trigger | Content | | -------: | ------- | | `us⇥` | `'use strict';` | ### Miscellaneous #### `us⇥` insert 'use strict' statement ```javascript 'use strict'; ``` ## JavaScript (ES6) code snippets ### Import and export | Trigger | Content | | -------: | ------- | | `imp→` | imports entire module `import fs from 'fs';`| | `imn→` | imports entire module without module name `import 'animate.css'` | | `imd→` | imports only a portion of the module using destructing `import {rename} from 'fs';` | | `ime→` | imports everything as alias from the module `import * as localAlias from 'fs';` | | `ima→` | imports only a portion of the module as alias `import { rename as localRename } from 'fs';` | | `rqr→` | require package `require('');`| | `mde→` | default module.exports `module.exports = {};`| | `enf→` | exports name function `export const log = (parameter) => { console.log(parameter);};` | | `edf→` | exports default function `export default (parameter) => { console.log(parameter);};` | | `ecl→` | exports default class `export default class Calculator { };` | | `ece→` | exports default class by extending a base one `export default class Calculator extends BaseClass { };` | ### Class helpers | Trigger | Content | | -------: | ------- | | `con→` | adds default constructor in the class `constructor() {}`| | `met→` | creates a method inside a class `add() {}` | | `pge→` | creates a getter property `get propertyName() {return value;}` | | `pse→` | creates a setter property `set propertyName(value) {}` | ### Various methods | Trigger | Content | | -------: | ------- | | `fre→` | forEach loop in ES6 syntax `array.forEach(currentItem => {})`| | `fof→` | for ... of loop `for(const item of object) {}` | | `fin→` | for ... in loop `for(const item in object) {}` | | `anfn→` | creates an anonymous function `(params) => {}` | | `nfn→` | creates a named function `const add = (params) => {}` | | `dob→` | destructing object syntax `const {rename} = fs` | | `dar→` | destructing array syntax `const [first, second] = [1,2]` | | `sti→` | set interval helper method `setInterval(() => {});` | | `sto→` | set timeout helper method `setTimeout(() => {});` | | `prom→` | creates a new Promise `return new Promise((resolve, reject) => {});`| | `thenc→` | adds then and catch declaration to a promise `.then((res) => {).catch((err) => {});`| ### Console methods | Trigger | Content | | -------: | ------- | | `cas→` | console alert method `console.assert(expression, object)`| | `ccl→` | console clear `console.clear()` | | `cco→` | console count `console.count(label)` | | `cdi→` | console dir `console.dir` | | `cer→` | console error `console.error(object)` | | `cgr→` | console group `console.group(label)` | | `cge→` | console groupEnd `console.groupEnd()` | | `clg→` | console log `console.log(object)` | | `clo→` | console log object with name `console.log('object :', object);` | | `ctr→` | console trace `console.trace(object)` | | `cwa→` | console warn `console.warn` | | `cin→` | console info `console.info` | | `clt→` | console table `console.table` | ## Vue 2 Snippets Including most of the API of Vue.js 2. You can type `vcom`, choose `VueConfigOptionMergeStrategies`, and press ENTER, then `Vue.config.optionMergeStrategies` appear on the screen. 插件的 Snippets 如下表格所示，比如你可以键入 `vcom` 然后按上下键选中 `VueConfigOptionMergeStrategies` 再按Enter键，就输入了`Vue.config.optionMergeStrategies`了。 As shown in the table below, snippet `vmData` has body like `${this, vm}.$data` will provides choice `this.$data` and `vm.$data` to you. 如下表所示，`vmData` 的内容是 `${this, vm}.$data`，这表明这个 snippet 会提供 `this.$data` and `vm.$data` 两种选项供你选择。 | Prefix | JavaScript Snippet Content | | ------ | ------------ | | `import` | `import ... from ...` | | `newVue` | `new Vue({...})` | | `VueConfigSilent` | `Vue.config.silent = true` | | `VueConfigOptionMergeStrategies` | `Vue.config.optionMergeStrategies` | | `VueConfigDevtools` | `Vue.config.devtools = true` | | `VueConfigErrorHandler` | `Vue.config.errorHandler = function (err, vm, info) {...}` | | `VueConfigWarnHandler` | `Vue.config.warnHandler = function (msg, vm, trace) {...}` | | `VueConfigIgnoredElements` | `Vue.config.ignoredElements = ['']` \ | `VueConfigKeyCodes` | `Vue.config.keyCodes` | | `VueConfigPerformance` | `Vue.config.performance = true` | | `VueConfigProductionTip` | `Vue.config.productionTip = false` | | `vueExtend` | `Vue.extend( options )` | | `VueNextTick` | `Vue.nextTick( callback, [context] )` | | `VueNextTickThen` | `Vue.nextTick( callback, [context] ).then(function(){ })` | | `VueSet` | `Vue.set( target, key, value )` | | `VueDelete` | `Vue.delete( target, key )` | | `VueDirective` | `Vue.directive( id, [definition] )` | | `VueFilter` | `Vue.filter( id, [definition] )` | | `VueComponent` | `Vue.component( id, [definition] )` | | `VueUse` | `Vue.use( plugin )` | | `VueMixin` | `Vue.mixin({ mixin })` | | `VueCompile` | `Vue.compile( template )` | | `VueVersion` | `Vue.version` | | `vmData` | `${this, vm}.$data` | | `vmProps` | `${this, vm}.$props` | | `vmEl` | `${this, vm}.$el` | | `vmOptions` | `${this, vm}.$options` | | `vmParent` | `${this, vm}.$parent` | | `vmRoot` | `${this, vm}.$root` | | `vmChildren` | `${this, vm}.$children` | | `vmSlots` | `${this, vm}.$slots` | | `vmScopedSlots` | `${this, vm}.$scopedSlots.default({})` | | `vmRefs` | `${this, vm}.$refs` | | `vmIsServer` | `${this, vm}.$isServer` | | `vmAttrs` | `${this, vm}.$attrs`| | `vmListeners` | `${this, vm}.listeners`| | `vmWatch` | `${this, vm}.$watch( expOrFn, callback, [options] )` | | `vmSet` | `${this, vm}.$set( object, key, value )` | | `vmDelete` | `${this, vm}.$delete( object, key )` | | `vmOn` | `${this, vm}.$on( event, callback )` | | `vmOnce` | `${this, vm}.$once( event, callback )` | | `vmOff` | `${this, vm}.$off( [event, callback] )` | | `vmEmit` | `${this, vm}.$emit( event, […args] )` | | `vmMount` | `${this, vm}.$mount( [elementOrSelector] )` | | `vmForceUpdate` | `${this, vm}.$forceUpdate()` | | `vmNextTick` | `${this, vm}.$nextTick( callback )` | | `vmDestroy` | `${this, vm}.$destroy()` | | `renderer` | `const renderer = require('vue-server-renderer').createRenderer()` | | `createRenderer` | `createRenderer({ })` | | `preventDefault` | `preventDefault();` | | `stopPropagation` | `stopPropagation();` |
| Prefix | HTML Snippet Content | | ------ | ------------ | | `template` | `` | | `script` | `` | | `style` | `` | | `vText` | `v-text=msg` | | `vHtml` | `v-html=html` | | `vShow` | `v-show` | | `vIf` | `v-if` | | `vElse` | `v-else` | | `vElseIf` | `v-else-if` | | `vForWithoutKey` | `v-for` | | `vFor` | `v-for="" :key=""` | | `vOn` | `v-on` | | `vBind` | `v-bind` | | `vModel` | `v-model` | | `vPre` | `v-pre` | | `vCloak` | `v-cloak` | | `vOnce` | `v-once` | | `key` | `:key` | | `ref` | `ref`| | `slotA` | `slot=""`| | `slotE` | ``| | `slotScope` | `slot-scope=""`| | `component` | ``| | `keepAlive` | `` | | `transition` | `` | | `transitionGroup` | `` | | `enterClass` | `enter-class=''`| | `leaveClass` | `leave-class=''`| | `appearClass` | `appear-class=''`| | `enterToClass` | `enter-to-class=''`| | `leaveToClass` | `leave-to-class=''`| | `appearToClass` | `appear-to-class=''`| | `enterActiveClass` | `enter-active-class=''`| | `leaveActiveClass` | `leave-active-class=''`| | `appearActiveClass` | `appear-active-class=''`| | `beforeEnterEvent` | `@before-enter=''`| | `beforeLeaveEvent` | `@before-leave=''`| | `beforeAppearEvent` | `@before-appear=''`| | `enterEvent` | `@enter=''`| | `leaveEvent` | `@leave=''`| | `appearEvent` | `@appear=''`| | `afterEnterEvent` | `@after-enter=''`| | `afterLeaveEvent` | `@after-leave=''`| | `afterAppearEvent` | `@after-appear=''`| | `enterCancelledEvent` | `@enter-cancelled=''`| | `leaveCancelledEvent` | `@leave-cancelled=''`| | `appearCancelledEvent` | `@appear-cancelled=''`|
| Prefix | Vue Router Snippet Content | | ------ | ------------ | | `routerLink` | `` | | `routerView` | `` | | `to` | `to=""` | | `tag` | `tag=""` | | `newVueRouter` | `const router = newVueRouter({ })` | | `routerBeforeEach` | `router.beforeEach((to, from, next) => { }` | | `routerReplace` | `router.replace()` | | `routerGo` | `router.go()` | | `routerPush` | `router.push()` | | `routes` | `routes: []` | | `beforeEnter` | `beforeEnter: (to, from, next) => { }` | | `beforeRouteEnter` | `beforeRouteEnter (to, from, next) { }` | | `beforeRouteLeave` | `beforeRouteLeave (to, from, next) { }` | | `scrollBehavior` | `scrollBehavior (to, from, savedPosition) { }` |
| Prefix | Vuex Snippet Content | | ------ | ------------ | | `newVuexStore` | `const store = new Vuex.Store({ })` | ### Supported languages * vue(.vue) * HTML(.html) * javascript(.js) * typescript(.ts) * pug(.pug) ### Base on [Vue 2 Snippets](https://github.com/hollowtree/vscode-vue-snippets) [JavaScript (ES6) code snippets](https://github.com/xabikos/vscode-javascript) [JavaScript Snippets](https://github.com/nathanchapman/vscode-javascript-snippets) -------------------------------------- ### 2018.11.12 集成HTML ES6代码提示，部分提示描述汉化 ### 2018.10.26 部分汉化提示及解决方案