Skip to content

Snippet refactor for #9 #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 14, 2017
Merged

Snippet refactor for #9 #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6fad0e6
Snippet refactor for #9
octref Sep 11, 2017
afe1568
Move vinc and vdec
octref Sep 11, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 24 additions & 19 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,26 +30,11 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set

## Snippets

### Script
### Vue

| Snippet | Purpose |
| ---------------------- | ------------------- |
| `vbase` | Single file component base |
| `vdata` | Component data as a function |
| `vmethod` | Vue method |
| `vcomputed` | Vue computed property |
| `vwatcher` | Vue watcher with new and old value args |
| `vprops` | Props with type and default |
| `vimport` | Import one component into another |
| `vimport-c` | Import one component into another within the export statement |
| `vimport-export` | Import one component into another and use it within the export statement |
| `vfilter` | Vue filter |
| `vmixin` | Create a Vue Mixin |
| `vmixin-use` | Bring a mixin into a component to use |
| `vc-direct` | Vue create a custom directive |
| `vimport-lib` | Import a library |
| `vimport-gsap` | Import GreenSock with Timeline and Eases |
| `vanimhook-js` | Using the Transition component JS hooks in methods |

### Template

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

### Script

| Snippet | Purpose |
| ---------------------- | ------------------- |
| `vdata` | Component data as a function |
| `vmethod` | Vue method |
| `vcomputed` | Vue computed property |
| `vwatcher` | Vue watcher with new and old value args |
| `vprops` | Props with type and default |
| `vimport` | Import one component into another |
| `vimport-c` | Import one component into another within the export statement |
| `vimport-export` | Import one component into another and use it within the export statement |
| `vfilter` | Vue filter |
| `vmixin` | Create a Vue Mixin |
| `vmixin-use` | Bring a mixin into a component to use |
| `vc-direct` | Vue create a custom directive |
| `vimport-lib` | Import a library |
| `vimport-gsap` | Import GreenSock with Timeline and Eases |
| `vanimhook-js` | Using the Transition component JS hooks in methods |
| `vinc` | incrementer |
| `vdec` | decrementer |

### Vuex

| Snippet | Purpose |
| ---------------------- | ------------------- |
| `vstore` | Base for Vuex store.js |
| `vgetters` | Vuex Getter |
| `vgetter` | Vuex Getter |
| `vmutation` | Vuex Mutation |
| `vaction` | Vuex Action |
| `vstore-import` | Import vuex store into main.js |
Expand All @@ -83,8 +90,6 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
| Snippet | Purpose |
| ---------------------- | ------------------- |
| `gitignore` | .gitignore file presets |
| `vinc` | incrementer |
| `vdec` | decrementer |


