⚡ Vue Supercharger
Language: English | 中文
Vue Supercharger is an extension designed to enhance Vue development by improving efficiency and the overall development experience. It automatically detects the Vue version in your workspace and provides corresponding features and snippets for Vue 2 or Vue 3 projects. The extension intelligently adapts to your project's needs, offering the most suitable functionality for your development workflow.
🌟 Features
- 💡 Vue Snippets: dramatically increase your coding speed and efficiency.
Vue Snippets :
Vue 3 Snippets
cr :
const foo = ref()
cro :
const foo = ref({})
cra :
const foo = ref([])
onBeforeMount:
onBeforeMount(() => {})
onMounted:
onMounted(() => {})
onBeforeUpdate:
onBeforeUpdate(() => {})
onUpdated:
onUpdated(() => {})
onBeforeUnmount:
onBeforeUnmount(() => {})
onUnmounted:
onUnmounted(() => {})
onActivated:
onActivated(() => {})
onDeactivated:
onDeactivated(() => {})
comp:
computed(() => {})
watch:
watch(foo, (newVal, oldVal) => {})
watchEffect:
watchEffect(() => {})
defineExpose:
defineExpose({})
defineOptions:
defineOptions({})
defineProps:
defineProps({})
defineEmits:
defineEmits([''])
setup:
setup(props){
}
provide:
provide('key', value)
vue :
<template>
<div></div>
</template>
<script setup lang="ts"></script>
<style scoped lang="less"></style>
Vue 2 Snippets
th:
this.
methods
methods: {
},
props
props: {
},
computed
computed: {
},
components
components: {
},
watch
watch: {
},
filters
filters: {
},
directives
directives: {
},
beforeCreate
beforeCreate(){},
created
created(){},
beforeMount
beforeMount(){},
mounted
mounted(){},
beforeUpdate
beforeUpdate(){},
updated
updated(){},
beforeDestroy
beforeDestroy(){},
destroyed
destroyed(){},
activated
activated(){},
deactivated
deactivated(){},
vue
<template>
<div></div>
</template>
<script>
export default {
name: '',
data() {
return {}
},
methods: {},
}
</script>
<style scoped lang="less"></style>
📄 Usage
- In
vue javascript typescript files, you can directly use the shortcut triggers to insert code snippets.
- The extension automatically selects the appropriate snippets based on the Vue version used in your project.
⚙️ Configuration
Vue Supercharger automatically switches between Vue versions based on your project, but you can customize the settings to match your preferences.
Settings
- Open Settings in VSCode.
- Search for Vue Supercharger to modify the configuration options.
🐛 FAQ
How do I switch Vue version support?
Vue Supercharger automatically detects the Vue version in your workspace, so manual switching is usually not required. If the detection is incorrect, you can click on the Vue version in the status bar to switch.
| |
