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

This article will share with you 23 front-end VSCode plug-ins to help you improve development efficiency and get twice the result with half the effort. Come and collect it!

VSCode is a powerful IDE for our front-end development, so choosing easy-to-use plug-ins can improve development efficiency, and then use the remaining time to fish. Necessary. [Recommended learning: "vscode introductory tutorial"]

Chinese (Simplified)

vscode We all I know that it is Microsoft's open source software. For students who are not good at English, the first thing to do is to use Chinese localization, so the author recommends the Chinese plug-in.

Chinese (Simplified) Language Pack for Visual Studio Code: This Chinese (Simplified) language pack provides a localized interface for VS Code.

• Plug-in name: Chinese (Simplified) (Simplified Chinese) Language Pack for Visual Studio Code
• Official address: marketplace.visualstudio.com/items?itemN…
• Usage: The default UI language can be overridden by explicitly setting the VS Code display language using the "Configure Display Language" command. Press Ctrl Shift P to display the Command Panel, and then type display to filter and display the Configure Display Language command. Press "Enter" and a list of installed languages ​​by locale is displayed with the current language setting highlighted. Select another "Language" to switch the UI language. See the documentation for more information.

Polacode-2020

##Polacode-2020 : If You want an easy way to provide those nice visual effects to any selection of your clips.

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

• • Select the range that needs to be screenshot to generate a screenshot of the code block
  • You can set the desired shadow and background color

##Usage: command shift p, fn F1(Mac) / ctrl shift p(Window), select Polacode, and then select the range you want to screenshot

CodeSnap

CodeSnap : Take beautiful screenshots of your code in VS Code!

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

• Quickly Save Screenshot of Code
  Copy screenshot to clipboard
  Show line numbers
  Many other configuration options

Usage: Select the code block to be intercepted, and then right-click CodeSnap

Image preview

Image preview : In the gap of the editor Neutralize and hover over the image to preview the image.

• Plug-in name: Image preview
• Official address: marketplace.visualstudio.com/items?itemN…
• Features: Images introduced either in HTML tags or styles can be previewed in the editor gap and on mouse hover
• Usage: Images can be previewed in the editor's gaps and by hovering over image links

Image Sprites

When developing certain pages, you will always encounter the need to have many small images. At this time, using sprite images can reduce the number of server requests and To save bandwidth, it is a good choice to use this plug-in without UI help.

Image Sprites: Image sprites are collections of images placed into a single image. Web pages that contain many images may take a long time to load and generate multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.

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

• • ##Easy to create and update image sprites
  • Support png, jpg and bmp images
  • Configure vertical or horizontal sprite layout
  • Use sprite image position to generate LESS, Sass or CSS file
  • You can manage all sprites with different setting options

• Usage:

• • All images in the Sprite folder
  Right click on the folder containing the images and select Create Image Sprite

• #Sprite some images
  • Select the image, right-click and select Create Image Sprite

##These two methods will generate a setting .sprite files and the default files generated. image file.css

Svg Preview

When you find a suitable svg image but it is inappropriate due to color, shape, etc., you can use this plug-in to modify it.

Svg Preview: VSCode’s Svg preview.

Plug-in name: Svg Preview

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

• Real-time preview of svg files and internal files of svg
  • Pan and zoom for preview (up to 32767%)

##file-size

file-size : A simple extension. Displays the current text file size in the status bar. The status will be updated when you save a file or change the active tab.

Plug-in name: file-size

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

Live Server

Live Server: Start a local development server with live reloading capabilities for static and dynamic pages.

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

• • ## Fast development live server with live browser reloading.
  • Start or stop the server with a single click from the status bar.
  • Open an HTML file into the browser from the Explorer menu. [Quick Gif Demonstration].
  • Supports excluding files for change detection.
  • Hot key control.
  • Customizable port number, server root directory, and default browser.
  • Supports any browser using advanced command line (Example: Firefox Nightly).
  • Support for Chrome debugging add-ons (more info). [Quick Gif Demonstration].
  • Connect remotely via Wi-Fi (for example: connect using a mobile device) [Need help? See FAQ section]
  • Use preferred hostname * (localhost or 127.0.0.1) *.
  • Customizable support tags for the Live Reload feature. (Default is Body or head)
  • SVG support
  • https support.
  • Support agents.
  • Enable CORS
  • Support multi-root workspaces.
  • Support any file or even dynamic pages through Live Server Web Extension.

##Profile Switcher

Profile Switcher: This extension allows you to define many settings profiles and you can easily switch between them. The original idea for this extension came from me wishing there was an easy way for me to switch my VS Code to settings that better optimize rendering (change themes, increase font size, etc.).

Plug-in name: Profile Switcher
Official address:
• marketplace.visualstudio.com/items?itemN…
Features: This extension introduces four new commands that can be used from the command palette. All commands start with Profile Switcher

Project Manager

Project Manager is a good project management plug-in when you need to open many projects of different natures in vscode.

Project Manager : It helps you easily access your

projects

no matter where they are located. Don’t miss those important items again. You can define your own Projects (also known as Favorites), or choose to automatically detect Git, Mercurial, or SVN repository, VSCode folder, or any other folder.

• Plug-in name: Project Manager
• Official address: marketplace.visualstudio.com/items?itemN…
• Features: Available commands:

• • 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
  • #html Shift Alt B file, or select a browser. You can also right click like on the picture:

## when When you select oepn in Other Browsers, a list of browsers is displayed and you can select one to open the current file.

## 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 in VS Code and unlocks it capture the untapped knowledge in each repository. It helps you intuitively Visualize code authorship, seamlessly navigate and explore Git repositories with Git comparison comments and CodeLens, and gain value with rich visualizations and powerful comparison commands Insights and 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!
  

The above is the detailed content of 23 front-end VSCode plug-ins that improve development efficiency (come and collect them). For more information, please follow other related articles on the PHP Chinese website!