23 front-end VSCode plug-ins that improve development efficiency (come and collect them)

• • Project Manager: Save Project Save the current folder/workspace as New Project
  • Project Manager: Edit ProjectManually edit your project (projects.json)
  • Project Manager: List Projects to OpenList All saved/detected projects and select one
  • Project Manager: List Projects to Open in New Window List all saved/detected projects and select one in new window Open
  • Project Manager: Filter Projects by Tag Filter favorite projects by selected tag

• Usage:

• • The Project Manager extension has its own Side Bar with various commands to improve your work efficiency
  • You can define custom tags (via settings), define multiple tags per project projectManager.tags, and filter projects tagged on their tags

Settings Sync

Settings Sync can help us in Change computers, reinstall the system, or synchronize settings on VSCode across multiple computers.

Settings Sync: Visual Studio Code settings synchronization.

• Plug-in name: Settings Sync
• Official address:marketplace.visualstudio.com/items?itemN…

npm

npm : This extension supports running npm scripts defined in files.

• Plug-in name: npm
• Official address:marketplace.visualstudio.com/items?itemN…
• Features:

• • ##npm provides running quick fixes for reported warnings.

• ##The command used to run the script is in this npm category Available

open in browser

open in browser : This extension allows your html files to be opened in the browser.

Plug-in name: open in browser
Official address:
• marketplace.visualstudio.com/items?itemN…
Usage

• ##Use the shortcut to open the current ## in the default browser Alt B
  • #htmlShift Alt B file, or select a browser. You can also right click like on the picture:

## When you select open in Default Browser, the default is

• System default browser
  • . If you want to configure the default browser you can override it like this:

  Git supercharged

  

  GitLens - Git supercharged: GitLens enhances Git inVSCode and unlocks it capture theuntapped knowledge in each repository.It helps you intuitivelyVisualize code authorship, seamlessly navigate and exploreGit repositories with Git comparison comments and CodeLens, and gain value with rich visualizations and powerful comparison commandsInsightsand so on.

  • Plug-in name: GitLens - Git supercharged
  • Official address:marketplace.visualstudio.com/items?itemN…

  

  Git History

  

  Git History: View git log , file history, merge branches or commits.

  • Plug-in name: Git History
  • Official address:marketplace.visualstudio.com/items?itemN…

  SVN

  

  SVN: This plug-in relies on the system's SVN installation, so you need to install TortoiseSVN first.

  • Plug-in name: SVN
  • Official address:marketplace.visualstudio.com/items?itemN…
  • Features: View:
  • • ##Source Code Management View
    • Quick Difference in Gutter
    • Status Bar
    • Create Change List
    • Add file
    • Revert edit
    • Delete file
    • Create branch
    • Switch branch
    • Create patch
    • Diff changes
    • Commit changes /changelist
    • View commit message
  ##Postcode

  Postcode : Postcode can be used to create and test simple and complex HTTP/s requests, as well as view responses.

  Plug-in name: Postcode
  Official address:
  • marketplace.visualstudio.com/items?itemN…

  

  REST Client

  ##REST Client : REST Client allows you to send HTTP Request and view the response directly in Visual Studio Code.

  Plug-in name: TEST Client
  • Official address:
  marketplace.visualstudio.com/items?itemN…
  • Make a request

  Make a cURL request

  Live Share

  Live Share : Live Share enables you to collaborate with others on editing and debugging in real time, no matter what programming language you use or the type of application you are building. It allows you to instantly (and securely) share your current project, then as needed share debugging sessions, terminal instances, localhost web applications, voice calls, and more! Developers who join your session receive all editor context (e.g. language services, debugging) from your environment, ensuring they can start collaborating productively immediately without having to clone any repositories or install any SDKs.

  • Plug-in name: Live Share
  • Official address:marketplace.visualstudio.com/items?itemN…

  

  Draw.io Integration

  

  ##Draw.io Integration : This Unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.
  • Plug-in name: Draw.io Integration
  • Official address:marketplace.visualstudio.com/items?itemN…
  • Features:
  • • Edit in the Draw.io editor, or .drawio document. .dio.drawio.svg.drawio.png
  • • • ##To To create a new diagram, simply create an empty.drawio,.drawio.svg or *.drawio.png file and open it. **
      .drawio.svg.svg is a valid file that can be embedded in the Github readme! No export required.
      .drawio.png is a valid .png file! No export required. You should use them when possible with .svg - they look so much better!
      To convert between different formats, use the Draw.io: Convert To... command.
  • ##Use the offline version of Draw.io by default.
    • Multiple Draw.io themes available.
    • Collaborate with others to edit diagrams using Liveshare.
    • Nodes/edges can be linked with code spans.

  ##Markdown All in One

  Markdown All in One : Everything you need for Markdown (keyboard shortcuts, table of contents, automatic preview, etc.).

  

  Plug-in name: Markdown All in One

  • Official address:marketplace.visualstudio.com/items?itemN…
  • Markdown PDF

  ##Markdown PDF : This extension converts Markdown files to pdf, html, png or jpeg file.

  

  Plug-in name: Markdown PDF
  • Official address:marketplace.visualstudio.com/items?itemN…
  • Features: Support the following functions:
  ##Syntax highlighting
  • emoticon
    markdown-it-checkbox
    markdown container
    PRICE REDUCTION IT INCLUDES
    Plant UML
  ##markdown-it-plantuml
  • ##Mermaid
  • • Markdown Preview Enhanced
  ##Markdown Preview Enhanced: Markdown preview enhanced.
  • Plug-in name: Markdown Preview Enhanced
  • Official address:marketplace.visualstudio.com/items?itemN…

  

  For more knowledge about VSCode, please visit:vscode tutorial!