Vue 2 Snippets installs statistics

Vue 2 Snippet (Visual Studio Code)

<p> <a href="https://github.com/xianghongai/vscode-vue2-snippets"> <img src="https://img.shields.io/github/repo-size/xianghongai/vscode-vue2-snippets?color=4ac51c&style=plastic" alt="Repo Size"> </a> <a href="https://marketplace.visualstudio.com/items?itemName=nicholashsiang.vscode-vue2-snippets"> <img src="https://vsmarketplacebadges.dev/version/nicholashsiang.vscode-vue2-snippets.svg?style=plastic&color=4ac51c" alt="Visual Studio Marketplace Version"> </a> <a href="https://marketplace.visualstudio.com/items?itemName=nicholashsiang.vscode-vue2-snippets"> <img src="https://vsmarketplacebadges.dev/downloads-short/nicholashsiang.vscode-vue2-snippets.svg?style=plastic&color=4ac51c" alt="Downloads"> </a> <a href="https://marketplace.visualstudio.com/items?itemName=nicholashsiang.vscode-vue2-snippets"> <img src="https://vsmarketplacebadges.dev/rating-short/nicholashsiang.vscode-vue2-snippets.svg?style=plastic&color=4ac51c" alt="Rating"> </a> <a href="https://github.com/xianghongai/vscode-vue2-snippets/blob/HEAD/LICENSE"> <img src="https://img.shields.io/github/license/xianghongai/vscode-vue2-snippets?color=4ac51c&style=plastic" alt="License"> </a> </p>

⚡ Code snippets for Vue (Only Vue 2.x, Vue Router 3.x, @vue/composition-api).

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

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

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

Introduction 📚

"YES, YES, VERY SMOOTH, SUPER SMOOTH".

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.

--

来自一线、为了顺手调了又调的扩展 😎。

理解本扩展的设计之后 (Vue API 部分缩写，以及减少冲突需要特别的处理方式)，无需刻意去死记硬背，几乎没有记忆成本，释放你的小宇宙！ ヾ(´︶`*)ﾉ♬

Design 🖖

Forget the framework, Focus on the business.

--

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

本扩展提供了 Vue 2 技术栈的代码片段，包括 Options API 、Composition API 和 Vue Router 3.x，支持 @vue/composition-api 及 unplugin-vue2-script-setup 机制下的语法。

例如，监听一个值：

property: {
  deep: true,
  immediate: true,
  handler(newValue, oldValue) {

  },
},

To get the above code, you only need to understand it as: <small><em><strong><u style="color: red;">w</u></strong>atch <strong><u style="color: red;">p</u></strong>roperty <strong><u style="color: red;">d</u></strong>eep <strong><u style="color: red;">i</u></strong>mmediate</em></small>, and then enter wpdi through VS Code's Suggest Match and press Enter.

想得到上面这一段代码，只需要理解为：<small><em><strong><u style="color: red;">w</u></strong>atch <strong><u style="color: red;">p</u></strong>roperty <strong><u style="color: red;">d</u></strong>eep <strong><u style="color: red;">i</u></strong>mmediate</em></small>, 然后通过 VS Code 自带的联想功能，输入 wpdi 回车即可。

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

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

Same as above...

想得到上面这一段代码，只需要理解为：<small><em><strong><u style="color: red;">p</u></strong>rop<strong><u style="color: red;">s</u></strong> <strong><u style="color: red;">O</u></strong>bject <strong><u style="color: red;">d</u></strong>efault <strong><u style="color: red;">r</u></strong>equired</em></small>， 然后通过 VS Code 自带的联想功能，输入 psOdr 回车即可 (注意大小写，减少冲突)，或者通过本扩展内置的 podr 缩写前缀直接生成。

仅高频常用代码提供<u><strong>缩写</strong></u>前缀。

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

Snippets 🚀

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

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

"editor.snippetSuggestions": "top",

Single-File Components / 单文件组件

The sfc prefix generates Vue <strong><u style="color: red;">S</u></strong>ingle-<strong><u style="color: red;">F</u></strong>ile <strong><u style="color: red;">C</u></strong>omponents, Some examples:

--

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

Vue 2.6 及以下版本，推荐 unplugin-vue2-script-setup；

Vue 2.7 已内置 Composition API；

因此，整个 Vue2 系列，语法形式上，将有五大类🤣。

1. Vue2 SFC-Options API
2. Vue2 SFC-Composition API (2.7+)
3. Vue2 SFC-Composition API <script setup> (2.7+)
4. Vue2 SFC-Composition API Plugin (依赖 @vue/composition-api)
5. Vue2 SFC-Composition API Plugin <script setup> (依赖 @vue/composition-api & unplugin-vue2-script-setup)

…