Skip to content

xianghongai/vscode-vue3-snippets

BranchesTags

Repository files navigation

Vue 3 Snippet (Visual Studio Code)

⚡ Code snippets for Vue (Only Vue 3.x, Vue Router 4.x).

Extension's page on Visual Studio Marketplace, 📖 reading feels better.

This extension is not recommended for Vue 2.x, Please create Profiles in VS Code and install the Vue 2.x technology stack extension, such as Vue 2 Snippets.

本扩展不推荐用于 Vue 2.x 版本，请在 VS Code 创建 Profiles 安装 Vue 2.x 技术栈扩展，如：Vue 2 Snippets。

Introduction 📚

There is no need to deliberately memorize it, you can generate code according to the Vue API partial abbreviations, and special handling required to reduce conflicts. You only need to understand the Extension design rules of this extension to release your energy.

--

框架，框架，有别于灵活的语言，框架就是限定了各种条条框框，让开发者在限/约定的 API 中做事情；因此，开发者在编码过程中，在框架层面输入的字符要少之有少，应当通过代码片段或 AIGC 快速创建框架相关的代码结构，将更多的精力聚焦在业务逻辑代码上；本扩展就是用于辅助生成框架侧的代码。

本扩展提供了 Vue 3 技术栈的代码片段，包括 Options API 、Composition API 和 Vue Router 4.x。

