Home >Development Tools >VSCode >Recommend some practical front-end plug-ins in VSCode (summary)

Recommend some practical front-end plug-ins in VSCode (summary)

青灯夜游
青灯夜游forward
2021-10-11 10:34:373509browse

This article summarizes and recommends some practical front-end plug-ins in VSCode. I hope it will be helpful to everyone!

Recommend some practical front-end plug-ins in VSCode (summary)

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

Recommend some practical front-end plug-ins in VSCode (summary)

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

Recommend some practical front-end plug-ins in VSCode (summary)

Recommend some practical front-end plug-ins in VSCode (summary)

indent-rainbow

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

Recommend some practical front-end plug-ins in VSCode (summary)

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

Recommend some practical front-end plug-ins in VSCode (summary)

Code Spell Checker

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

Recommend some practical front-end plug-ins in VSCode (summary)

Code Runner

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

Recommend some practical front-end plug-ins in VSCode (summary)

Debugger for Chrome

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

Recommend some practical front-end plug-ins in VSCode (summary)

##Live ServerPP

Plug-in name:
    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

Recommend some practical front-end plug-ins in VSCode (summary)

Svg Preview

Plug-in name:
    Svg Preview
  • Function: Can display your SVG pictures, and also Can be edited

0-Recommend some practical front-end plug-ins in VSCode (summary)##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

    1Recommend some practical front-end plug-ins in VSCode (summary)

    vscode-pigments

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

    1Recommend some practical front-end plug-ins in VSCode (summary)

    ##Parameter Hints

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

    1Recommend some practical front-end plug-ins in VSCode (summary)

    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)

    1Recommend some practical front-end plug-ins in VSCode (summary)

    Highlight Matching Tag

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

    1Recommend some practical front-end plug-ins in VSCode (summary)

    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

    Recommend some practical front-end plug-ins in VSCode (summary)

    Recommend some practical front-end plug-ins in VSCode (summary)

    Recommend some practical front-end plug-ins in VSCode (summary)

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

    Recommend some practical front-end plug-ins in VSCode (summary)

    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

    Recommend some practical front-end plug-ins in VSCode (summary)

    ## themes Class

    Dracula Official

      Plug-in name:
    • vscode-styled-components

    Recommend some practical front-end plug-ins in VSCode (summary)

    One Dark Pro

      Plug-in name:
    • One Dark Pro

    Recommend some practical front-end plug-ins in VSCode (summary)

    vscode-icons

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

    Recommend some practical front-end plug-ins in VSCode (summary)

    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

    Recommend some practical front-end plug-ins in VSCode (summary)

    ##Artboard drawing

      Plug-in name:
    • Draw.io Integration

    • Function: Draw pictures in
    • VSCode

      , support multi-person collaboration to edit charts..

    1Recommend some practical front-end plug-ins in VSCode (summary)

    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

    1Recommend some practical front-end plug-ins in VSCode (summary)

    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

    1Recommend some practical front-end plug-ins in VSCode (summary)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!

Statement:
This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete
Previous article:Can vscode use uni-app?Next article:Can vscode use uni-app?