2021 vscode front end plug-in recommendation

The wind knows no way 2021-10-14 05:46:59

2021 VSCode Front end plug-ins recommend


Recommend a wave of necessary plug-ins for front-end development , It can definitely improve your productivity , The rest of the time to mo fish , Beauty is not true

Develop comprehensive recommendations

Alias path jump

The plugin name : Alias path jump

Instructions : Alias path jump plug-in , Support any project ,

Use scenarios : When you're developing a page , Want to click When importing components from alias paths ( The demonstration is as follows )

Configuration instructions

  • After downloading, you only need to customize and configure some commonly used alias paths

    • Right click the plug-in --》 Extended settings --》 Path mapping in settinas.json Editor in chief
    // File name alias jump
    "alias-skip.mappings": {
    "[email protected]/": "/src",
    "views": "/src/views",
    "assets": "/src/assets",
    "network": "/src/network",
    "common": "/src/common"

Effect display


Path alias smart tip

Installation effect and function




  • The plugin name : indent-rainbow
  • function : Rainbow indent


Bracket Pair Colorizer 2

  • The plugin name : Bracket Pair Colorizer 2
  • function : Give matching parentheses () perhaps object {}.. Add the corresponding color to distinguish


Auto Rename Tag

  • The plugin name : Auto Rename Tag
  • function : Automatically rename tags


Code Spell Checker

  • The plugin name :Code Spell Checker
  • function : Check the spelling of words ( Support English )


Code Runner

  • The plugin name :Code Runner
  • function : One click execution of various language codes ( Used to test )


Debugger for Chrome

  • The plugin name :Debugger for Chrome
  • function : stay VSCode End , Debugging code


Live ServerPP

  • The plugin name :Live ServerPP
  • function : Open your file on the server , Display your modified code in real time

    • Support websocket Message service , It can be used for debugging websocket client
    • Support programmable virtual files , It can be used to simulate the server API Interface

Live Server Demo VSCode

Svg Preview

  • The plugin name :Svg Preview
  • function : Can show your SVG picture , You can also edit



  • The plugin name :Tabnine
  • function : Smart prompt code , You can predict the code you will write and prompt


Template String Converter

  • The plugin name :Template String Converter
  • function : Enter... In the string $ Trigger , Convert string to template string

typing a dollar sign then open curly brace within a string converts the quotes to backticks


  • The plugin name :vscode-pigments
  • function : Real time preview of the set color


Parameter Hints

  • The plugin name :Parameter Hints
  • function : Prompt the parameter type and message of the function



  • The plugin name :Quokka.js
  • Use : After installing the plug-in ,ctrl+shift+p Input Quokka new JavaScr.. You can use
  • function : Real time display of printouts , Explore more features on your own ( Used to test )


Highlight Matching Tag

  • The plugin name :Highlight Matching Tag
  • function : When the cursor is over the label , Highlight the matching label


Popular plug-ins

  • They are basically installed, so I won't introduce them in detail

plug-in unit

  • Bookmarks

    • function : It is often used to read the source code and mark the line , Jump ( Code mark quick jump )
  • ESLint

    • function : Code specification check
  • Prettier - Code formatter

    • function : Code beautification , Automatically format to canonical format
  • Project Manager

    • function : Project management plug in , When developing multiple projects , Can jump quickly
  • Path Intellisense

    • function : Path intelligent prompt
  • Image preview

    • function : When the import path is a picture , You can preview the current picture
  • GitLens

    • function : Enhanced git function , Support in VSCode Check out the author 、 Change the time and so on
  • open in browser

    • function : Open the current file in the browser

Vue Development recommendation


  • The plugin name :vue-component
  • function : Enter the component name to automatically import the found components , Automatically import paths and components

    • When selected, automatically enter the component name ( Contains required attributes )、import sentence 、components attribute





  • The plugin name :Vetur
  • Development Vue necessary

Vue 3 Snippets

  • The plugin name :Vue 3 Snippets
  • Basic necessities : quite a lot Vue Code segment , It's easy to develop

React Development recommendation

React Style Helper

  • The plugin name :React Style Helper
  • function : stay React Write inline styles faster in , Also on CSS、LESS、SASS And other style files provide powerful auxiliary development functions

    • Automatic completion
    • Jump to the style and variable definition location
    • establish JSX/TSX In line styles for
    • Preview style and variable content


  • In line style auto completion , Support at the same time SASS Jump and preview of variables .


ES7 Reactsnippets

  • The plugin name :ES7 React/Redux/React-Native/JS snippets
  • function : quite a lot React Code segment , It's easy to develop


  • The plugin name :vscode-styled-components
  • function : stay JS When writing styles in a file , There are smart tips


Theme class

Dracula Official

  • The plugin name :vscode-styled-components


One Dark Pro

  • The plugin name :One Dark Pro



  • The plugin 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

CSS Initial Value

  • The plugin name :vscode-icons
  • function : Show each CSS The initial value of the property , When the cursor stops at css Attribute


Sketchpad drawing

  • The plugin name :Draw.io Integration
  • function : stay VSCode Chinese painting , Support multi person collaborative editing of charts ..


Echars Smart prompt plug-in

  • The plugin name :echarts-vscode-extension
  • Use : After installing the plug-in ,ctrl+shift+p Input active Echars You can turn on the smart prompt
  • function : Prompt all kinds of Echar in Option Properties of , It's powerful


Translation plug-ins

  • The plugin name :A-super-translate
  • Usage method : Select row ,Ctrl+Shift+p Input translate

    • type ctrl+` Then press the ctrl+1 Replace the selected area directly for translation
  • function : The comment part of the translation identification code , Do not interfere with reading . Support different languages , A single 、 Multiline comment 、

    • Support user string and variable translation , Support hump splitting



summary ( Attach all plug-in pictures )

  • According to the demand , You can install the corresponding plug-ins ( Too many plug-ins installed ,VSCode It is too laggy. )
  • Of course, the computer configuration is powerful enough , When I didn't say


Please bring the original link to reprint ,thank
Similar articles