Skip to content

Commit 8010611

Browse files
ExEr7umExEr7um
authored
docs: Create a README (#17)
* Description and @sdras mention #8 * Contribution guide #8 * .vue files snippets #8 * vue-template snippets #8 * vue-script snippets #8 * pinia snippets #8 * vue-router snippets #8 * nuxt-template snippets #8 * nuxt-template snippets #8 * Add backticks for some scripts #8 * Hero gif #8
1 parent 03a618c commit 8010611

File tree

3 files changed

+123
-66
lines changed

3 files changed

+123
-66
lines changed

‎README.md

+122-65
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,122 @@
1-
# vue3-vscode-snippets README
2-
3-
This is the README for your extension "vue3-vscode-snippets". After writing up a brief description, we recommend including the following sections.
4-
5-
## Features
6-
7-
Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
8-
9-
For example if there is an image subfolder under your extension project workspace:
10-
11-
\!\[feature X\]\(images/feature-x.png\)
12-
13-
> Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.
14-
15-
## Requirements
16-
17-
If you have any requirements or dependencies, add a section describing those and how to install and configure them.
18-
19-
## Extension Settings
20-
21-
Include if your extension adds any VS Code settings through the `contributes.configuration` extension point.
22-
23-
For example:
24-
25-
This extension contributes the following settings:
26-
27-
* `myExtension.enable`: Enable/disable this extension.
28-
* `myExtension.thing`: Set to `blah` to do something.
29-
30-
## Known Issues
31-
32-
Calling out known issues can help limit users opening duplicate issues against your extension.
33-
34-
## Release Notes
35-
36-
Users appreciate release notes as you update your extension.
37-
38-
### 1.0.0
39-
40-
Initial release of ...
41-
42-
### 1.0.1
43-
44-
Fixed issue #.
45-
46-
### 1.1.0
47-
48-
Added features X, Y, and Z.
49-
50-
---
51-
52-
## Working with Markdown
53-
54-
You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
55-
56-
* Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux).
57-
* Toggle preview (`Shift+Cmd+V` on macOS or `Shift+Ctrl+V` on Windows and Linux).
58-
* Press `Ctrl+Space` (Windows, Linux, macOS) to see a list of Markdown snippets.
59-
60-
## For more information
61-
62-
* [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)
63-
* [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)
64-
65-
**Enjoy!**
1+
# Vue 3 VS Code Snippets
2+
3+
![vue3-vscode-snippets-hero](https://i.imgur.com/qlgaQhl.gif)
4+
5+
## Description
6+
7+
These snippets were made to speed up Vue 3 development. With it you can write boilerplate code infinitely faster.
8+
9+
> I took my inspiration from [vue-vscode-snippets](https://github.com/sdras/vue-vscode-snippets) extension made by @sdras.
10+
>
11+
> A lot of snippets here were taken from that extension and then improved by me to be more useful with Vue 3 (and Vue 3 only).
12+
13+
### Supported versions
14+
15+
- Vue 3
16+
17+
## Installation
18+
19+
- You can do it by finding `Vue 3 VSCode Snippets` by `exer7um` in VS Code marketplace and clicking install.
20+
- Or you can follow [that link](https://marketplace.visualstudio.com/items?itemName=exer7um.vue3-vscode-snippets) and click install.
21+
22+
## Snippets
23+
24+
### `.vue` files
25+
26+
| Snippet | Purpose |
27+
| ------------ | --------------------------------------------------------------------- |
28+
| `vbase` | Base for Vue 3 File with `<script setup>`, `TypeScript` and `SCSS` |
29+
| `vbase-sass` | Base for Vue 3 File with `<script setup>`, `TypeScript` and `SASS` |
30+
| `vbase-less` | Base for Vue 3 File with `<script setup>`, `TypeScript` and `LESS` |
31+
| `vbase-pcss` | Base for Vue 3 File with `<script setup>`, `TypeScript` and `PostCSS` |
32+
| `vbase-css` | Base for Vue 3 File with `<script setup>`, `TypeScript` and `CSS` |
33+
| `vbase-styl` | Base for Vue 3 File with `<script setup>`, `TypeScript` and `Stylus` |
34+
| `vbase-ns` | Base for Vue 3 File with `<script setup>`, `TypeScript` and no style |
35+
36+
### Template
37+
38+
| Snippet | Purpose |
39+
| -------------- | --------------------------------- |
40+
| `vfor` | `v-for` statement |
41+
| `vmodel` | `v-model` directive |
42+
| `von` | `v-on` click handler |
43+
| `vel-props` | Component element with `props` |
44+
| `vslot-named` | Named slot |
45+
| `vimg` | Image source binding |
46+
| `vstyle` | Inline style binding |
47+
| `vstyle-obj` | Inline style binding with objects |
48+
| `vclass` | Class binding |
49+
| `vclass-ter` | Ternary class binding |
50+
| `vtrans` | Transition component |
51+
| `vtrans-group` | Transition group component |
52+
| `vrlink` | Router link |
53+
| `vrlink-param` | Router link with param |
54+
55+
### Script
56+
57+
| Snippet | Purpose |
58+
| ------------------------ | ------------------------------------------- |
59+
| `vref` | Vue `ref` |
60+
| `vreactive` | Vue `reactive` |
61+
| `vcomputed` | Vue `computed` |
62+
| `vwatch` | Watcher |
63+
| `vwatcheffect` | Watch Effect |
64+
| `vonmounted` | onMounted hook |
65+
| `vonbeforemount` | onBeforeMount hook |
66+
| `vonbeforeupdate` | onBeforeUpdate hook |
67+
| `vonupdated` | onUpdated hook |
68+
| `vonerrorcaptured` | onErrorCaptured hook |
69+
| `vonunmounted` | onUnmounted hook |
70+
| `vonbeforeunmount` | onBeforeUnmount hook |
71+
| `vdefineprops` | Define props |
72+
| `vdefineemits` | Define emits |
73+
| `vdefineemits-nopayload` | Define emits with no payload |
74+
| `vsingleemit` | Single emit for defineEmits |
75+
| `vsingleemit-nopayload` | Single emit for defineEmits with no payload |
76+
77+
### Pinia
78+
79+
| Snippet | Purpose |
80+
| -------- | --------------------------------------- |
81+
| `pstore` | Base code needed for a Pinia store file |
82+
83+
### Vue Router
84+
85+
| Snippet | Purpose |
86+
| -------------------- | ----------------------------------------------- |
87+
| `vrouter` | Vue Router base |
88+
| `vscrollbehavior` | Vue Router `scrollBehavior` |
89+
| `vbeforeeach` | Vue Router global guards `beforeEach` |
90+
| `vbeforeresolve` | Vue Router global guards `beforeResolve` |
91+
| `vaftereach` | Vue Router global guards `afterEach` |
92+
| `vbeforeenter` | Vue Router per-route guard `beforeEnter` |
93+
| `vbeforerouteenter` | Vue Router component guards `beforeRouteEnter` |
94+
| `vbeforerouteupdate` | Vue Router component guards `beforeRouteUpdate` |
95+
| `vbeforerouteleave` | Vue Router component guards `beforeRouteLeave` |
96+
97+
### Nuxt Template
98+
99+
| Snippet | Purpose |
100+
| ------------- | --------------------------- |
101+
| `nlink` | Nuxt router link |
102+
| `nlink-param` | Nuxt router link with param |
103+
104+
### Nuxt Script
105+
106+
| Snippet | Purpose |
107+
| ----------------------- | -------------------------------------------- |
108+
| `nfetch` | `useFetch` composable |
109+
| `nfetch-lazy` | `useLazyFetch` composable |
110+
| `nasyncdata` | `useAsyncData` composable |
111+
| `nasyncdata-lazy` | `useLazyAsyncData` composable |
112+
| `nhead` | `useHead` composable |
113+
| `nhead-description` | `useHead` composable with description |
114+
| `nhead-template` | `useHead` composable with title template |
115+
| `npagemeta` | `definePageMeta` composable |
116+
| `npagemeta-description` | `definePageMeta` composable with description |
117+
118+
## Contributing
119+
120+
This is an open source project open to anyone. Contributors are welcome on [GitHub](https://github.com/exer7um/vue3-vscode-snippets).
121+
122+
If you are contributing a snippet, please be sure to add the documentation for it in the tables in the `README`, the pull request cannot be accepted without this addition. Thanks!

‎images/demo.gif

3.39 MB
Loading

‎snippets/vue-template.code-snippets

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
},
2626
"Vue Named Slot": {
2727
"prefix": "vslot-named",
28-
"body": ["<template v-slot:${0:name}>${1:defaultcontent}</template>"],
28+
"body": ["<template #${0:name}>${1:defaultcontent}</template>"],
2929
"description": "named slot"
3030
},
3131
"Vue Image Source Binding": {

0 commit comments

Comments
 (0)