Skip to content

Commit 70f6b17

Browse files
sdrassdras
authored
Merge pull request sdras#10 from octref/master
Snippet refactor for sdras#9
2 parents ce09e83 + afe1568 commit 70f6b17

File tree

6 files changed

+371
-348
lines changed

6 files changed

+371
-348
lines changed

‎README.md

+24-19
Original file line numberDiff line numberDiff line change
@@ -30,26 +30,11 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
3030

3131
## Snippets
3232

33-
### Script
33+
### Vue
3434

3535
| Snippet | Purpose |
3636
| ---------------------- | ------------------- |
3737
| `vbase` | Single file component base |
38-
| `vdata` | Component data as a function |
39-
| `vmethod` | Vue method |
40-
| `vcomputed` | Vue computed property |
41-
| `vwatcher` | Vue watcher with new and old value args |
42-
| `vprops` | Props with type and default |
43-
| `vimport` | Import one component into another |
44-
| `vimport-c` | Import one component into another within the export statement |
45-
| `vimport-export` | Import one component into another and use it within the export statement |
46-
| `vfilter` | Vue filter |
47-
| `vmixin` | Create a Vue Mixin |
48-
| `vmixin-use` | Bring a mixin into a component to use |
49-
| `vc-direct` | Vue create a custom directive |
50-
| `vimport-lib` | Import a library |
51-
| `vimport-gsap` | Import GreenSock with Timeline and Eases |
52-
| `vanimhook-js` | Using the Transition component JS hooks in methods |
5338

5439
### Template
5540

@@ -68,12 +53,34 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
6853
| `vclass-obj-mult` | Multiple conditional class bindings |
6954
| `vanim` | Transition component with JS hooks |
7055

56+
### Script
57+
58+
| Snippet | Purpose |
59+
| ---------------------- | ------------------- |
60+
| `vdata` | Component data as a function |
61+
| `vmethod` | Vue method |
62+
| `vcomputed` | Vue computed property |
63+
| `vwatcher` | Vue watcher with new and old value args |
64+
| `vprops` | Props with type and default |
65+
| `vimport` | Import one component into another |
66+
| `vimport-c` | Import one component into another within the export statement |
67+
| `vimport-export` | Import one component into another and use it within the export statement |
68+
| `vfilter` | Vue filter |
69+
| `vmixin` | Create a Vue Mixin |
70+
| `vmixin-use` | Bring a mixin into a component to use |
71+
| `vc-direct` | Vue create a custom directive |
72+
| `vimport-lib` | Import a library |
73+
| `vimport-gsap` | Import GreenSock with Timeline and Eases |
74+
| `vanimhook-js` | Using the Transition component JS hooks in methods |
75+
| `vinc` | incrementer |
76+
| `vdec` | decrementer |
77+
7178
### Vuex
7279

7380
| Snippet | Purpose |
7481
| ---------------------- | ------------------- |
7582
| `vstore` | Base for Vuex store.js |
76-
| `vgetters` | Vuex Getter |
83+
| `vgetter` | Vuex Getter |
7784
| `vmutation` | Vuex Mutation |
7885
| `vaction` | Vuex Action |
7986
| `vstore-import` | Import vuex store into main.js |
@@ -83,8 +90,6 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
8390
| Snippet | Purpose |
8491
| ---------------------- | ------------------- |
8592
| `gitignore` | .gitignore file presets |
86-
| `vinc` | incrementer |
87-
| `vdec` | decrementer |
8893

8994

9095
## Contributing

‎package.json

+15-3
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,24 @@
3030
"path": "./snippets/vue.json"
3131
},
3232
{
33-
"language": "plaintext",
34-
"path": "./snippets/plaintext.json"
33+
"language": "html",
34+
"path": "./snippets/vue-template.json"
35+
},
36+
{
37+
"language": "vue-html",
38+
"path": "./snippets/vue-template.json"
3539
},
3640
{
3741
"language": "javascript",
38-
"path": "./snippets/vue.json"
42+
"path": "./snippets/vue-script.json"
43+
},
44+
{
45+
"language": "javascript",
46+
"path": "./snippets/vue-script-vuex.json"
47+
},
48+
{
49+
"language": "plaintext",
50+
"path": "./snippets/plaintext.json"
3951
}
4052
]
4153
}

‎snippets/vue-script-vuex.json

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
{
2+
"Vuex Store": {
3+
"prefix": "vstore",
4+
"body": [
5+
"import Vue from 'vue';",
6+
"import Vuex from 'vuex';",
7+
"",
8+
"Vue.use(Vuex);",
9+
"",
10+
"export const store = new Vuex.Store({",
11+
"\tstate: {",
12+
"\t\t${1:key}: ${2:value}",
13+
"\t}",
14+
"});"
15+
],
16+
"description": "Base for Vuex store"
17+
},
18+
"Vuex Getters": {
19+
"prefix": "vgetter",
20+
"body": [
21+
"getters: {",
22+
"\tvalue: ${1:value} => {",
23+
"\t\treturn state.${1:value};",
24+
"\t}",
25+
"}"
26+
],
27+
"description": "vuex getter"
28+
},
29+
"Vuex Mutation": {
30+
"prefix": "vmutation",
31+
"body": [
32+
"mutations: {",
33+
"\t${1:updateValue}(state, ${3:payload}) {",
34+
"\t\tstate.${2:value} = ${3:payload};",
35+
"\t}",
36+
"}"
37+
],
38+
"description": "vuex mutation"
39+
},
40+
"Vuex Action": {
41+
"prefix": "vaction",
42+
"body": [
43+
"actions: {",
44+
"\t${1:updateValue}({commit}, ${2:payload}) {",
45+
"\t\tcommit(${1:updateValue}, ${2:payload});",
46+
"\t}",
47+
"}"
48+
],
49+
"description": "vuex action"
50+
},
51+
"Vue Import Vuex Store": {
52+
"prefix": "vstore-import",
53+
"body": [
54+
"import { store } from './store/store';"
55+
],
56+
"description": "import vuex store into main.js"
57+
}
58+
}

