├── .gitattributes ├── .gitignore ├── .vscode └── launch.json ├── README.md ├── img ├── VueInit.gif ├── logo.png ├── show.png ├── show1.png └── show2.png ├── package.json └── snippets ├── html.json ├── javascript.json ├── pug.json └── vue.json /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear in the root of a volume 35 | .DocumentRevisions-V100 36 | .fseventsd 37 | .Spotlight-V100 38 | .TemporaryItems 39 | .Trashes 40 | .VolumeIcon.icns 41 | 42 | # Directories potentially created on remote AFP share 43 | .AppleDB 44 | .AppleDesktop 45 | Network Trash Folder 46 | Temporary Items 47 | .apdisk 48 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that launches the extension inside a new window 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | { 6 | "version": "0.2.0", 7 | "configurations": [ 8 | { 9 | "name": "Extension", 10 | "type": "extensionHost", 11 | "request": "launch", 12 | "runtimeExecutable": "${execPath}", 13 | "args": [ 14 | "--extensionDevelopmentPath=${workspaceFolder}" 15 | ] 16 | } 17 | ] 18 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue 2 Snippets for Visual Studio Code 2 | 3 | This extension adds Vue 2 Code Snippets into Visual Studio Code. 4 | 5 | 这个插件基于最新的 Vue 2 的 API 添加了Code Snippets。 6 | 7 | [![](https://vsmarketplacebadge.apphb.com/version/hollowtree.vue-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets) 8 | [![](https://vsmarketplacebadge.apphb.com/installs/hollowtree.vue-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets) 9 | 10 | 11 | ### It looks like: 12 | ![](https://raw.githubusercontent.com/hollowtree/vscode-vue-snippets/master/img/show1.png) 13 | 14 | ![](https://raw.githubusercontent.com/hollowtree/vscode-vue-snippets/master/img/show2.png) 15 | 16 | 17 | ### Snippets 18 | 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. 19 | 20 | 插件的 Snippets 如下表格所示，比如你可以键入 `vcom` 然后按上下键选中 `VueConfigOptionMergeStrategies` 再按Enter键，就输入了`Vue.config.optionMergeStrategies`了。 21 | 22 | As shown in the table below, snippet `vmData` has body like `${this, vm}.$data` will provides choice `this.$data` and `vm.$data` to you. 23 | 24 | 如下表所示，`vmData` 的内容是 `${this, vm}.$data`，这表明这个 snippet 会提供 `this.$data` and `vm.$data` 两种选项供你选择。 25 | 26 | | Prefix | JavaScript Snippet Content | 27 | | ------ | ------------ | 28 | | `import` | `import ... from ...` | 29 | | `newVue` | `new Vue({...})` | 30 | | `VueConfigSilent` | `Vue.config.silent = true` | 31 | | `VueConfigOptionMergeStrategies` | `Vue.config.optionMergeStrategies` | 32 | | `VueConfigDevtools` | `Vue.config.devtools = true` | 33 | | `VueConfigErrorHandler` | `Vue.config.errorHandler = function (err, vm, info) {...}` | 34 | | `VueConfigWarnHandler` | `Vue.config.warnHandler = function (msg, vm, trace) {...}` | 35 | | `VueConfigIgnoredElements` | `Vue.config.ignoredElements = ['']` \ 36 | | `VueConfigKeyCodes` | `Vue.config.keyCodes` | 37 | | `VueConfigPerformance` | `Vue.config.performance = true` | 38 | | `VueConfigProductionTip` | `Vue.config.productionTip = false` | 39 | | `vueExtend` | `Vue.extend( options )` | 40 | | `VueNextTick` | `Vue.nextTick( callback, [context] )` | 41 | | `VueNextTickThen` | `Vue.nextTick( callback, [context] ).then(function(){ })` | 42 | | `VueSet` | `Vue.set( target, key, value )` | 43 | | `VueDelete` | `Vue.delete( target, key )` | 44 | | `VueDirective` | `Vue.directive( id, [definition] )` | 45 | | `VueFilter` | `Vue.filter( id, [definition] )` | 46 | | `VueComponent` | `Vue.component( id, [definition] )` | 47 | | `VueUse` | `Vue.use( plugin )` | 48 | | `VueMixin` | `Vue.mixin({ mixin })` | 49 | | `VueCompile` | `Vue.compile( template )` | 50 | | `VueVersion` | `Vue.version` | 51 | | `data` | `data() { return {} }` | 52 | | `watchWithOptions` | `key: { deep: true, immediate: true, handler: function () { } }` | 53 | | `vmData` | `${this, vm}.$data` | 54 | | `vmProps` | `${this, vm}.$props` | 55 | | `vmEl` | `${this, vm}.$el` | 56 | | `vmOptions` | `${this, vm}.$options` | 57 | | `vmParent` | `${this, vm}.$parent` | 58 | | `vmRoot` | `${this, vm}.$root` | 59 | | `vmChildren` | `${this, vm}.$children` | 60 | | `vmSlots` | `${this, vm}.$slots` | 61 | | `vmScopedSlots` | `${this, vm}.$scopedSlots.default({})` | 62 | | `vmRefs` | `${this, vm}.$refs` | 63 | | `vmIsServer` | `${this, vm}.$isServer` | 64 | | `vmAttrs` | `${this, vm}.$attrs`| 65 | | `vmListeners` | `${this, vm}.listeners`| 66 | | `vmWatch` | `${this, vm}.$watch( expOrFn, callback, [options] )` | 67 | | `vmSet` | `${this, vm}.$set( object, key, value )` | 68 | | `vmDelete` | `${this, vm}.$delete( object, key )` | 69 | | `vmOn` | `${this, vm}.$on( event, callback )` | 70 | | `vmOnce` | `${this, vm}.$once( event, callback )` | 71 | | `vmOff` | `${this, vm}.$off( [event, callback] )` | 72 | | `vmEmit` | `${this, vm}.$emit( event, […args] )` | 73 | | `vmMount` | `${this, vm}.$mount( [elementOrSelector] )` | 74 | | `vmForceUpdate` | `${this, vm}.$forceUpdate()` | 75 | | `vmNextTick` | `${this, vm}.$nextTick( callback )` | 76 | | `vmDestroy` | `${this, vm}.$destroy()` | 77 | | `renderer` | `const renderer = require('vue-server-renderer').createRenderer()` | 78 | | `createRenderer` | `createRenderer({ })` | 79 | | `preventDefault` | `preventDefault();` | 80 | | `stopPropagation` | `stopPropagation();` | 81 | 82 |
83 | 84 | | Prefix | HTML Snippet Content | 85 | | ------ | ------------ | 86 | | `template` | `` | 87 | | `script` | `` | 88 | | `style` | `` | 89 | | `vText` | `v-text=msg` | 90 | | `vHtml` | `v-html=html` | 91 | | `vShow` | `v-show` | 92 | | `vIf` | `v-if` | 93 | | `vElse` | `v-else` | 94 | | `vElseIf` | `v-else-if` | 95 | | `vForWithoutKey` | `v-for` | 96 | | `vFor` | `v-for="" :key=""` | 97 | | `vOn` | `v-on` | 98 | | `vBind` | `v-bind` | 99 | | `vModel` | `v-model` | 100 | | `vPre` | `v-pre` | 101 | | `vCloak` | `v-cloak` | 102 | | `vOnce` | `v-once` | 103 | | `key` | `:key` | 104 | | `ref` | `ref`| 105 | | `slotA` | `slot=""`| 106 | | `slotE` | ``| 107 | | `slotScope` | `slot-scope=""`| 108 | | `component` | ``| 109 | | `keepAlive` | `` | 110 | | `transition` | `` | 111 | | `transitionGroup` | `` | 112 | | `enterClass` | `enter-class=''`| 113 | | `leaveClass` | `leave-class=''`| 114 | | `appearClass` | `appear-class=''`| 115 | | `enterToClass` | `enter-to-class=''`| 116 | | `leaveToClass` | `leave-to-class=''`| 117 | | `appearToClass` | `appear-to-class=''`| 118 | | `enterActiveClass` | `enter-active-class=''`| 119 | | `leaveActiveClass` | `leave-active-class=''`| 120 | | `appearActiveClass` | `appear-active-class=''`| 121 | | `beforeEnterEvent` | `@before-enter=''`| 122 | | `beforeLeaveEvent` | `@before-leave=''`| 123 | | `beforeAppearEvent` | `@before-appear=''`| 124 | | `enterEvent` | `@enter=''`| 125 | | `leaveEvent` | `@leave=''`| 126 | | `appearEvent` | `@appear=''`| 127 | | `afterEnterEvent` | `@after-enter=''`| 128 | | `afterLeaveEvent` | `@after-leave=''`| 129 | | `afterAppearEvent` | `@after-appear=''`| 130 | | `enterCancelledEvent` | `@enter-cancelled=''`| 131 | | `leaveCancelledEvent` | `@leave-cancelled=''`| 132 | | `appearCancelledEvent` | `@appear-cancelled=''`| 133 | 134 |
135 | 136 | | Prefix | Vue Router Snippet Content | 137 | | ------ | ------------ | 138 | | `routerLink` | `` | 139 | | `routerView` | `` | 140 | | `to` | `to=""` | 141 | | `tag` | `tag=""` | 142 | | `newVueRouter` | `const router = newVueRouter({ })` | 143 | | `routerBeforeEach` | `router.beforeEach((to, from, next) => { }` | 144 | | `routerBeforeResolve` | `router.beforeResolve((to, from, next) => { }` | 145 | | `routerAfterEach` | `router.afterEach((to, from) => { }` | 146 | | `routerPush` | `router.push()` | 147 | | `routerReplace` | `router.replace()` | 148 | | `routerGo` | `router.back()` | 149 | | `routerBack` | `router.push()` | 150 | | `routerForward` | `router.forward()` | 151 | | `routerGetMatchedComponents` | `router.getMatchedComponents()` | 152 | | `routerResolve` | `router.resolve()` | 153 | | `routerAddRoutes` | `router.addRoutes()` | 154 | | `routerOnReady` | `router.onReady()` | 155 | | `routerOnError` | `router.onError()` | 156 | | `routes` | `routes: []` | 157 | | `beforeEnter` | `beforeEnter: (to, from, next) => { }` | 158 | | `beforeRouteEnter` | `beforeRouteEnter (to, from, next) { }` | 159 | | `beforeRouteLeave` | `beforeRouteLeave (to, from, next) { }` | 160 | | `scrollBehavior` | `scrollBehavior (to, from, savedPosition) { }` | 161 | 162 |
163 | 164 | | Prefix | Vuex Snippet Content | 165 | | ------ | ------------ | 166 | | `newVuexStore` | `const store = new Vuex.Store({ })` | 167 | 168 | | Prefix | Nuxt.js Snippet Content | 169 | | ------ | ------------ | 170 | | `nuxt` | `` | 171 | | `nuxtChild` | `` | 172 | | `nuxtLink` | `` | 173 | | `asyncData` | `asyncData() {}` | 174 | 175 | ### Supported languages 176 | * vue(.vue) 177 | * HTML(.html) 178 | * javascript(.js) 179 | * typescript(.ts) 180 | * pug(.pug) 181 | 182 | ### Base on 183 | [vue-syntax-highlight (vue.tmLanguage)](https://github.com/vuejs/vue-syntax-highlight/blob/master/vue.tmLanguage) 184 | 185 | -------------------------------------- 186 | ##### 2020/07/27 (0.1.12) 187 | * Add snippets and fix bugs 188 | 189 | ##### 2019/01/27 (0.1.11) 190 | * Fix snippets 191 | 192 | ##### 2018/12/19 (0.1.10) 193 | * Update snippets (like `watchWithOptions` / `asyncData` / `nuxt` / `nuxtChild` / `nuxtLink` and so on) 194 | 195 | ##### 2018/09/04 (0.1.9) 196 | * Update snippets 197 | 198 | ##### 2018/06/24 (0.1.8) 199 | * Update snippets 200 | 201 | ##### 2018/06/05 (0.1.7) 202 | * Update snippets, add choices(`this` and `vm`) to snippets that begin with `vm`. 203 | 204 | ##### 2018/05/22 (0.1.6) 205 | * Update snippets 206 | 207 | ##### 2017/09/17 (0.1.5) 208 | * Fix and update snippets 209 | 210 | ##### 2017/03/12 (0.1.1) 211 | * Add support .pug files (thanks to [Gregory Bass](https://github.com/GriNAME)) 212 | 213 | ##### 2017/01/01 (0.1.0) 214 | * Update some snippets 215 | 216 | ##### 2016/12/31 (0.0.10) 217 | * Update newest api snippets (like `v-else-if` / `Vue.config.ignoredElements` and so on) 218 | * Fix a bug (before: `vm.off`,after:`vm.$off`) 219 | 220 | ##### 2016/12/15 (0.0.9) 221 | * Update newest syntax highlight file 222 | 223 | ##### 2016/11/13 (0.0.8) 224 | * Add some snippets 225 | * Change this extension's logo to vue's logo 226 | * Update readme 227 | 228 | ##### 2016/10/18 (0.0.7) 229 | * Fix `v-for` snippet (thanks to [Daniel D](https://github.com/djx339)) 230 | 231 | ##### 2016/10/18 (0.0.6) 232 | * Publish failed 233 | 234 | ##### 2016/10/16 (0.0.5) 235 | * Fix this extension can not be downloaded with the latest version(1.6.1) of VS code 236 | 237 | ##### 2016/10/15 (0.0.4) 238 | * Update readme 239 | 240 | ##### 2016/09/30 (0.0.1) 241 | * Add code snippets 242 | * Add syntax highlight 243 | -------------------------------------------------------------------------------- /img/VueInit.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hollowtree/vscode-vue-snippets/6d1c4f6b20e289d6c15a2f9ad87c47d0b4bbdefc/img/VueInit.gif -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hollowtree/vscode-vue-snippets/6d1c4f6b20e289d6c15a2f9ad87c47d0b4bbdefc/img/logo.png -------------------------------------------------------------------------------- /img/show.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hollowtree/vscode-vue-snippets/6d1c4f6b20e289d6c15a2f9ad87c47d0b4bbdefc/img/show.png -------------------------------------------------------------------------------- /img/show1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hollowtree/vscode-vue-snippets/6d1c4f6b20e289d6c15a2f9ad87c47d0b4bbdefc/img/show1.png -------------------------------------------------------------------------------- /img/show2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hollowtree/vscode-vue-snippets/6d1c4f6b20e289d6c15a2f9ad87c47d0b4bbdefc/img/show2.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-snippets", 3 | "displayName": "Vue 2 Snippets", 4 | "author": "hollowtree", 5 | "publisher": "hollowtree", 6 | "icon": "img/logo.png", 7 | "description": "A Vue.js 2 Extension", 8 | "license": "MIT", 9 | "version": "0.1.12", 10 | "engines": { 11 | "vscode": "^1.5.0" 12 | }, 13 | "keywords": [ 14 | "javascript", 15 | "snippet", 16 | "vue", 17 | "vue 2" 18 | ], 19 | "categories": [ 20 | "Programming Languages", 21 | "Snippets" 22 | ], 23 | "repository": { 24 | "type": "git", 25 | "url": "https://github.com/hollowtree/vscode-vue-snippets" 26 | }, 27 | "bugs": { 28 | "url": "https://github.com/hollowtree/vscode-vue-snippets/issues", 29 | "email": "smalltree@outlook.com" 30 | }, 31 | "contributes": { 32 | "languages": [ 33 | { 34 | "id": "vue", 35 | "aliases": [ 36 | "Vue", 37 | "vue" 38 | ], 39 | "extensions": [ 40 | ".vue" 41 | ] 42 | } 43 | ], 44 | "snippets": [ 45 | { 46 | "language": "javascript", 47 | "path": "./snippets/javascript.json" 48 | }, 49 | { 50 | "language": "typescript", 51 | "path": "./snippets/javascript.json" 52 | }, 53 | { 54 | "language": "html", 55 | "path": "./snippets/html.json" 56 | }, 57 | { 58 | "language": "vue-html", 59 | "path": "./snippets/html.json" 60 | }, 61 | { 62 | "language": "html", 63 | "path": "./snippets/vue.json" 64 | }, 65 | { 66 | "language": "vue", 67 | "path": "./snippets/javascript.json" 68 | }, 69 | { 70 | "language": "vue", 71 | "path": "./snippets/html.json" 72 | }, 73 | { 74 | "language": "vue", 75 | "path": "./snippets/vue.json" 76 | }, 77 | { 78 | "language": "jade", 79 | "path": "./snippets/pug.json" 80 | } 81 | ] 82 | } 83 | } -------------------------------------------------------------------------------- /snippets/html.json: -------------------------------------------------------------------------------- 1 | { 2 | "template": { 3 | "prefix": "template", 4 | "body": [ 5 | "" 10 | ], 11 | "description": "template element" 12 | }, 13 | "v-text": { 14 | "prefix": "vText", 15 | "body": [ 16 | "v-text=\"${1:msg}\"" 17 | ], 18 | "description": "Expects: string. Updates the element’s textContent." 19 | }, 20 | "v-html": { 21 | "prefix": "vHtml", 22 | "body": [ 23 | "v-html=\"${1:html}\"" 24 | ], 25 | "description": "Expects: string. Updates the element’s innerHTML." 26 | }, 27 | "v-show": { 28 | "prefix": "vShow", 29 | "body": [ 30 | "v-show=\"${1:condition}\"" 31 | ], 32 | "description": "Expects: any" 33 | }, 34 | "v-if": { 35 | "prefix": "vIf", 36 | "body": [ 37 | "v-if=\"${1:condition}\"" 38 | ], 39 | "description": "Expects: any" 40 | }, 41 | "v-else": { 42 | "prefix": "vElse", 43 | "body": [ 44 | "v-else" 45 | ], 46 | "description": "Does not expect expression. previous sibling element must have v-if or v-else-if." 47 | }, 48 | "v-else-if": { 49 | "prefix": "vElseIf", 50 | "body": [ 51 | "v-else-if=\"${1:condition}\"" 52 | ], 53 | "description": "Expects: any. previous sibling element must have v-if or v-else-if." 54 | }, 55 | "v-for-without-key": { 56 | "prefix": "vForWithoutKey", 57 | "body": [ 58 | "v-for=\"${1:item} in ${2:items}\"" 59 | ], 60 | "description": "Expects: Array | Object | number | string" 61 | }, 62 | "v-for": { 63 | "prefix": "vFor", 64 | "body": [ 65 | "v-for=\"(${1:item}, ${2:index}) in ${3:items}\" :key=\"${4:index}\"" 66 | ], 67 | "description": "Expects: Array | Object | number | string" 68 | }, 69 | "v-on": { 70 | "prefix": "vOn", 71 | "body": [ 72 | "v-on:${1:event}=\"${2:handle}\"" 73 | ], 74 | "description": "Expects: Function | Inline Statement" 75 | }, 76 | "v-bind": { 77 | "prefix": "vBind", 78 | "body": [ 79 | "v-bind$1=\"${2}\"" 80 | ], 81 | "description": "Expects: any (with argument) | Object (without argument)" 82 | }, 83 | "v-model": { 84 | "prefix": "vModel", 85 | "body": [ 86 | "v-model=\"${1:something}\"" 87 | ], 88 | "description": "Expects: varies based on value of form inputs element or output of components" 89 | }, 90 | "v-slot": { 91 | "prefix": "vSlot", 92 | "body": [ 93 | "v-slot$1=\"${2}\"" 94 | ], 95 | "description": "Expects: JavaScript expression that is valid in a function argument position (supports destructuring in supported environments). Optional - only needed if expecting props to be passed to the slot." 96 | }, 97 | "v-pre": { 98 | "prefix": "vPre", 99 | "body": [ 100 | "v-pre" 101 | ], 102 | "description": "Does not expect expression" 103 | }, 104 | "v-cloak": { 105 | "prefix": "vCloak", 106 | "body": [ 107 | "v-cloak" 108 | ], 109 | "description": "Does not expect expression" 110 | }, 111 | "v-once": { 112 | "prefix": "vOnce", 113 | "body": [ 114 | "v-once" 115 | ], 116 | "description": "Does not expect expression" 117 | }, 118 | "key": { 119 | "prefix": "key", 120 | "body": [ 121 | ":key=\"${1:key}\"" 122 | ], 123 | "description": "Expects: string. Children of the same common parent must have unique keys. Duplicate keys will cause render errors." 124 | }, 125 | "ref": { 126 | "prefix": "ref", 127 | "body": [ 128 | "ref=\"${1:reference}\"$0" 129 | ], 130 | "description": "Expects: string. ref is used to register a reference to an element or a child component. The reference will be registered under the parent component’s $refs object. If used on a plain DOM element, the reference will be that element; if used on a child component, the reference will be component instance." 131 | }, 132 | "slotA": { 133 | "prefix": "slotA", 134 | "body": [ 135 | "slot=\"$1\"$0" 136 | ], 137 | "description": "slot=''. Expects: string. Used on content inserted into child components to indicate which named slot the content belongs to." 138 | }, 139 | "slotE": { 140 | "prefix": "slotE", 141 | "body": [ 142 | "$2$0" 143 | ], 144 | "description": ". Expects: string. Used on content inserted into child components to indicate which named slot the content belongs to." 145 | }, 146 | "slotScope": { 147 | "prefix": "slotScope", 148 | "body": [ 149 | "slot-scope=\"$1\"$0" 150 | ], 151 | "description": "Used to denote an element or component as a scoped slot. The attribute’s value should be a valid JavaScript expression that can appear in the argument position of a function signature. This means in supported environments you can also use ES2015 destructuring in the expression. Serves as a replacement for scope in 2.5.0+." 152 | }, 153 | "scope": { 154 | "prefix": "scope", 155 | "body": [ 156 | "scope=\"${1:this api replaced by slot-scope in 2.5.0+}\"$0" 157 | ], 158 | "description": "Used to denote a