vscode plug-in sharing: 6 essential plug-ins for Vue3 development

This article will share with you 6 Vue3 necessary VSCode plug-ins. You can directly install and use them through the VSCode plug-in center. I hope it will be useful to everyone. help!

1. vscode plug-in sharing: 6 essential plug-ins for Vue3 development

1.53 million downloads

I believe that students who use VSCode to develop Vue2 will be familiar with the Vetur plug-in. As a supporting VSCode plug-in for Vue2, its main function is to provide highlighting, syntax support and syntax detection for Vue single-file components. [Recommended learning: vscode tutorial, Programming teaching, vuejs video tutorial]

With the release of the official version of Vue3, the Vue team officially recommends vscode plug-in sharing: 6 essential plug-ins for Vue3 development plug-in replaces the Vetur plug-in, which not only supports Vue3 language highlighting and syntax detection, but also supports TypeScript and type checking functions based on vue-tsc.

Note when using:

• First disable the Vetur plug-in to avoid conflicts;

• It is recommended to use css/less/scss as the <style></style> language, since these are based on vscode- The css-language service provides reliable language support;

• If you use postcss/stylus/sass, you need to install additional syntax highlighting extensions. postcss uses language-postcss, stylus uses language-stylus extension, sass uses Sass extension;

• vscode plug-in sharing: 6 essential plug-ins for Vue3 development does not Contains ESLint and Prettier, and the official ESLint and Prettier extensions support Vue, so you need to install them yourself.

2. Vue VSCode Snippets

1.52 million downloads

Vue VSCode Snippets The plug-in is designed to provide developers with the simplest and fastest way to generate Vue code snippets, which can be created in .vue through various shortcut keys. Quickly generate various code snippets from files. It is simply a must-have artifact for Vue3 development.

This plug-in supports: vscode plug-in sharing: 6 essential plug-ins for Vue3 development, Vue2 and Vue3.

The usage method is as follows:

• Create a new .vue file, enter vbase and you will be prompted Generated template content:

• Enter vfor to quickly generate v-for command template:

• Inputv3onmountedQuickly generateonMountedLife cycle function:

The rest will not be demonstrated anymore. The function is too powerful and there are many commonly used shortcut keys. For details, you can check the documentation.

3. Auto Close Tag

7.69 million downloads

Auto Close The Tag plugin is a useful VS Code extension that has a great impact on productivity. As the name suggests, when we type the closing bracket in the closing tag, it will add the closing tag. It supports HTML, Handlebars, XML, PHP, Vue, JavaScript, Typescript, JSX and more.

4. Vue Peek

490,000 downloads

Vue Peek The plug-in is used to expand the Vue code editing experience and allows us to quickly jump to files defined by components and modules.

Usage is as follows:

• Right-click the component label and jump to the component definition file:

• Right-click the component label, and a pop-up window will display the component definition file:

## 5. Vue Theme

340,000 downloads

Vue Theme plug-in provides a good Vue theme and also supports the configuration of different colors ,feel good.

6. vscode plug-in sharing: 6 essential plug-ins for Vue3 development

89,000 downloads

vscode plug-in sharing: 6 essential plug-ins for Vue3 development The plug-in allows us to automatically start the development server after opening the project, allowing developers to preview and debug applications without leaving the editor. Supports one-click start, build and restart projects.

Summary

The 6 plug-ins shared today can be installed and used as needed. We strongly recommend the practical

vscode plug-in sharing: 6 essential plug-ins for Vue3 development and Vue VSCode Snippets plug-ins.

For more knowledge about VSCode, please visit:

vscode Basic Tutorial!

The above is the detailed content of vscode plug-in sharing: 6 essential plug-ins for Vue3 development. For more information, please follow other related articles on the PHP Chinese website!