Share 6 VSCode plugins necessary for Vue3 development

Today, I will share 6 VSCode plugins necessary for Vue3 development, which can be installed and used directly through the plugin center of VSCode.

If you find it helpful, please like and support it~

1. Volar

🔥 1.53 million downloads+

I believe that students who use VSCode to develop Vue2 must be familiar with the Vetur plug-in. As a VSCode plug-in supporting Vue2, its main function is to provide highlighting, syntax support and syntax detection for Vue single-file components.

With the release of the official version of Vue3, the Vue team officially recommends the Volar plug-in to replace the Vetur plug-in, which not only supports Vue3 language highlighting and syntax detection, but also supports TypeScript and vue-tsc- based type checking functions.

Note when using:

1. First, disable the Vetur plugin to avoid conflicts;
2. 推荐css / less / scss <style>的语言，因为这些基于vscode-css-language服务提供了可靠的语言support;
3. If using postcss / stylus / sass additional syntax highlighting extensions need to be installed. postcss uses language-postcss , stylus uses language-stylus extension, and sass uses Sass extension;
4. Volar does not include ESLint and Prettier, and the official ESLint and Prettier extensions support Vue, so you need to install it yourself.

2. Vue VSCode Snippets

🔥 1.52 million downloads+

The Vue VSCode Snippets plugin is designed to provide developers with the easiest and fastest way to generate Vue code snippets. Through various shortcut keys, various code snippets can be quickly generated in the .vue file. It is simply a necessary artifact for Vue3 development.

The plugin supports: Volar, Vue2 and Vue3.

It is used as follows:

• Create a new .vue file, enter vbase will prompt the generated template content:

• Input vfor quick generation v-for command template:

• Input v3onmounted quick generation onMounted lifecycle function:

Others will not be demonstrated anymore. The functions are too powerful, and there are many commonly used shortcut keys. You can check the documentation for details.

3. Auto Close Tag

🔥 Downloads 7.69 million+

The Auto Close Tag plugin is a great extension for VS Code that has a big 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

🔥 Downloads 490,000+

The Vue Peek plugin is used to expand the Vue code editing experience, allowing us to quickly jump to the files defined by components and modules.

It is used as follows:

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

• Right-click the component label, and a pop-up window displays the file defined by the component:

5. Vue Theme

🔥 Downloads 340,000+

The Vue Theme plugin provides a good Vue theme, and also supports configuring different colors, which feels pretty good.

6. Vite

🔥 Downloads 89K+

The Vite plugin allows us to automatically start the development server after opening the project, allowing developers to preview and debug the application without leaving the editor. Support one-click to start, build and restart projects.

Summarize

The 6 plug-ins shared today can be installed and used as needed.

I highly recommend two plugins, Volar and Vue VSCode Snippets .
If you think it's good, please like and support. 👍

Everyone has better plugins, welcome to comment and share~🔥

Welcome to my WeChat public account "Front-end self-study class".