理解本扩展的设计之后 (Vue API 部分缩写，以及减少冲突需要特别的处理方式)，几乎没有记忆成本，至少能帮助您提升 60% 的效率 ヾ(´︶`*)ﾉ♬ (Vue3 很多 Composition API 更接近语言了，不像 Options API 那样模式化)

例如，监听一个 Props 值：

watch(
  () => props.property,
  async (newValue) => {

  },
  {
    deep: true,
    immediate: true,
  }
);

To get the above code, you only need to understand it as: watch props deep immediate, and then enter wpsdi through VS Code's Suggest Match and press Enter.

想得到上面这一段代码，只需要理解为：watch props deep immediate, 然后通过 VS Code 自带的联想功能，输入 wpsdi 回车即可。

再例如，声明一个 Props 属性：

property: {
  type: Object,
  default() {
    return {};
  },
  required: true,
},

Same as above...

想得到上面这一段代码，只需要下意识的理解为：props Object default required， 然后通过 VS Code 自带的联想功能，输入 psOdr 回车即可 (注意大小写)，或者通过本扩展内置的 podr 缩写前缀直接生成。

仅高频常用代码提供缩写前缀。

又例如，我们在创建 .vue 文件后，要书写基本的 SFC 元素，本扩展提供许多便捷的代码片断，具体参考 〖Single-File Components / 单文件组件〗 章节内容。

Snippets 🚀

  • Single-File Components / 单文件组件
  • Vue Language Blocks / SFC 语法定义
  • Props Property
  • Computed
  • Watch (Composition API)
  • Watch (Options API)
  • Lifecycle Hooks (Composition API)
  • Lifecycle Hooks (Options API)
  • Options API
  • Instance Properties & Methods
  • Built-ins Directives
  • Built-ins Components & Special Elements
  • Vue Router v4.x
  • Vue Route v4.x - Custom Component

Recommended editor settings (建议配置编辑器):

"editor.inlineSuggest.enabled": true,
"editor.suggestSelection": "first",
"editor.suggest.localityBonus": true,
"editor.suggest.preview": true,

Single-File Components / 单文件组件

The vue prefix generates Vue Single-File Components, Some examples:

通过 vue 前缀触发，包涵大量创建 Vue 单文件组件的代码片段，部分示例如下：

Prefix VS Code Suggest Match Snippet
vue

vue-composition-api		 <template>
  <div>
    <!-- -->
  </div>
</template>

<script setup>

</script>
vue

vue-composition-api-hook		 <template>
  <div>
    <!-- -->
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const feature = ref();

    return {
      
    };
  },
};
</script>
vue

vue-options-api		 <template>
  <div>
    <!-- -->
  </div>
</template>

<script>
export default {
  name: 'TestIndex',

  data() {
    return {
      
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>
...

Full prefix screenshot (SFC) / 完整前缀截图 (单文件组件):

Vue Language Blocks / SFC 语法定义

The vue-script prefix generates <script> language block, which contains a variety of API style scripting language blocks.

The vue-style prefix generates a <style> language block, which contains different style preprocessing language blocks.

--

vue-script 前缀生成 <script> 语言块，包含不同风格脚本语言块；

vue-style 前缀生成 <style> 语言块，包含不同样式预处理语言块。

Prefix VS Code Suggest Match Snippet
vue-script

vue-script-options-api		 <script>
export default {
  name: 'TestIndex',

  data() {
    return {
      
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>
vue-script

vue-script-composition-api		 <script setup>

</script>
vue-script

vue-script-composition-api-hook		 <script>
import { ref } from 'vue';

export default {
  setup() {
    const feature = ref();

    return {
      
    };
  },
};
</script>
vue-style-scss <style lang="scss" scoped>

</style>
vue-style-less <style lang="less" scoped>

</style>
...

Full prefix screenshot (Language Blocks) / 完整前缀截图 (SFC 语法定义):

Props Property

  1. 直接生成 (Prefix)：ps = Props, String.
  2. 联想匹配 (Suggest Match)：pssdr = Props, String, default, required.

不同类型以此类推：

  • String，
  • Number，
  • Boolean，
  • Array，
  • Object，
  • Date，
  • Function，
  • Symbol，
  • Promise。
Prefix VS Code Suggest Match Snippet
props-String / ps pss property: String,
props-String-default / psd pssd property: {
  type: String,
  default: undefined,
},
props-String-required / psr pssr property: {
  type: String,
  required: true,
},
props-String-default-required / psdr pssdr property: {
  type: String,
  default: undefined,
  required: true,
},
...

Full prefix screenshot (Props) / 完整前缀截图:

Computed

Prefix VS Code Suggest Match Snippet
computed-property cp property() {
  return this.property;
},
computed-property-get-set property: {
  get() {
    return this.value;
  },
  set(val) {
    this.value = val;
  },
},
computed c const feature = computed(() => state.value);
computed-get-set const feature = computed({
  get: () => state.value,
  set: (newValue) => {
    state.value = newValue;
  },
});

The prefix screenshot (Computed) / 前缀截图:

Watch (Composition API)

  1. 直接生成 (Prefix)：wdi = watch-props-deep-immediate
  2. 联想匹配 (Suggest Match)：wps = watch-props。
Prefix VS Code Suggest Match Snippet
watch-props watch(
  () => props.property,
  async (newValue, oldValue) => {
    
  },
);
watch-props-deep wd watch(
  () => props.property,
  async (newValue, oldValue) => {
    
  },
  {
    deep: true,
  }
);
watch-props-immediate wi watch(
  () => props.property,
  async (newValue, oldValue) => {
    
  },
  {
    immediate: true,
  }
);
watch-props-deep-immediate wdi watch(
  () => props.property,
  async (newValue, oldValue) => {
    
  },
  {
    deep: true,
    immediate: true,
  }
);
watch-multiple-props-immediate wmi watch(
  [() => props.property1, () => props.property2],
  async ([property1, property2]) => {
    
  },
  {
    immediate: true,
  }
);
watchEffect wef watchEffect(async () => {
  
});
watchPostEffect wpef watchPostEffect(async () => {
  
});
watchSyncEffect wsef watchSyncEffect(() => {
  
});

The prefix screenshot (Watch) / 前缀截图:

Watch (Options API)

  1. 直接生成 (Prefix)：wp = watch-property。
  2. 联想匹配 (Suggest Match)：wpdi = watch-property-deep-immediate。
Prefix VS Code Suggest Match Snippet
watch-property wp property (newValue, oldValue) {
  
},
watch-property-deep wpd property: {
  deep: true,
  handler(newValue, oldValue) {
    
  },
},
watch-property-immediate wpi property: {
  immediate: true,
  handler(newValue, oldValue) {
    
  },
},
watch-property-deep-immediate wpdi property: {
  deep: true,
  immediate: true,
  handler(newValue, oldValue) {
    
  },
},

The prefix screenshot (Watch) / 前缀截图:

Lifecycle Hooks (Composition API)

The on prefix generates Vue Lifecycle Hooks, Some examples:

--

通过 on 前缀触发，包涵所有生成 Vue 生命周期钩子的代码片段，示例如下：

Prefix VS Code Suggest Match Snippet
onBeforeMount onbm onBeforeMount(() => {
  
});
onMounted onm onMounted(() => {
  
});
onBeforeUpdate onbup onBeforeUpdate(() => {
  
});
onUpdated onup onUpdated(() => {
  
});
onBeforeUnmount onbu onBeforeUnmount(() => {
  
});
onUnmounted onum onUnmounted(() => {
  
});
onActivated ona onActivated(() => {
  
});
onDeactivated onda onDeactivated(() => {
  
});
async-onBeforeMount asonbm onBeforeMount(async () => {
  
});
async-onMounted asonm onMounted(async () => {
  
});

The prefix screenshot (Lifecycle Hooks) / 前缀截图:

Lifecycle Hooks (Options API)

Just ol*...

只要理解 ol 是 Options API Lifecycle Hooks 的缩写，并记忆 Vue3 生命周期钩子，然后就能释放你的能量了。

Prefix VS Code Suggest Match Snippet
option-beforeCreate() olbc beforeCreate() {
  
},
option-created() olc created() {
  
},
option-beforeMount() olbm beforeMount() {
  
},
option-mounted() olm mounted() {
  
},
option-beforeUpdate() olbu beforeUpdate() {
  
},
option-updated() olu updated() {
  
},
option-activated() ola activated() {
  
},
option-deactivated() olda deactivated() {
  
},
option-beforeDestroy() olbd beforeDestroy() {
  
},
option-destroyed() old destroyed() {
  
},
async-option-created() asolc async created() {
  
},
async-option-mounted() asolm async mounted() {
  
},

The prefix screenshot (Lifecycle Hooks) / 前缀截图:

Options API

The option- prefix generates Vue Options API Code, Examples:

--

通过 option- 前缀触发，包涵所有生成 Vue 选项式 API 的代码片段，示例如下：

Prefix VS Code Suggest Match Snippet
option-name name: 'FileName',
option-components

ocs		 components: { Feature },
option-directives

ods		 directives: {
  
},
option-props

ops		 opps props: {
  
},
option-provide()

ope		 provide() {
  return {
    property: 'value',
  };
},
option-inject

oit		 inject: ['property'],
option-data()

od		 opd data() {
  return {
    property: 'value',
  };
},
option-computed

oc		 opc computed: {
  property() {
    return this.property;
  },
},
option-watch

ow		 opw watch: {
  
},
option-methods

om		 opm methods: {
  methodProperty() {
    
  },
},
methods-property

mp		 methodProperty() {
  
},
option-emits emits: ['eventName'],
option-expose expose: ['publicMethod'],
option-render render(h, context) {
  return h('tag', []);
},
...

The prefix screenshot (Options API) / 前缀截图 (选项式 API):

Instance Properties & Methods

All instance properties and methods are triggered with the vm prefix, such as:

所有实例属性和方法都以 vm 前缀触发，部分示例如下：

Prefix VS Code Suggest Match Snippet
vm-nextTick this.$nextTick().then(() => {
  
});
await-vm-nextTick / vmnt awvmnt await this.$nextTick();
vm-emit vmem this.$emit('event-name', param);
nt / await-nextTick awnt await nextTick();
nextTick ntt nextTick().then(() => {
  
});
emit emit('event-name', param);
...

Full prefix screenshot (Vue Instance) / 完整前缀截图 (Vue 实例):

Built-ins Directives

The v prefix generates Vue Directives, some examples:

v 前缀触发，包涵大量 Vue 模板语法代码片段，部分示例如下：

Prefix VS Code Suggest Match Snippet
v-for vf v-for="item in items" :key="item"
v-for-index vfi v-for="(item, index) in items" :key="index"
v-if v-if="condition"
v-else-if v-else-if="condition"
v-show v-show="condition"
v-on @click="handler"
v-on-prevent @click.prevent="handler"
v-on-stop @click.stop="handler"
v-on-prevent-stop @click.stop.prevent="handler"
v-on-keyAlias @keyup.enter="handler"
v-on-once @click.once="handler"
v-slot-named vsn <template #default>
  
</template>
v-slot-named-props vsnp <template #default="slotProps">
  
</template>
...

Full prefix screenshot (v-) / 完整前缀截图 (Vue 内置指令):

Built-ins Components & Special Elements

Prefix VS Code Suggest Match Snippet
transition <transition name="name">
  
</transition>
transition-group tg <transition-group name="list" tag="ul">
  
</transition-group>
keep-alive ka <keep-alive>
  
</keep-alive>
suspense <suspense>
  
  <template #fallback>
    
  </template>
</suspense>
teleport <teleport to="selector">
  
</teleport>
slot <slot></slot>
slot-named sn <slot name="default"></slot>
slot-named-props snp <slot name="default" :prop="var"></slot>
...

(1). Transition classes / 用于自定义过渡 class Props

(2). Transition events / 过渡事件

(3). Transition css / 过渡 CSS 类

css-transitions。

Vue Router v4.x

The route-/vmroute- or router-/vmrouter- prefix generates Vue Router, Some examples:

如果是 Composition API，可通过 route- 或 router- 前缀触发；

如果是 Options API，可通过 vmroute- 或 vmrouter- 前缀触发。

包涵大量 Vue Router v4.x API 代码片段，部分示例如下：

Prefix VS Code Suggest Match Snippet
createRouter import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes,
});

// app.use(router);
export default router;
useRoute const route = useRoute();
useRouter const router = useRouter();
useLink const { href, isActive, isExactActive, navigate, route } = useLink({
  to: '/pathname'
});
onBeforeRouteUpdate onBeforeRouteUpdate(async (to, from) => {
  
});
onBeforeRouteLeave onBeforeRouteLeave(async (to, from) => {
  
});
route {
  path: 'pathName',
  component: Feature,
},
route-name {
  path: '/pathName',
  name: 'routeName',
  component: Feature,
},
route-redirect-name {
  path: '/feature/:id',
  redirect: {
    name: 'routeName',
  },
},
router-push-name-params-query router.push({
  name: 'routename',
  params: { property: 'value' },
  query: { property: 'value' },
});
vm-router-push-name-params-query this.$router.push({
  name: 'routename',
  params: { property: 'value' },
  query: { property: 'value' },
});
router-beforeEach router.beforeEach((to, from) => {
  
});
option-route-beforeRouteLeave beforeRouteLeave(to, from) {
  
},
...

Full prefix screenshot (Vue Router) / 完整前缀截图 (Vue 路由):

(1). Define Route / 定义路由

(2). Router Instance (Options API) / Router 实例 (选项式接口)

(3). Route Property (Options API) / Route 属性 (选项式接口)

(4). Router Instance (Composition API) / Router 实例 (组合式接口)

Vue Route v4.x - Custom Component

Prefix VS Code Suggest Match Snippet
router-view rv <router-view></router-view>
router-view-named rvn <router-view name="default"></router-view>
router-link rl <router-link :to="">
  
</router-link>
router-link-named-params-query rlnpq <router-link
  :to="{
    name: 'routeName',
    params: { property: 'value' },
    query: { property: 'value' },
  }"
>
  
</router-link>
router-params params: {
  property: 'value',
},
router-query query: {
  property: 'value',
},
...

Full prefix screenshot (Vue Router Custom Component) / 完整前缀截图 (Vue 路由自定义组件):

<router-link>

<router-view>

Why isn't there Pinia? / 为什么没有 Pinia

In Vue 2.x, Vuex is used, while in Vue 3.x, Pinia is adopted. There are costs associated with migrating at the project level. Reusing components at the component level couples them with the state management library. Using a state library doesn't make much sense; state sharing can be achieved entirely through Vue Dependency Injection.

--

Vue 2.x 中采用 VueX，Vue 3.x 采用 Pinia，项目级别迁移有成本，组件级别复用耦合了状态管理库，用状态库没多大意义，状态共享完全可以通过 Vue 依赖注入实现。

Supported languages (file extensions) 🌈

  • JavaScript (.js)
  • TypeScript (.ts)
  • HTML (.html)
  • Vue (.vue)
  • CSS (.css)

Resources 🤞

License 📃

MIT License.

Donate 🎉

xianghongai@gmail.com

About

Code snippets for Vue 3

Resources

Readme

License

MIT license
Activity

Stars

9 stars

Watchers

2 watching

Forks

3 forks
Report repository

Releases

3 tags

Packages

No packages published

Contributors 2

  •  
  •  

Languages