## Contributing
Expand Down
18 changes: 15 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,24 @@
"path": "./snippets/vue.json"
},
{
"language": "plaintext",
"path": "./snippets/plaintext.json"
"language": "html",
"path": "./snippets/vue-template.json"
},
{
"language": "vue-html",
"path": "./snippets/vue-template.json"
},
{
"language": "javascript",
"path": "./snippets/vue.json"
"path": "./snippets/vue-script.json"
},
{
"language": "javascript",
"path": "./snippets/vue-script-vuex.json"
},
{
"language": "plaintext",
"path": "./snippets/plaintext.json"
}
]
}
Expand Down
58 changes: 58 additions & 0 deletions snippets/vue-script-vuex.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
{
"Vuex Store": {
"prefix": "vstore",
"body": [
"import Vue from 'vue';",
"import Vuex from 'vuex';",
"",
"Vue.use(Vuex);",
"",
"export const store = new Vuex.Store({",
"\tstate: {",
"\t\t${1:key}: ${2:value}",
"\t}",
"});"
],
"description": "Base for Vuex store"
},
"Vuex Getters": {
"prefix": "vgetter",
"body": [
"getters: {",
"\tvalue: ${1:value} => {",
"\t\treturn state.${1:value};",
"\t}",
"}"
],
"description": "vuex getter"
},
"Vuex Mutation": {
"prefix": "vmutation",
"body": [
"mutations: {",
"\t${1:updateValue}(state, ${3:payload}) {",
"\t\tstate.${2:value} = ${3:payload};",
"\t}",
"}"
],
"description": "vuex mutation"
},
"Vuex Action": {
"prefix": "vaction",
"body": [
"actions: {",
"\t${1:updateValue}({commit}, ${2:payload}) {",
"\t\tcommit(${1:updateValue}, ${2:payload});",
"\t}",
"}"
],
"description": "vuex action"
},
"Vue Import Vuex Store": {
"prefix": "vstore-import",
"body": [
"import { store } from './store/store';"
],
"description": "import vuex store into main.js"
}
}
177 changes: 177 additions & 0 deletions snippets/vue-script.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
{
"Vue Data": {
"prefix": "vdata",
"body": [
"data() {",
"\treturn {",
"\t\t${1:key}: ${2:value}",
"\t}",
"},"
],
"description": "Vue Component Data"
},
"Vue Methods": {
"prefix": "vmethod",
"body": [
"methods: {",
"\t${1:name}() {",
"\t\t${0}",
"\t}",
"},"
],
"description": "vue method"
},
"Vue Computed": {
"prefix": "vcomputed",
"body": [
"computed: {",
"\t${1:name}() {",
"\t\treturn this.${2:data} ${0}",
"\t}",
"},"
],
"description": "computed value"
},
"Vue Watchers": {
"prefix": "vwatcher",
"body": [
"watch: {",
"\t${1:data}(${2:newValue}, ${3:oldValue}) {",
"\t\t${0}",
"\t}",
"},"
],
"description": "vue watcher"
},
"Vue Props with Default": {
"prefix": "vprops",
"body": [
"props: {",
"\t${1:propName}: {",
"\t\ttype: ${2:number},",
"\t\tdefault: ${0}",
"\t},",
"},"
],
"description": "Vue Props with Default"
},
"Vue Import File": {
"prefix": "vimport",
"body": [
"import ${1:New} from './components/${1:New}.vue';"
],
"description": "Import one component into another"
},
"Vue Import into the Component": {
"prefix": "vimport-c",
"body": [
"components: {",
"\t${1:New},",
"}"
],
"description": "Import one component into another, within export statement"
},
"Vue Import Export": {
"prefix": "vimport-export",
"body": [
"import ${1:Name} from '~components/${1:Name}.vue'",
"",
"export default {",
"\tcomponents: {",
"\t\t${1:Name}",
"\t},",
"}"
],
"description": "import a component and include it in export default"
},
"Vue Filter": {
"prefix": "vfilter",
"body": [
"filters: {",
"\t${1:fnName}: function(${2:value}) {",
"\t\treturn ${2:value}${0};",
"\t}",
"}"
],
"description": "vue filter"
},
"Vue Mixin": {
"prefix": "vmixin",
"body": [
"const ${1:mixinName} = {",
"\tmounted() {",
"\t\tconsole.log('hello from mixin!')",
"\t},",
"}"
],
"description": "vue mixin"
},
"Vue Use Mixin": {
"prefix": "vmixin-use",
"body": [
"mixins: [${1:mixinName}]"
],
"description": "vue use mixin"
},
"Vue Custom Directive": {
"prefix": "vc-direct",
"body": [
"Vue.directive('${1:directiveName}', {",
"\tbind(el, binding, vnode) {",
"\t\tel.style.${2:arg} = binding.value.${2:arg};",
"\t}",
"});"
],
"description": "vue custom directive"
},
"Vue Import Library": {
"prefix": "vimport-lib",
"body": [
"import { ${1:libName} } from '${1:libName}'"
],
"description": "import a library"
},
"Vue Import GSAP": {
"prefix": "vimport-gsap",
"body": [
"import { TimelineMax, ${1:Ease} } from 'gsap'"
],
"description": "component methods options that dispatch an action from vuex store."
},
"Vue Transition Methods with JavaScript Hooks": {
"prefix": "vanimhook-js",
"body": [
"methods: {",
"\tbeforeEnter(el) {",
"\t\tconsole.log('beforeEnter');",
"\t},",
"\tenter(el, done) {",
"\t\tconsole.log('enter');",
"\t\tdone();",
"\t},",
"\tbeforeLeave(el) {",
"\t\tconsole.log('beforeLeave');",
"\t}," ,
"\tleave(el, done) {",
"\t\tconsole.log('leave');",
"\t\tdone();",
"\t},",
"},"
],
"description": "transition component js hooks"
},
"Incrementer": {
"prefix": "vinc",
"body": [
"return ${1:this.num} += ${2:1}"
],
"description": "increment"
},
"Decrementer": {
"prefix": "vdec",
"body": [
"return ${1:this.num} -= ${2:1}"
],
"description": "decrement"
}
}
Loading