Recommend 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 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

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

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 {}.. for differentiation

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 the word is spelled incorrectly (supports English)

Code Runner

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

Debugger for Chrome

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

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

Svg Preview
• Function: Can display your SVG pictures, and also Can be edited

##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

  

  vscode-pigments

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

  

  ##Parameter Hints

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

  

  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)

  

  Highlight Matching Tag

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

  

  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

  

  

  

  ##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

  

  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

  

  ## themes 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 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

  

  ##Artboard drawing
  Plug-in name:
  • Draw.io Integration

  Function: Draw pictures in
  • VSCode

    , support multi-person collaboration to edit charts..

  

  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

  

  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

  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!