sdras / vue-vscode-snippets Goto Github PK

Please add in store modules scaffolding "vstore-module".

const state = () => ({
data: ''
});

const getters = {
};

const actions = {
};

const mutations = {
};

export default {
namespaced: true,
state,
getters,
actions,
mutations
};

Hi Sarah,

I'm a happy user of this extension. Thank you! 🙂

I would like to recommend an easy way to get an overview of the snippets. Maybe I can add this as recommendation to the README?

I switch between technologies regularly, which makes me prone to forget prefixes. To compensate for this, I wrote an extension that gives a nice UI for all available snippets. It is called Snippets Ranger, you can see a screenshot below. It's on the right.

While your README is ship-shape, others are not so conscientiousness! In any case, I find it great to have them all at my fingertips, with a few keystrokes, just like a snippet! It's a nice little win!

If you don't think it's appropriate, no problemo! 🙂

Best wishes

Rob

I've not been able to use any of the pug snippets. I guess, it could be related to the snippet configuration. Can you check it?

Hey Sarah. Thanks for sharing your snippets by making it an extension and marking Vetur as a dependency.

In the demo, some stuff were not working correctly, so I'm here to ask for your setup and make the right PR to improve the snippets.

1. Vetur offers some scaffold snippets, so vbase might be unnecessary

2. I didn't see the snippets showing up in your gif (they should show up like IntelliSense items). For example, how did you get vanim to expand in the <template> in your gif?

Here is how it should be:

3. Vetur divides vue files into "regions" with specific languages, and snippets should be declared according to the regions that they belong to. For example,

<template>
<!-- vue-html region -->
</template>
<!-- vue region -->
<style lang="scss">
.hi { // scss region
  color: red;  // scss region
}  // scss region
</style>
<!-- vue region -->

The idea is, each "region" has a language defined by lang value, with the exception of <template>, which has language vue-html.

Now you are marking everything as js snippets, so they would be available only in <script>, which is wrong for vanim etc:

The correct way is to divide template / js snippets into two files, and change the language associations (template to vue-html, js to javascript) in your contributes.snippets in package.json. Top level snippets, such as vbase should be associated for language vue.

Let me know how you want to proceed. I can soon send a PR that

• removes vbase as it's covered by scaffold snippets
• puts snippets into different files and associates them with correct languages

I'm just curious if you feel as though snippets directed at test files are out of the scope of this extension? I thought about making a separate extension, but I figured we could just add on to this one if you feel it's within the same scope?

i.e. using @testing-library/vue:

import { render } from '@testing-library/vue'
import MyComponent from '@/components/MyComponent.vue'

descibe('', () => {
    it('', () => {
        //... test...
    })
})

Why:

• User generated snippets can't be scoped by file extensions like *.spec.js.
• We should all probably write more tests, and testing boiler plate is obnoxious.

Edit: I should note that I bring this up because I'm willing to create some snippets. Just wondered if the interest was there :D

vrouter snippet has a curly brace where it should be a bracket.

`import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

export const router = new VueRouter({
base: '/',
mode: 'history',
routes: [
{ path: '/path', component: component }
}
});`

The gitignore snippet does not trigger in a .gitignore file, since VSCode autodetects these files as "Ignore"-filetype instead of "Plain Text".

Does this extention supports all version of vue? 2 to 3?

Hi!
My name is Ekaterina and I'm from the WebStorm team.
Thank you for building this collection of code snippets! We really like it!
We want to ask you permission to adapt them for WebStorm (and all other JetBrains IDEs) and make available as part of the Vue.js plugin we have. The plugin is open source, however, it only works with the paid IDE we have.
Thanks!

感觉挺好用的，极大简化开发工作。但是，how about webstrom? 支持webstrom么？

The first time I typed this command after install this snippet works well, but it only works well once.

Please add snippets for vue-router

vroutename
<router-link :to="{name: 'foo'}">link to foo</router-link>

vroutepath
<router-link to="/foo">link to foo</router-link>

And if possible, also include params/query
<router-link :to="{name: 'foo', params:{id: 2}}">link to foo</router-link>

Typing this is very tedious, and idk why, my vue custom snippets not working.

This may be personal preference, however when using vprops I typically am looking to create a prop that takes a String and that prop name is usually title.

Perhaps we could streamline things a bit more by changing the default vprops to these.

This isn't exactly generic but will do what snippets are supposed to do, which is help you work faster.

For now, I've just modified this in the snippets folder to cover this need for myself, but this will of course disappear whenever the extension is updated.

I just logged on to start working - and now every single vue file in my project is getting marked with an error message from Volar on every single line, even though I've been using Vetur for my project. This extension was being marked as the culprit. Can you please revert whatever changes you made?

