Development ToolsVSCode[Organization and sharing] VSCode plug-ins that are essential for the front end in 2023[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!
![[Organization and sharing] VSCode plug-ins that are essential for the front end in 2023](https://img.php.cn/upload/article/000/000/024/64198f0edb5da686.jpg?x-oss-process=image/resize,p_40)
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](https://img.php.cn/upload/article/000/000/024/89e9c0db2b04b9cd6e695dda0c16c178-1.png?x-oss-process=image/resize,p_40)
![[Organization and sharing] VSCode plug-ins that are essential for the front end in 2023](https://img.php.cn/upload/article/000/000/024/68ab38d88090c833f6972ffbb6678100-2.png?x-oss-process=image/resize,p_40)
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](https://img.php.cn/upload/article/000/000/024/21f34a4e5d10e67d4af0d1c39ba44d6b-3.gif?x-oss-process=image/resize,p_40)
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](https://img.php.cn/upload/article/000/000/024/8e8fb113c708cfdd0e4f247a8bd97934-4.png?x-oss-process=image/resize,p_40)
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:
![[Organization and sharing] VSCode plug-ins that are essential for the front end in 2023](https://img.php.cn/upload/article/000/000/024/1bd4092c046c91c5fa7990ef55a09e60-5.gif?x-oss-process=image/resize,p_40)
- Export React component:
![[Organization and sharing] VSCode plug-ins that are essential for the front end in 2023](https://img.php.cn/upload/article/000/000/024/086571a18ad55f73fad3ff1b873a53b6-6.gif?x-oss-process=image/resize,p_40)
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](https://img.php.cn/upload/article/000/000/024/15dfad3b2f22b7be5f766ae26a47f3dc-7.png?x-oss-process=image/resize,p_40)
![[Organization and sharing] VSCode plug-ins that are essential for the front end in 2023](https://img.php.cn/upload/article/000/000/024/c40ac77afe919e1e295932371ec7a47d-8.png?x-oss-process=image/resize,p_40)
@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
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Zend Studio 13.0.1
Powerful PHP integrated development environment
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
