Recommend some practical front-end plug-ins in VSCode (summary)
This article summarizes and recommends some practical front-end plug-ins in VSCode. I hope it will be helpful to everyone!
Recommend a wave of essential plug-ins for front-end development, which can definitely improve your productivity. Wouldn’t it be nice to spend the rest of the time mowing around? [Recommended learning: "vscode tutorial"]
Comprehensive recommendation for development
Alias path jump
##plug-in Name: Alias path jumpInstructions for use:Alias path jump plug-in, supports any project,
Usage scenario: When you are developing a page, you want to clickAlias path imported components (Demonstration below)
Configuration instructions
- Just customize after downloading Just configure some commonly used alias paths
- Right-click the plug-in--"Extended settings--"Path mapping and edit it in
- settinas.json
// 文件名别名跳转 "alias-skip.mappings": { "~@/": "/src", "views": "/src/views", "assets": "/src/assets", "network": "/src/network", "common": "/src/common" },
- settinas.json
Effect display
Path alias smart prompt
- Plug-in name:
- path-alias
- alias path is not prompted (can be used at the same time as alias path jump, No conflict)
- Detailed usage tutorial (very simple)
Installation effects and functions
indent-rainbow
- Plug-in name:
- indent-rainbow
Bracket Pair Colorizer 2
- Plug-in name:
- Bracket Pair Colorizer 2
Auto Rename Tag
- Plug-in name:
- Auto Rename Tag
Code Spell Checker
- Plug-in name:
- Code Spell Checker
Code Runner
- Plug-in name:
- Code Runner
Debugger for Chrome
- Plug-in name:
- Debugger for Chrome
Plug-in name:
- Live ServerPP
-
Function: Open your file on the server side and display your modified code in real time
- Supports websocket message service, which can be used to debug websocket clients
- Supports programmable virtual files, which can be used to simulate server-side API interfaces
Plug-in name:
- Svg Preview
-
Function: Can display your SVG pictures, and also Can be edited
##Tabnine
##Plug-in name: Tabnine
- Function: Intelligent code prompts, which can predict the code you are about to write and prompt
-
Template String Converter
- Plug-in name:
Template String Converter
- Function: Enter $ in the string to trigger String converted to template string
vscode-pigments
- Plug-in name:
vscode -pigments
- Function: Real-time preview of the set color
##Parameter Hints
- Plug-in name:
- Parameter Hints
Quokka.js
- Plug-in name:
- Quokka.js
- ctrl shift p
Enter
Quokka new JavaScr..You can use the
function: real-time display of print output, and more functions for self-exploration (commonly used for testing)
Highlight Matching Tag
- Plug-in name:
- Highlight Matching Tag
Popular plug-ins
- It’s basically all installed so I won’t go into details
Plug-in
- Bookmarks
- Function: Commonly used to read source code to mark lines and jump ( Code mark quick jump)
- ESLint
- Function: Code specification check
- Prettier - Code formatter
- Function: Code beautification, automatically formatted into a standard format
- Project Manager
- Function: Project management plug-in, when developing multiple projects, you can quickly jump
- Path Intellisense
- Function: Path intelligent prompt
- Image preview
- Function: When the import path is an image, you can preview the current image
- GitLens
- Function: Enhanced
- git
function, supports viewing the author, modification time, etc. in VSCode
- git
- open in browser
- Function: Open the current file in the browser
vue-component
- Plug-in name:
- vue-component
- Enter the component name to automatically import the found component, automatically import the path and component
- After selection, automatically enter the component name (including required attributes), import statement, and components attributes
##VeturPlug-in name:
- Vetur
-
Essentials for developing Vue
- Plug-in name:
- Vue 3 Snippets
- Vue
code snippets, very convenient for development
React development recommendations
Plug-in name:
- React Style Helper
-
Function: Write content faster in
React - Connect styles, and provide powerful auxiliary development functions for CSS, LESS, SASS and other style files
Auto-complete
- Jump to the style and variable definition location
- Create JSX /TSX inline style
- Preview style and variable content
Inline style is automatically completed, and at the same time Supports jump and preview of SASS variables.ES7 Reactsnippets
- Plug-in name:
ES7 React/Redux/React-Native/JS snippets
- Function: many
React
code snippet, very convenient for development
vscode-styled-components
- Plug-in name:
vscode- styled-components
- Function: When writing styles in
JS
files, there are smart prompts
## themes ClassDracula Official
- Plug-in name:
- vscode-styled-components
One Dark Pro
- Plug-in name:
- One Dark Pro
vscode-icons
- Plug-in name:
- vscode-icons
- VSCode
Folder& File icon
Other recommendations- The following plug-ins may not be commonly used. If you are interested, you can try them
CSS Initial Value
- Plug-in name:
- vscode-icons
- css
attribute
##Artboard drawing- Plug-in name:
- Draw.io Integration
- VSCode
, support multi-person collaboration to edit charts..
Echars smart prompt plug-in- Plug-in name:
- echarts-vscode -extension
- ctrl shift p
enter
active Echars
to turn on the smart prompt Function: Prompt various properties of Option - in
Echar, very powerful
Translation plug-in- Plug-in name:
- A-super-translate
-
Type ctrl ` and then press ctrl 1 to directly replace the selected area for translation
-
- supports user string and variable translation, supports camel case splitting
Summary (with pictures of all plug-ins)
- Of course, the computer configuration is powerful enough. When I didn’t say
Programming VideoFor more programming related knowledge, please visit:
- Plug-in name:
The above is the detailed content of Recommend some practical front-end plug-ins in VSCode (summary). For more information, please follow other related articles on the PHP Chinese website!

VisualStudio and VSCode have their own advantages and disadvantages, which are suitable for different development needs. VisualStudio is suitable for large projects and provides rich functions; VSCode is lightweight, flexible, and has cross-platform support.

VisualStudio is a multi-functional integrated development environment that supports multiple programming languages and complete development processes. 1) Code editing: Provides intelligent code completion and reconstruction. 2) Debugging: Built-in powerful debugging tools, supporting breakpoint and variable monitoring. 3) Version control: Integrate Git and TFVC to facilitate team collaboration. 4) Testing: Supports multiple test types to ensure code quality. 5) Deployment: Provides a variety of deployment options to support deployment requirements from on-premises to the cloud.

VisualStudio is suitable for large-scale project development, while VSCode is suitable for lightweight and highly customizable environments. 1. VisualStudio provides powerful intelligent perception and debugging functions, suitable for large-scale projects and enterprise-level development. 2. VSCode provides flexibility and customization capabilities through extended systems, suitable for multiple programming languages and cross-platform development.

VisualStudio subscriptions are available in multiple levels, suitable for different developers' needs. 1. The basic version is free and suitable for individuals and small teams. 2. Advanced versions such as Professional and Enterprise provide advanced tools and team collaboration functions, suitable for enterprise users.

The difference between VisualStudio and VSCode in performance and resource usage is mainly reflected in: 1. Startup speed: VSCode is faster; 2. Memory usage: VSCode is lower; 3. CPU usage: VisualStudio is higher during compilation and debugging. When choosing, it must be determined based on project requirements and development environment.

VisualStudio (VS) is a powerful integrated development environment (IDE) developed by Microsoft, which supports multiple programming languages, such as C#, C, Python, etc. 1) It provides a rich set of features including code editing, debugging, versioning and testing. 2) VS processes code through powerful editors and debuggers, and supports advanced code analysis and reconstruction using Roslyn and Clang/MSVC compiler platforms. 3) Basic usage is like creating a C# console application, and advanced usage is like implementing polymorphism. 4) Common errors can be debugged by setting breakpoints, viewing output windows, and using instant windows. 5) Performance optimization suggestions include the use of asynchronous programming, code reconstruction and performance analysis.

In VisualStudio, the steps for compiling, testing and deploying the code are as follows: 1. Compiling: Use VisualStudio's compiler options to convert source code into executable files, supporting multiple languages such as C#, C and Python. 2. Testing: Use built-in MSTest and NUnit to perform unit testing to improve code quality and reliability. 3. Deployment: Transfer applications from the development environment to the production environment through web deployment, Azure deployment, etc. to ensure security and performance.

VisualStudioisMicrosoft'sflagshipIDE,supportingmultipleprogramminglanguagesandenhancingcodingefficiency.1)ItoffersfeatureslikeIntelliSenseforcodeprediction,multi-tabbedinterfaceforprojectmanagement,andtoolsfordebugging,refactoring,andversioncontrol.2


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

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Notepad++7.3.1
Easy-to-use and free code editor

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
