2021 VSCode front-end plug-in is recommended

preface

Recommend a wave of front-end development must-have plug-ins, which can definitely improve your productivity, and the rest of the time to mo fish, isn’t beautiful

Develop comprehensive recommendations

Alias path jump

Plug-in name: Alias path jump

Alias path jump plug-in, support any project,

Usage scenario: When you are developing a page and want to click the component imported by the alias path (shown below)

Configuration instructions

  • After downloading, you only need to customize some common alias paths

    • Right – click plug-ins — Extension Settings — to pathmap insettinas.jsonEdit the
    // Filename alias jump
  "alias-skip.mappings": {
    "~ @ /": "/src"."views": "/src/views"."assets": "/src/assets"."network": "/src/network"."common": "/src/common"
  },
Copy the code

Results show

Intelligent information about path alias

  • Plug-in name:path-alias
  • Scenario: when importing components, use alias path without prompting 👇 (can be used at the same time with alias path jump, no conflict)
  • Detailed use tutorial (thief simple)

Installation effects and functions

indent-rainbow

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

Bracket Pair Colorizer 2

  • Plug-in name:Bracket Pair Colorizer 2
  • Function: Give matching parentheses () or objects {}.. Add corresponding colors to distinguish them

Auto Rename Tag

  • Plug-in name:Auto Rename Tag
  • Run the following command to automatically rename labels

Code Spell Checker

  • Plug-in name:Code Spell Checker
  • Function: Check word spelling error (Support English)

Code Runner

  • Plug-in name:Code Runner
  • Function: One-click execution of various language code (often used for testing)

Debugger for Chrome

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

Live ServerPP

  • Plug-in name:Live ServerPP
  • Function: open your file in the server side, real-time display you modify the code
    • Supports webSocket message service, which can be used to debug webSocket clients
    • Support for programmable virtual files that can be used to emulate the server API

Svg Preview

  • Plug-in name:Svg Preview
  • What it does: Display your SVG images and edit them

Tabnine

  • Plug-in name:Tabnine
  • Function: intelligent prompt code, you can predict the code to write prompt

Template String Converter

  • Plug-in name:Template String Converter
  • Convert a string to a template string by typing $trigger in the string

vscode-pigments

  • Plug-in name:vscode-pigments
  • Function: Preview the color Settings in real time

Parameter Hints

  • Plug-in name:Parameter Hints
  • Function: prompt function parameter type and message

Quokka.js

  • Plug-in name:Quokka.js
  • Use: After installing the plug-in,ctrl+shift+pThe inputQuokka new JavaScr..You can use
  • Function: real-time display of printed output, more self-exploration (often used for testing)

Highlight Matching Tag

  • Plug-in name:Highlight Matching Tag
  • Function: Highlights matching labels when the cursor hovers over them

Common class plug-in

  • Basic installation will not be introduced in detail

The plug-in

  • Bookmarks
    • Function: often used to read the source code to mark the line, jump (code mark fast jump)
  • ESLint
    • Function: Code specification check
  • Prettier - Code formatter
    • Function: code beautification, automatic formatting into standard format
  • Project Manager
    • Features: Project management plug-in, when developing multiple projects, can quickly jump
  • Path Intellisense
    • Function: Intelligent path prompt
  • Image preview
    • Function: When the import path is a picture, can preview the current picture
  • GitLens
    • Features: EnhancedgitFeatures, support in VSCode to view the author, modify time, and more
  • open in browser
    • Function: Open current file in browser

Vue development recommendation

vue-component

  • Plug-in name:vue-component
  • Function:Enter component name to automatically import found components, automatically import path and components
    • When selected, automatically enter the component name (including required properties), import statement, and components properties

Vetur

  • Plug-in name:Vetur
  • Necessary for developing Vue

Vue 3 Snippets

  • Plugin name: Vue 3 Snippets

  • Basic requirements: a lot of Vue code snippet, very convenient development

React Development Recommendations

React Style Helper

  • Plug-in name:React Style Helper
  • Function:ReactMore quickly to write inline styles, and CSS, LESS, SASS style files to provide powerful auxiliary development capabilities
    • Automatic completion
    • Jump to style and variable definitions
    • Create inline styles for JSX/TSX
    • Preview style and variable content

  • Inline styles are completed automatically, and SASS variables can be jumped and previews are supported.

ES7 Reactsnippets

  • Plug-in name:ES7 React/Redux/React-Native/JS snippets
  • Features: ManyReactCode segment, very convenient development

vscode-styled-components

  • Plug-in name:vscode-styled-components
  • Function:JSThere is an intelligent prompt when writing styles in the file

Theme class

Dracula Official

  • Plug-in name:vscode-styled-components

One Dark Pro

  • Plug-in name:One Dark Pro

vscode-icons

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

Other recommended

  • The following plug-ins, may not be commonly used, you can try 😉

CSS Initial Value

  • Plug-in name:vscode-icons
  • Function: Displays the initial value of each CSS property when the cursor is hovering overcssWhen the attribute

Panel drawing

  • IO Integration

  • Features: drawing in VSCode, support multi-person collaboration to edit charts..

Echars smart tips plugin

  • Plugin name: echarts-vscode-extension

  • Use: After installing the plug-in, CTRL + Shift + P and enter Active Echars to activate the smart prompt

  • Function: Prompts various Echar Option properties, quite powerful

Translate plug-in,

  • Plugin name: A-super-translate

  • Usage: Select the line, Ctrl+Shift+ P input translation

    • Type CTRL + ‘and press CTRL +1 to replace the selected area directly for translation

  • Function: Translate the annotated part of the code without interfering with reading. Support for different languages, single-line, multi-line comments,

    • Support user string and variable translation, support hump split

Summary (with all plug-in pictures)

  • According to the requirements, you can install the corresponding plug-in (install too many plug-ins, VSCode will be very slow)
  • Of course computers are powerful enough, never mind 🤔