In VSCode search for vue-script-setup-snippets extension and install it. or install directly from VSCode Marketplace
This extension adds snippets for Vue 3 script setup syntax.
Note:
1ドル,2ドル, etc. are placeholders. PressTabto jump between placeholders.
| Snippet | Purpose |
|---|---|
ss-file |
Vue 3 script setup file |
ss-file-ts |
Vue 3 script setup file with typescript |
ss-ref |
const 1ドル = ref(2ドル) |
ss-ref-ts |
const 1ドル: Ref<2ドル> = ref(3ドル) |
ss-props |
const 1ドル = defineProps<2ドル>() |
ss-props-ts |
const 1ドル = defineProps<2ドル>() |
ss-emit |
const 1ドル = defineEmit<2ドル>() |
ss-emit-ts |
const 1ドル = defineEmit<2ドル>() |
ss-context |
const 1ドル = defineContext<2ドル>() |
ss-context-ts |
const 1ドル = defineContext<2ドル>() |
ss-computed |
const 1ドル = computed(() => 2ドル) |
ss-computed-ts |
const 1ドル: Ref<2ドル> = computed(() => 3ドル) |
ss-watch |
watch(1,ドル (2ドル) => { 3ドル }) |
ss-watch-getter |
watch(()=>1,ドル (2ドル) => { 3ドル }) |
ss-ronly |
const 1ドル = readonly(2ドル) |
ss-ronly-ts |
const 1ドル: Readonly<Ref<2ドル>> = readonly(3ドル) |
ss-weffect |
watchEffect(() => { 1ドル }) |
ss-wpeffect |
watchPostEffect(() => { 1ドル }) |
ss-wseffect |
watchSyncEffect(() => { 1ドル }) |
ss-prvd |
const 1ドル = provide(2,ドル 3ドル) |
ss-prvd-ts |
const 1ドル: InjectionKey<2ドル> = provide(3,ドル 4ドル) |
ss-inject |
const 1ドル = inject(2,ドル 3ドル) |
ss-inject-ts |
const 1ドル: Ref<2ドル> = inject(3,ドル 4ドル) |
ss-mnt |
onMounted(() => { 1ドル }) |
ss-upd |
onUpdated(() => { 1ドル }) |
ss-umnt |
onUnmounted(() => { 1ドル }) |
ss-bmnt |
onBeforeMount(() => { 1ドル }) |
ss-bupd |
onBeforeUpdate(() => { 1ドル }) |
ss-bumnt |
onBeforeUnmount(() => { 1ドル }) |
ss-err |
onErrorCaptured(() => { 1ドル }) |
ss-rtrk |
onRenderTracked(() => { 1ドル }) |
ss-rtrg |
onRenderTriggered(() => { 1ドル }) |
ss-act |
onActivated(() => { 1ドル }) |
ss-dact |
onDeactivated(() => { 1ドル }) |
ss-spf |
onServerPrefetch(() => { 1ドル }) |
ss-isref |
isRef(1ドル) |
ss-unref |
unref(1ドル) |
ss-toref |
toRef(1,ドル 2ドル) |
ss-torefs |
toRefs(1ドル) |
ss-isprx |
isProxy(1ドル) |
ss-isrct |
isReactive(1ドル) |
ss-isrdo |
isReadonly(1ドル) |
ss-ssref |
shallowRef(1ドル) |
ss-trref |
triggerRef(1ドル) |
ss-csref |
customRef((1ドル) => { return { get: () => 2,ドル set: (3ドル) => 4ドル } }) |
ss-ssrct |
shallowReactive(1ドル) |
ss-ssrdo |
shallowReadonly(1ドル) |
ss-toraw |
toRaw(1ドル) |
ss-mkraw |
markRaw(1ドル) |
ss-efscp |
effectScope((1ドル) => { 2ドル }) |
ss-curscp |
getCurrentScope() |
ss-ondscp |
onScopeDispose(() => { 1ドル }) |