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

Preface

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

test01

Path alias smart tip

Installation effect and function

img

img

indent-rainbow

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

image-20211001221922170

Bracket Pair Colorizer 2

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

Screenshot

Auto Rename Tag

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

test02

Code Spell Checker

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

image-20211001222515014

Code Runner

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

test03.gif

Debugger for Chrome

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

image-20211001223256342

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

demo

Tabnine

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

test04.gif

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

vscode-pigments

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

 preview

Parameter Hints

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

image-20211001225347827

Quokka.js

  • 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 )

test05.gif

Highlight Matching Tag

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

image-20211002094809502

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

vue-component

  • 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

img

img

img

Vetur

  • 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

demo

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

demo

ES7 Reactsnippets

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

vscode-styled-components

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

image-20211002093516003

Theme class

Dracula Official

  • The plugin name :vscode-styled-components

image-20211002093806553

One Dark Pro

  • The plugin name :One Dark Pro

image-20211002093922498

vscode-icons

  • The plugin name :vscode-icons
  • VSCode Folder & File Icon

image-20211002094123650

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

image-20211002095626877

Sketchpad drawing

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

img

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

test06.gif

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

Introduction

Introduction

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

image-20211002103141474

Please bring the original link to reprint ,thank
Similar articles

2021-10-14

2021-10-14

2021-10-14

2021-10-14

2021-10-14

2021-10-14

2021-10-14