2021 VSCode front-end plug-in recommendation

2021 VSCode front-end plug-in recommendation

Preface

Recommend a wave of essential plug-ins for front-end development, which can definitely improve your productivity, and spend the rest of the time to mo fish, wouldn’t it be beautiful?

Development comprehensive recommendation

Alias path jump

Plug-in name: alias path jump

Instructions for use: alias path jump plugin , supports any project,

Use scenario: When you are developing a page, want to click when the imported component alias path (demo below)

Configuration instructions

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

  • settinas.json "Extension Settings -" Path mapping is edited in 06157d3f3d5096

  // 文件名别名跳转
    "alias-skip.mappings": {
      "~@/": "/src",
      "views": "/src/views",
      "assets": "/src/assets",
      "network": "/src/network",
      "common": "/src/common"
    },

Show results

Smart tips for path aliases

• Plug-in name: path-alias
• Scenario: When importing components, using the alias path is useless when the prompt is 👇 (can be used at the same time as the alias path jump, no conflict)
• detailed tutorial (thieves simple)

Installation effect and function

indent-rainbow

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

Bracket Pair Colorizer 2

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

Auto Rename Tag

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

Code Spell Checker

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

Code Runner

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

Debugger for Chrome

• Plug-in name: Debugger for Chrome
• Function: Debug the code on the VSCode side

Live ServerPP

• Plug-in name: Live ServerPP

• Function: Open your file on the server side, display your modified code in real time

  • Support websocket message service, can be used to debug websocket client
  • Supports programmable virtual files, which can be used to simulate server-side API interfaces

Svg Preview

• Plug-in name: Svg Preview
• Function: You can display your SVG picture and edit it

Tabnine

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

Template String Converter

• Plug-in name: Template String Converter
• Function: input $ trigger in the string to convert the string into a template string

vscode-pigments

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

Parameter Hints

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

Quokka.js

• Plug-in name: Quokka.js
• Use: After installing the plug-in, you can use ctrl+shift+p input Quokka new JavaScr..
• Function: Real-time display of print output, self-exploration of more functions (usually used for testing)

Highlight Matching Tag

• Plug-in name: Highlight Matching Tag
• Function: When the cursor is on the label, highlight the matching label

Popular plug-ins

• Basically all are installed, so I won’t introduce it in detail.

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, automatically formatted into a standardized format

• Project Manager

  • Function: project management plug-in, when developing multiple projects, you can quickly jump

• Path Intellisense

  • Function: intelligent path prompt

• Image preview

  • Function: When the import path is a picture, you can preview the current picture

• GitLens

  • Function: Enhanced git function, support to view 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: input the component name to automatically import the found components, automatically import the path and components

  • Automatically enter the component name (including required attributes), import statement, and components attribute after selection

Vetur

• Plug-in name: Vetur
• Essential for Vue development

Vue 3 Snippets

• Plug-in name: Vue 3 Snippets
• Basic essentials: a lot Vue , which is very convenient for development

React development recommendation

React Style Helper

• Plug-in name: React Style Helper

• Function: React , and provide powerful auxiliary development functions for CSS, LESS, SASS and other style files

  • Autocomplete
  • Jump to the style and variable definition position
  • Create JSX/TSX inline style
  • Preview style and variable content

• In-line styles are automatically completed, and at the same time, it supports the jump and preview of SASS variables.

ES7 Reactsnippets

• Plug-in name: ES7 React/Redux/React-Native/JS snippets
• Function: Lots React , which is very convenient for development

vscode-styled-components

• Plug-in name: vscode-styled-components
• Function: when JS files, there are smart tips

Subject category

Dracula 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 plugins may not be commonly used, if you are interested, you can try it😉

CSS Initial Value

• Plug-in name: vscode-icons
• Function: Display the initial value of each CSS property, when the cursor stays on the css property

Drawing board

• Plug-in name: Draw.io Integration
• Function: VSCode in 06157d3f3d622f, support multi-person collaborative editing of charts..

Echars Smart Tips Plugin

• Plug-in name: echarts-vscode-extension
• Use: After installing the plug-in, ctrl+shift+p enter active Echars to open the smart prompt
• Function: Prompt various Option attributes in Echar, very powerful

Translation plugin

• Plug-in name: A-super-translate

• Usage: select the line, Ctrl+Shift+p input translation

  • Type ctrl+` and then press ctrl+1 to directly replace the selected area for translation

• Function: Translate the comment part of the recognition code without disturbing reading. Support different languages, single-line, multi-line comments,

  • Support user string and variable translation, support camel case split

Summary (with pictures of all plug-ins)

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