Merge branch 'master' into patch-1

Author: joshukraine

.gitignore

@@ -74,3 +74,4 @@ jspm_packages
 # VS Code
 vsc-extension-quickstart.md
 *.vsix
+.vscode

CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to the "vue-vscode-snippets" extension will be documented in
 
 Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
 
+## 1.9.0
+
+- New vbase support: LESS, SASS, Stylus, no CSS
+- Fix pug support
+- Fix brackets on vue router
+- New snippets: Nuxt page snippets
+
 ## 1.8.0
 
 - New snippet: Vue router

README.md

@@ -32,12 +32,16 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
 
 ### Vue
 
-| Snippet     | Purpose                                    |
-| ----------- | ------------------------------------------ |
-| `vbase`     | Single file component base with SCSS       |
-| `vbase-css` | Single file component base with CSS        |
-| `vbase-pcss`| Single file component base with PostCSS    |
-| `vbase-ts`  | Single file component base with Typescript |
+| Snippet      | Purpose                                    |
+| ------------ | ------------------------------------------ |
+| `vbase`      | Single file component base with SCSS       |
+| `vbase-css`  | Single file component base with CSS        |
+| `vbase-pcss` | Single file component base with PostCSS    |
+| `vbase-styl` | Single file component base with Stylus     |
+| `vbase-ts`   | Single file component base with Typescript |
+| `vbase-ns`   | Single file component with no styles       |
+| `vbase-sass` | Single file component base with SASS       |
+| `vbase-less` | Single file component base with LESS       |
 
 ### Template
 
@@ -131,6 +135,14 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
 | `nfont` | link to include fonts in a nuxt project, in nuxt-config |
 | `ncss`  | link to css assets such as normalize                    |
 
+### Nuxt Page
+
+| Snippet      | Purpose        |
+| ------------ | -------------- |
+| `nasyncdata` | Nuxt asyncData |
+| `nfetch`     | Nuxt Fetch     |
+| `nhead`      | Nuxt Head      |
+
 ### Extra (plaintext)
 
 | Snippet     | Purpose                 |

package.json

@@ -3,7 +3,7 @@
   "displayName": "Vue VSCode Snippets",
   "description": "Snippets that will supercharge your Vue workflow",
   "icon": "images/vue-logo.png",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "publisher": "sdras",
   "engines": {
     "vscode": "^1.14.0"
@@ -33,6 +33,10 @@
         "language": "vue",
         "path": "./snippets/vue.json"
       },
+      {
+        "language": "jade",
+        "path": "./snippets/vue-pug.json"
+      },
       {
         "language": "html",
         "path": "./snippets/vue-template.json"
@@ -57,6 +61,10 @@
         "language": "javascript",
         "path": "./snippets/nuxt-config.json"
       },
+      {
+        "language": "javascript",
+        "path": "./snippets/nuxt-script.json"
+      },
       {
         "language": "typescript",
         "path": "./snippets/vue-script.json"

snippets/nuxt-script.json

@@ -0,0 +1,37 @@
+{
+  "Nuxt Async": {
+    "prefix": "nasyncdata",
+    "body": [
+      "async asyncData ({ ${1:params} }) {",
+      "\tconst { data } = await fetch(`${2:endpoint}`).then(res => res.json())",
+      "\treturn { ${3:key}:${4:value} }",
+      "},"
+    ],
+    "description": "Nuxt asyncData"
+  },
+  "Nuxt Fetch": {
+    "prefix": "nfetch",
+    "body": [
+      "async fetch ({ store, ${1:params} }) {",
+      "\tlet { data } = await fetch('${2:endpoint}').then(res => res.json())",
+      "\tstore.commit('${3:MUTATION_TYPE}', data)",
+      "},"
+    ],
+    "description": "Nuxt Fetch"
+  },
+  "Nuxt Head": {
+    "prefix": "nhead",
+    "body": [
+      "head () {",
+      "\treturn {",
+      "\t\ttitle: ${1:'Page Title'},",
+      "\t\tmeta: [",
+      "\t\t\t// hid is used as unique identifier. Do not use `vmid` for it as it will not work",
+      "\t\t\t{ hid: 'description', name: 'description', content: ${2:'My custom description'} }",
+      "\t\t]",
+      "\t}",
+      "},"
+    ],
+    "description": "Nuxt Head"
+  }
+}

snippets/vue-script-router.json

@@ -12,7 +12,7 @@
       "\tmode: 'history',",
       "\troutes: [",
       "\t\t{ path: '/path', component: component }",
-      "\t}",
+      "\t]",
       "});"
     ],
     "description": "Base for Vue Router"
