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

Home

Development Tools

VSCode

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

青灯夜游

Mar 21, 2023 pm 07:05 PM

javascriptvscodefront endvisual studio code

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!

[Organization and sharing] VSCode plug-ins that are essential 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. [Organization and sharing] VSCode plug-ins that are essential for the front end in 2023

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.

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

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.

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

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.

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

Vue Language Features (Volar)

By default, our Vue component looks like this:

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

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.

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

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