‎snippets/vue-script.json

+177
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
{
2+
"Vue Data": {
3+
"prefix": "vdata",
4+
"body": [
5+
"data() {",
6+
"\treturn {",
7+
"\t\t${1:key}: ${2:value}",
8+
"\t}",
9+
"},"
10+
],
11+
"description": "Vue Component Data"
12+
},
13+
"Vue Methods": {
14+
"prefix": "vmethod",
15+
"body": [
16+
"methods: {",
17+
"\t${1:name}() {",
18+
"\t\t${0}",
19+
"\t}",
20+
"},"
21+
],
22+
"description": "vue method"
23+
},
24+
"Vue Computed": {
25+
"prefix": "vcomputed",
26+
"body": [
27+
"computed: {",
28+
"\t${1:name}() {",
29+
"\t\treturn this.${2:data} ${0}",
30+
"\t}",
31+
"},"
32+
],
33+
"description": "computed value"
34+
},
35+
"Vue Watchers": {
36+
"prefix": "vwatcher",
37+
"body": [
38+
"watch: {",
39+
"\t${1:data}(${2:newValue}, ${3:oldValue}) {",
40+
"\t\t${0}",
41+
"\t}",
42+
"},"
43+
],
44+
"description": "vue watcher"
45+
},
46+
"Vue Props with Default": {
47+
"prefix": "vprops",
48+
"body": [
49+
"props: {",
50+
"\t${1:propName}: {",
51+
"\t\ttype: ${2:number},",
52+
"\t\tdefault: ${0}",
53+
"\t},",
54+
"},"
55+
],
56+
"description": "Vue Props with Default"
57+
},
58+
"Vue Import File": {
59+
"prefix": "vimport",
60+
"body": [
61+
"import ${1:New} from './components/${1:New}.vue';"
62+
],
63+
"description": "Import one component into another"
64+
},
65+
"Vue Import into the Component": {
66+
"prefix": "vimport-c",
67+
"body": [
68+
"components: {",
69+
"\t${1:New},",
70+
"}"
71+
],
72+
"description": "Import one component into another, within export statement"
73+
},
74+
"Vue Import Export": {
75+
"prefix": "vimport-export",
76+
"body": [
77+
"import ${1:Name} from '~components/${1:Name}.vue'",
78+
"",
79+
"export default {",
80+
"\tcomponents: {",
81+
"\t\t${1:Name}",
82+
"\t},",
83+
"}"
84+
],
85+
"description": "import a component and include it in export default"
86+
},
87+
"Vue Filter": {
88+
"prefix": "vfilter",
89+
"body": [
90+
"filters: {",
91+
"\t${1:fnName}: function(${2:value}) {",
92+
"\t\treturn ${2:value}${0};",
93+
"\t}",
94+
"}"
95+
],
96+
"description": "vue filter"
97+
},
98+
"Vue Mixin": {
99+
"prefix": "vmixin",
100+
"body": [
101+
"const ${1:mixinName} = {",
102+
"\tmounted() {",
103+
"\t\tconsole.log('hello from mixin!')",
104+
"\t},",
105+
"}"
106+
],
107+
"description": "vue mixin"
108+
},
109+
"Vue Use Mixin": {
110+
"prefix": "vmixin-use",
111+
"body": [
112+
"mixins: [${1:mixinName}]"
113+
],
114+
"description": "vue use mixin"
115+
},
116+
"Vue Custom Directive": {
117+
"prefix": "vc-direct",
118+
"body": [
119+
"Vue.directive('${1:directiveName}', {",
120+
"\tbind(el, binding, vnode) {",
121+
"\t\tel.style.${2:arg} = binding.value.${2:arg};",
122+
"\t}",
123+
"});"
124+
],
125+
"description": "vue custom directive"
126+
},
127+
"Vue Import Library": {
128+
"prefix": "vimport-lib",
129+
"body": [
130+
"import { ${1:libName} } from '${1:libName}'"
131+
],
132+
"description": "import a library"
133+
},
134+
"Vue Import GSAP": {
135+
"prefix": "vimport-gsap",
136+
"body": [
137+
"import { TimelineMax, ${1:Ease} } from 'gsap'"
138+
],
139+
"description": "component methods options that dispatch an action from vuex store."
140+
},
141+
"Vue Transition Methods with JavaScript Hooks": {
142+
"prefix": "vanimhook-js",
143+
"body": [
144+
"methods: {",
145+
"\tbeforeEnter(el) {",
146+
"\t\tconsole.log('beforeEnter');",
147+
"\t},",
148+
"\tenter(el, done) {",
149+
"\t\tconsole.log('enter');",
150+
"\t\tdone();",
151+
"\t},",
152+
"\tbeforeLeave(el) {",
153+
"\t\tconsole.log('beforeLeave');",
154+
"\t}," ,
155+
"\tleave(el, done) {",
156+
"\t\tconsole.log('leave');",
157+
"\t\tdone();",
158+
"\t},",
159+
"},"
160+
],
161+
"description": "transition component js hooks"
162+
},
163+
"Incrementer": {
164+
"prefix": "vinc",
165+
"body": [
166+
"return ${1:this.num} += ${2:1}"
167+
],
168+
"description": "increment"
169+
},
170+
"Decrementer": {
171+
"prefix": "vdec",
172+
"body": [
173+
"return ${1:this.num} -= ${2:1}"
174+
],
175+
"description": "decrement"
176+
}
177+
}

0 commit comments

Comments
 (0)