@@ -35,7 +35,7 @@
     "body": [
       "router.beforeEach((to, from, next) => {",
       "\t${1:next();}",
-      "};"
+      "});"
     ],
     "description": "Vue Router global guards beforeEach"
   },
@@ -44,26 +44,18 @@
     "body": [
       "router.beforeResolve((to, from, next) => {",
       "\t${1:next();}",
-      "};"
+      "});"
     ],
     "description": "Vue Router global guards beforeResolve"
   },
   "Vue Router afterEach": {
     "prefix": "vaftereach",
-    "body": [
-      "router.afterEach((to, from) => {",
-      "\t",
-      "};"
-    ],
+    "body": ["router.afterEach((to, from) => {", "\t", "});"],
     "description": "Vue Router global guards afterEach"
   },
   "Vue Router beforeEnter": {
     "prefix": "vbeforeenter",
-    "body": [
-      "beforeEnter(to, from, next) {",
-      "\t${1:next();}",
-      "},"
-    ],
+    "body": ["beforeEnter(to, from, next) {", "\t${1:next();}", "},"],
     "description": "Vue Router per-route guard beforeEnter"
   },
   "Vue Router beforeRouteEnter": {
@@ -77,20 +69,12 @@
   },
   "Vue Router beforeRouteUpdate": {
     "prefix": "vbeforerouteupdate",
-    "body": [
-      "beforeRouteUpdate(to, from, next) {",
-      "\t${1:next();}",
-      "},"
-    ],
+    "body": ["beforeRouteUpdate(to, from, next) {", "\t${1:next();}", "},"],
     "description": "Vue Router component guards beforeRouteUpdate"
   },
   "Vue Router beforeRouteLeave": {
     "prefix": "vbeforerouteleave",
-    "body": [
-      "beforeRouteLeave(to, from, next) {",
-      "\t${1:next();}",
-      "},"
-    ],
+    "body": ["beforeRouteLeave(to, from, next) {", "\t${1:next();}", "},"],
     "description": "Vue Router component guards beforeRouteLeave"
   },
   "Vue Router Route": {

snippets/vue-script.json

@@ -111,73 +111,73 @@
   "Vue Import Export": {
     "prefix": "vimport-export",
     "body": [
-      "import ${1:Name} from '@/components/${1:Name}.vue'",
+      "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 MapState": {
     "prefix": "vmapstate",
     "body": [
-      "import { mapState } from 'vuex'",
+      "import { mapState } from 'vuex';",
       "",
       "export default {",
       "\tcomputed: {",
       "\t\t...mapState([",
       "\t\t\t${1:'nameOfState'},",
       "\t\t])",
       "\t},",
-      "}"
+      "};"
     ],
     "description": "map getters inside a vue component"
   },
   "Vue MapGetters": {
     "prefix": "vmapgetters",
     "body": [
-      "import { mapGetters } from 'vuex'",
+      "import { mapGetters } from 'vuex';",
       "",
       "export default {",
       "\tcomputed: {",
       "\t\t...mapGetters([",
       "\t\t\t${1:'nameOfGetter'},",
       "\t\t])",
       "\t},",
-      "}"
+      "};"
     ],
     "description": "mapgetters inside a vue component"
   },
   "Vue MapMutations": {
     "prefix": "vmapmutations",
     "body": [
-      "import { mapMutations } from 'vuex'",
+      "import { mapMutations } from 'vuex';",
       "",
       "export default {",
       "\tmethods: {",
       "\t\t...mapMutations([",
       "\t\t\t${1:'nameOfMutation'}, //also supports payload `this.nameOfMutation(amount)` ",
       "\t\t])",
       "\t},",
-      "}"
+      "};"
     ],
     "description": "mapmutations inside a vue component"
   },
   "Vue MapActions": {
     "prefix": "vmapactions",
     "body": [
-      "import { mapActions } from 'vuex'",
+      "import { mapActions } from 'vuex';",
       "",
       "export default {",
       "\tmethods: {",
       "\t\t...mapActions([",
       "\t\t\t${1:'nameOfAction'}, //also supports payload `this.nameOfAction(amount)` ",
       "\t\t])",
       "\t},",
-      "}"
+      "};"
     ],
     "description": "mapactions inside a vue component"
   },
@@ -197,9 +197,9 @@
     "body": [
       "const ${1:mixinName} = {",
       "\tmounted() {",
-      "\t\tconsole.log('hello from mixin!')",
+      "\t\tconsole.log('hello from mixin!');",
       "\t},",
-      "}"
+      "};"
     ],
     "description": "vue mixin"
   },
@@ -221,14 +221,13 @@
   },
   "Vue Import Library": {
     "prefix": "vimport-lib",
-    "body": ["import { ${1:libName} } from '${1:libName}'"],
+    "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."
+    "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",
@@ -254,7 +253,7 @@
     "prefix": "vcommit",
     "body": [
       "${1:mutationName}() {",
-      "\tthis.\\$store.commit('${1:mutationName}', ${2:payload})",
+      "\tthis.\\$store.commit('${1:mutationName}', ${2:payload});",
       "}"
     ],
     "description": "commit to vuex store in methods for mutation"
@@ -263,35 +262,35 @@
     "prefix": "vdispatch",
     "body": [
       "${1:actionName}() {",
-      "\tthis.\\$store.dispatch('${1:actionName}', ${2:payload})",
+      "\tthis.\\$store.dispatch('${1:actionName}', ${2:payload});",
       "}"
     ],
     "description": "dispatch to vuex store in methods for action"
   },
   "Incrementer": {
     "prefix": "vinc",
-    "body": ["return ${1:this.num} += ${2:1}"],
+    "body": ["return ${1:this.num} += ${2:1};"],
     "description": "increment"
   },
   "Decrementer": {
     "prefix": "vdec",
-    "body": ["return ${1:this.num} -= ${2:1}"],
+    "body": ["return ${1:this.num} -= ${2:1};"],
     "description": "decrement"
   },
   "Unit Test": {
     "prefix": "vtest",
     "body": [
-      "import Vue from 'vue'",
-      "import ${1:HelloWorld} from './components/${1:HelloWorld}'",
+      "import Vue from 'vue';",
+      "import ${1:HelloWorld} from './components/${1:HelloWorld}';",
       "",
       "describe('${1:HelloWorld}.vue', () => {",
       "\tit('${2:should render correct contents}', () => {",
-      "\t\tconst Constructor = Vue.extend(${1:HelloWorld})",
-      "\t\tconst vm = new Constructor().$mount()",
+      "\t\tconst Constructor = Vue.extend(${1:HelloWorld});",
+      "\t\tconst vm = new Constructor().$mount();",
       "\t\texpect(vm.$el.querySelector('.hello h1').textContent)",
-      "\t\t\t.to.equal(${3:'Welcome to Your Vue.js App'})",
-      "\t})",
-      "})"
+      "\t\t\t.to.equal(${3:'Welcome to Your Vue.js App'});",
+      "\t});",
+      "});"
     ],
     "description": "unit test component"
   },

snippets/vue-template.json

@@ -91,12 +91,16 @@
   },
   "Vue Named Routing Link": {
     "prefix": "vroutename",
-    "body": ["<router-link :to=\"{name: '${1:name}'}\">${2:LinkTitle}</router-link>"],
+    "body": [
+      "<router-link :to=\"{name: '${1:name}'}\">${2:LinkTitle}</router-link>"
+    ],
     "description": "Named routing link"
-  }, 
+  },
   "Vue Named Routing Link with Params": {
     "prefix": "vroutenameparam",
-    "body": ["<router-link :to=\"{name: '${1:name}', params:{${2:id}: '${3:value}'} }\">${4:LinkTitle}</router-link>"],
+    "body": [
+      "<router-link :to=\"{name: '${1:name}', params:{${2:id}: '${3:value}'} }\">${4:LinkTitle}</router-link>"
+    ],
     "description": "Named routing link w/ params"
   },
   "Vue Path Routing Link": {