Vue 3 Snippet (Visual Studio Code)

中文

🌈🌈🌈 First need to install "Vue Basic Snippets", they are one combined release.

Code snippets for Vue (v3.x) + Vue Router (v4.x) + VueX (v4.x).

Design

Vue 2 and 3 Template Directives are the same (vscode-vue-basic-snippets).

Vue 2 and 3 have relatively large changes, 2 recommends the Optional paradigm, and 3 recommends the Composition Functions paradigm. The commonly used "Global API, Directives, Transition, Async Components, Instance Events, Lifecycle" in Vue have undergone major changes. And Router/VueX also launched 4 versions.

In addition, with the introduction of new features of "reactive refs" and "Teleport", the upgrade of many community resources will be major changes.

Therefore, it is not good to design Vue 2 and 3 Code Snippets together.

It is best to separate the Code Snippets of Vue 2 and 3 respectively. According to the actual situation in the project, select Disable (Workspace) in the extension. If you feel this is more cumbersome, you can install the extension supported by version 2 in "VS Code" , Install the extensions supported by version 3 in "VS Code-Insiders".

Supported languages (file extensions)

• JavaScript (.js)
• JSX (.jsx)
• TypeScript (.ts)
• Vue (.vue)

Resources 🤞

• JavaScript Code Snippet - Visual Studio Marketplace
• JavaScript Comment Snippet - Visual Studio Marketplace

Snippets

Looking at the source code, the source code files are layered, very clear, better than the document description, and roughly what are the prefix.

• Vue 3
  • [x] Application Config
  • [x] Application API
  • [x] Global API
  • [x] Options API
  • [x] Instance Properties
  • [x] Instance Methods
  • [x] Directives
  • [x] Special Attributes
  • [x] Built-in Components
  • [x] Reactivity API
  • [x] Composition API
• Vue Router 4, TODO (2021-4)
  • [ ] <router-link> Props
  • [ ] <router-link>'s v-slot
  • [ ] <router-view> Props
  • [ ] <router-view>'s v-slot
  • [ ] createRouter
  • [ ] createWebHistory
  • [ ] createWebHashHistory
  • [ ] createMemoryHistory
  • [ ] NavigationFailureType
  • [ ] START_LOCATION
  • [ ] Composition API
  • [ ] TypeScript
  • [ ] Router Properties
  • [ ] Router Methods
  • [ ] RouterOptions
  • [ ] RouteRecordRaw
  • [ ] RouteRecordNormalized
  • [ ] RouteLocationRaw
  • [ ] RouteLocation
  • [ ] RouteLocationNormalized
  • [ ] NavigationFailure
  • [ ] NavigationGuard
  • [ ] Component Injections
• Vuex 4, TODO (2021-4)
  • [ ] Vuex.Store
  • [ ] Vuex.Store Constructor Options
  • [ ] Vuex.Store Instance Properties
  • [ ] Vuex.Store Instance Methods
  • [ ] Component Binding Helpers

File Name

View "Style Guide" Priority B Rules: Strongly Recommended (Improving Readability).

• ${TM_FILENAME_BASE/([A-Z][a-z]*)+([A-Z][a-z]*)/${1:/downcase}-${2:/downcase}/g}, foo-bar.vue → name: foo-bar;
• ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}, foo-bar.vue → name: FooBar;
• ${TM_FILENAME_BASE}, foo-bar.vue → name: foo-bar;
• ${TM_DIRECTORY}, foo-bar/index.vue → name: foo-bar;

License 📃

MIT License

Donate