search
HomeDevelopment ToolsVSCodeRecommend 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 some practical front-end plug-ins in VSCode (summary)

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 jump

Instructions for use:

Alias ​​path jump plug-in, supports any project,

Usage scenario: When you are developing a page, you want to click

Alias ​​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"
        },

Effect display

Recommend some practical front-end plug-ins in VSCode (summary)

Path alias smart prompt

    Plug-in name:
  • path-alias
  • Scenario: When importing components, when using
  • 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

Recommend some practical front-end plug-ins in VSCode (summary)

Recommend some practical front-end plug-ins in VSCode (summary)

indent-rainbow

    Plug-in name:
  • indent-rainbow
  • Function: Rainbow indent

Recommend some practical front-end plug-ins in VSCode (summary)

Bracket Pair Colorizer 2

    Plug-in name:
  • Bracket Pair Colorizer 2
  • Function: Add corresponding colors to matching brackets () or objects {}.. for differentiation

Auto Rename Tag

    Plug-in name:
  • Auto Rename Tag
  • Function: Automatically rename tags

Recommend some practical front-end plug-ins in VSCode (summary)

Code Spell Checker

    Plug-in name:
  • Code Spell Checker
  • Function: Check whether the word is spelled incorrectly (supports English)

Recommend some practical front-end plug-ins in VSCode (summary)

Code Runner

    Plug-in name:
  • Code Runner
  • Function: Execute various language codes with one click (commonly used for testing)

Recommend some practical front-end plug-ins in VSCode (summary)

Debugger for Chrome

    Plug-in name:
  • Debugger for Chrome
  • Function: On the VSCode side, debug code

Recommend some practical front-end plug-ins in VSCode (summary)

##Live ServerPP

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

Recommend some practical front-end plug-ins in VSCode (summary)

Svg Preview

Plug-in name:
    Svg Preview
  • Function: Can display your SVG pictures, and also Can be edited

0-Recommend some practical front-end plug-ins in VSCode (summary)##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

    1Recommend some practical front-end plug-ins in VSCode (summary)

    vscode-pigments

    • Plug-in name: vscode -pigments
    • Function: Real-time preview of the set color

    1Recommend some practical front-end plug-ins in VSCode (summary)

    ##Parameter Hints

      Plug-in name:
    • Parameter Hints
    • Function: Prompt function parameter types and messages

    1Recommend some practical front-end plug-ins in VSCode (summary)

    Quokka.js

      Plug-in name:
    • Quokka.js
    • Usage: After installing the plug-in,
    • ctrl shift pEnterQuokka new JavaScr..You can use the
    • function: real-time display of print output, and more functions for self-exploration (commonly used for testing)

    1Recommend some practical front-end plug-ins in VSCode (summary)

    Highlight Matching Tag

      Plug-in name:
    • Highlight Matching Tag
    • Function: When the cursor stays on the tag, the high Bright matching tags

    1Recommend some practical front-end plug-ins in VSCode (summary)

    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
    • open in browser
        Function: Open the current file in the browser
    Vue development recommendation

    vue-component

      Plug-in name:
    • vue-component
    • Function:
    • 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

    Recommend some practical front-end plug-ins in VSCode (summary)

    Recommend some practical front-end plug-ins in VSCode (summary)

    Recommend some practical front-end plug-ins in VSCode (summary)

    ##Vetur

    Plug-in name:
      Vetur
    • Essentials for developing Vue
    Vue 3 Snippets

      Plug-in name:
    • Vue 3 Snippets

    • Basic essentials: a lot of
    • Vue

      code snippets, very convenient for development

    • React development recommendations

    React Style Helper

    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 filesAuto-complete
      • Jump to the style and variable definition location
      • Create JSX /TSX inline style
      • Preview style and variable content

    Recommend some practical front-end plug-ins in VSCode (summary)

    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: manyReact 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

    Recommend some practical front-end plug-ins in VSCode (summary)

    ## themes Class

    Dracula Official

      Plug-in name:
    • vscode-styled-components

    Recommend some practical front-end plug-ins in VSCode (summary)

    One Dark Pro

      Plug-in name:
    • One Dark Pro

    Recommend some practical front-end plug-ins in VSCode (summary)

    vscode-icons

      Plug-in name:
    • vscode-icons
    • VSCodeFolder& File icon

    Recommend some practical front-end plug-ins in VSCode (summary)

    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
    • Function: Display the initial value of each CSS property, When the cursor stays on the
    • css attribute

    Recommend some practical front-end plug-ins in VSCode (summary)

    ##Artboard drawing

      Plug-in name:
    • Draw.io Integration

    • Function: Draw pictures in
    • VSCode

      , support multi-person collaboration to edit charts..

    1Recommend some practical front-end plug-ins in VSCode (summary)

    Echars smart prompt plug-in

      Plug-in name:
    • echarts-vscode -extension

    • Usage: After installing the plug-in,
    • ctrl shift p

      enter active Echars to turn on the smart prompt

    • Function: Prompt various properties of Option
    • in

      Echar, very powerful

    1Recommend some practical front-end plug-ins in VSCode (summary)

    Translation plug-in

      Plug-in name:
    • A-super-translate

    • Usage: Select the row , Ctrl Shift p Enter translation
    • Type ctrl ` and then press ctrl 1 to directly replace the selected area for translation
    • Function: Translation identification code The comments section does not interfere with reading. Supports different languages, single-line and multi-line comments,
      • supports user string and variable translation, supports camel case splitting
    • Summary (with pictures of all plug-ins)

    According to your needs, you can install the corresponding plug-ins (if you install too many plug-ins, VSCode will be stuck)
    • Of course, the computer configuration is powerful enough. When I didn’t say

    1Recommend some practical front-end plug-ins in VSCode (summary)For more programming related knowledge, please visit:

    Programming Video

    ! !

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!

Statement
This article is reproduced at:掘金社区. If there is any infringement, please contact admin@php.cn delete
Visual Studio vs. VS Code: Installation, Setup, and Ease of UseVisual Studio vs. VS Code: Installation, Setup, and Ease of UseApr 30, 2025 am 12:05 AM

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.

Visual Studio's Purpose: Code Editing, Debugging, and MoreVisual Studio's Purpose: Code Editing, Debugging, and MoreApr 29, 2025 am 12:48 AM

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.

Visual Studio vs. VS Code: A Comparison of Code EditorsVisual Studio vs. VS Code: A Comparison of Code EditorsApr 28, 2025 am 12:15 AM

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.

Visual Studio's Pricing: Understanding Subscription ModelsVisual Studio's Pricing: Understanding Subscription ModelsApr 27, 2025 am 12:15 AM

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.

Visual Studio vs. VS Code: Performance and Resource UsageVisual Studio vs. VS Code: Performance and Resource UsageApr 26, 2025 am 12:18 AM

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.

Visual Studio: The IDE for C#, C  , and MoreVisual Studio: The IDE for C#, C , and MoreApr 25, 2025 am 12:10 AM

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.

Visual Studio: Code Compilation, Testing, and DeploymentVisual Studio: Code Compilation, Testing, and DeploymentApr 24, 2025 am 12:05 AM

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.

Visual Studio: An Introduction to the Integrated Development Environment (IDE)Visual Studio: An Introduction to the Integrated Development Environment (IDE)Apr 23, 2025 am 12:02 AM

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

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

MantisBT

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

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

Notepad++7.3.1

Easy-to-use and free code editor

DVWA

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