[Organization and sharing] VSCode plug-ins that are essential for the front end in 2023

Visual Studio Code is a free, cross-platform source code editor developed by Microsoft for writing modern web and cloud applications. It contains a rich plug-in market, providing many practical plug-ins. Let’s share the essential VS Code plug-ins for the front end in 2023!

Front-end framework

---

##ES7 React/ Redux/React-Native snippets

This plugin provides a number of shorthand prefixes to speed up development and help developers create code snippets and syntax for React, Redux, GraphQL and React Native.

For example, create a new file and type rfce then press enter, this will generate a React function component, import React and export the component.

VSCode React Refactor

This is a VS Code extension designed specifically for React developers. Refactoring can be challenging when working on large projects. Code can be quickly refactored using VSCode React Refactor, which extracts JSX code snippets into new classes and components. Additionally, it supports TypeScript, TSX, regular functions, classes, and arrow functions.

Simple React Snippets

This plugin provides a carefully selected set of React snippets that can be easily added to your code by entering a few letters middle. For example, typing imr will import React into the component.

Typescript React Code Snippets

This plugin contains React code snippets using Typescript, it supports Typescript(.ts) or Languages ​​such as TypeScript React (.tsx). Below are two snippets of creating React components using TypeScript.

Default export React:

Export React component:

Vue Language Features (Volar)

By default, our Vue component looks like this:

Use this plugin to get beautiful syntax highlighting, error checking and code formatting. Also, it adds a lot of Vue directives and event handlers to provide great suggestions while typing.

volar is a language support plugin built specifically for Vue 3. It is based on

@vue/reactivity which computes everything on demand, achieving native TypeScript language service level performance.

As Vue 3 TypeScript becomes more and more popular, Vetur (Vue’s official VS Code extension) starts to have problems, such as high CPU usage when using Vue with TypeScript, or not supporting Vue 3 New