https://github.com/wejectchen/vue3-snippets-for-vscode
vue3 snippets extension for vscode
https://github.com/wejectchen/vue3-snippets-for-vscode
Last synced: 11 months ago
JSON representation
vue3 snippets extension for vscode
- Host: GitHub
- URL: https://github.com/wejectchen/vue3-snippets-for-vscode
- Owner: wejectchen
- License: mit
- Created: 2022-01-27T05:01:55.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-08-16T13:22:10.000Z (almost 4 years ago)
- Last Synced: 2025-02-24T06:32:32.870Z (over 1 year ago)
- Homepage: https://marketplace.visualstudio.com/items?itemName=wejectchan.vue3-snippets-for-vscode
- Size: 11.1 MB
- Stars: 7
- Watchers: 2
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue3-snippets-for-vscode
这是一个适配 Vue3 Api 的 snippets 插件
**新增特性: 支持快速 console.log，方便调试**
- 输入 `clg` 一键开起 console，然后直接输入需要打印的变量即可。
**注意** :本插件可能不完全适用于 vue2
## 大概这样用
# 特性
目前支持的代码片段
### 模版片段
| 关键词 | 代码片段 |
| :------: | :---------------------------------------------------------------------: |
| vinit | `` |
| template | `
` |
| scripte | `` |
| style | `` |
| css | `` |
| scss | `` |
| Sass | `` |
| Less | `` |
### script&vue 片段
| 关键词 | 代码片段 |
| :--------------: | :------------------------------------------: |
| clg | `console.log('output->${0}',${0:name})` |
| Import | `import {...} from '...'` |
| Data | `data(){return {...}}` |
| Setup | `setup(){...return{...}}` |
| vText | `v-text="..."` |
| vHtml | `v-html="..."` |
| vShow | `v-show="..."` |
| vIf | `v-if="..."` |
| velse | `v-else` |
| velseif | `v-else-if="..."` |
| vFor | `v-for="... in ..." :key="..."` |
| vFor(withoutKey) | `v-for="... in ..."` |
| vOn | `v-on="..."` |
| vBind | `v-bind="..."` |
| vModel | `v-model="..."` |
| vSlot | `v-slot="..."` |
| vOnce | `v-once` |
| iscomponent | `` |
| **vprops** | `const props = defineProps({ foo: String })` |
| **vemits** | `const emit = defineEmits(['...', '...'])` |
### vue-router 片段
| 关键词 | 代码片段 |
| :--------------: | :----------------------------------------------------: |
| beforeeach | `router.beforeEach((to, from, next) =>{...}` |
| beforeresolve | `router.beforeResolve((to, from, next) => {...}` |
| afterEach | `router.afterEach((to, from) => {...}` |
| beforeenter | `beforeEnter(to, from, next) {...}` |
| beforeRouteEnter | `beforeRouteEnter(to, from, next) {...}` |
| beforeRouteLeave | `beforeRouteLeave(to, from, next) {...}` |
| vroute | `{'path':...,name:...,component: () => import('...')}` |
**Enjoy!**