Something like this would be useful for folks who use the library, vue-property-decorator for class styled components, and decorators.

<template>
  <div></div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
}
</script>

Thank you for these excellent snippets by the way.

it is showing this.${2:data} instead of this.data

It would be nice if these were available to typescript code as well.

With vetur, typescript snippets will work in a <script lang="ts"> section. Think the snippets just need to be registered as "typescript", as well as javascript.

I am missing vue 3 typescript class based component snippets. Any plans on implementing them?

I use it in vscode insider with remote devlopment extentions, but it no work.

Now rely on Vetur, It will support the Volar?

The theme is so soft, could you tell me about this ?   😂

I installed vue snippets, but its not work. Vetur is installed too

Why this snippets are based on Vetur? I like to use it with Volar. Is it possible?

Hi there!

I'm reaching out to you because we currently have your extension manually added to our extension gallery at Coder for code-server, and we're currently working on a migration to open-vsx, which is also used by other community VSCode forks (including, but not limited to Arch Linux's Code-OSS builds and VSCodium).

We (and other open source VSCode forks) cannot use Microsoft's extension gallery, as MS' terms of service allows only the proprietary MS products to interact with the official gallery.

We'd really appreciate it if you can add your extension to open-vsx! A simple guide on publishing extensions to Open-VSX is available here.

I think it will be more feature-packed if we can include a router method like push, replace, etc.

How to edit v-base template ?

Thank you

Test every component looks have a lot in common, can we make this a snippet ?

import Vue from 'vue'
import HelloWorld from '@/components/HelloWorld'

describe('HelloWorld.vue', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(HelloWorld)
    const vm = new Constructor().$mount()
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome to Your Vue.js App')
  })
})

I could not find an option to choose less as the preferred language for the template.

Nice extension, thx

Hey,

Thanks for the awesome snippets! I'm not sure when this changed, fairly recently, but the style's lang attribute in vbase now defaults to scss. I have to delete it every time I use vbase which is pretty often. Can we revert it back to what it was if possible?

Thanks

<style lang="scss" scoped>

</style>

First off, excellent set of snippets, thank you.

I'm walking through them all, and think I may have found bugs in beforeEach and afterEach for the Vue Router set.

I believe each should have a closing paren to match the opening. That is, for beforeEach:

"Vue Router beforeEach": { "prefix": "vbeforeeach", "body": [ "router.beforeEach((to, from, next) => {", "\t${1:next();}", "};" ], "description": "Vue Router global guards beforeEach" },

should be:

"Vue Router beforeEach": { "prefix": "vbeforeeach", "body": [ "router.beforeEach((to, from, next) => {", "\t${1:next();}", "});" ], "description": "Vue Router global guards beforeEach" },

nvm did it my own way

In Vuex mutation snippet there is a colon added after the mutation name.

Didn't see them listed in the snippets. Other than that, awesome extension!

I have one that's already kind of there, need to organize it a bit and put it in here.

Like

 metaInfo: {
    title: 'About '
  }

Wouldn't be useful?

Hello,

I know it might not be the best place to ask, but how to add a custom snippet that works only in vue-script?

I've tried to add a new file vue-script.json like your snippets, but VSCode didn't recognize it

At present, all the style labels are set as Sass. Could you please provide a less

Firstly, thank you for this very useful extension.

I wanted to ask if there was any way to change the number of spaces used for indentation from 4 to 2?

Hi, sdras!

At last month, Vue 3.0 was released, I using Vue 3.0 with the Composition Api and TypeScript now.

This vscode plugin is very good! But I encountered a little problem in the process of using.

example:

I can use this command ts to quickly create a Vue component.It's very convenient!

<template>
  <div>

  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup () {
    

    return {}
  }
})
</script>

<style scoped>

</style>

Then, if I want to start using the composition api to create some data or functions, follow the official specification, I must first define the variable and then return it to use.

The current problem is that through some shortcut commands, such as v3reactive, I can quickly create a variable, but cannot return it synchronously.

example:

import { defineComponent } from 'vue'

export default defineComponent({
  setup () {
    const name = reactive({
      count: 0
    })

    return {}
  }
})

I hope to help developers return these data synchronously when defining variables or functions.

Thank you very much!

Trying to install extension on older version(I run 1.14.2) of code trows an error:

Couldn't find a compatible version of Vue VSCode Snippets with this version of Code.

Downgrading vscode verision of engines in package would solve the problem.
It would be nice to support >=1.14, but feel free to close this issue if you don't see benefit of downgrading.

As said in the title, typing vbase autocompletes to the typescript snippet.

Making a PR