Table of Contents
1. Project Manager
2. GitLens
3. Tabout
4. Live Server
5. Code Spell Checker
6 . Image Preview
7. Import Cost
8. Parameter Hints
Home Development Tools VSCode 11 bare VSCode essential plug-ins to help you create a front-end development IDE

11 bare VSCode essential plug-ins to help you create a front-end development IDE

Dec 01, 2022 pm 08:52 PM
vscode front end visual studio code

11 bare VSCode essential plug-ins to help you create a front-end development IDE

VSCode Lightweight, open source, freshly downloaded VSCode can be said to have nothing, not even a project management function.

The lightweight VSCode may be a bit naive for back-end development, but it is just right for front-end development. After all, you don’t need to do any Docker, database, etc. Just install two VSCode plug-ins and open the web page. start work.

This article will introduce some bare VSCode essential plug-ins from the perspective of a front-end developer to create a front-end friendly development IDE. [Recommended learning: vscode tutorial, Programming video]

1. Project Manager

Project Manager is used to manage projects , with it, you can quickly switch between various projects in VSCode, without having to painfully go through the file directories level by level to finally select the project file you want.

Just enter Save Project in the Palette and press Enter to save the current project.

Then you can view the items you added in the right menu, and click on the pointed item to switch to the item, which is very convenient.

It also provides Tag tags to subdivide your project.

2. GitLens

GitLens You can tell what it does from the name. VSCode has built-in Git help plus this plug-in The interactive experience is better than Webstorm.

It can easily view code modification information.

You can view the change information of a certain line

Hover and you can also view the specific information

The introduction page of GitLens has more than 10,000 words, which shows that it has complete functions, so I won’t go into details here.

3. Tabout

The Tab key of VSCode outputs \t by default, for those who are accustomed to using WebStorm and Eclipse It's very uncomfortable. If you want to use Tab to jump out of the brackets, you can use this TabOut.

4. Live Server

Live Server is also well-known, it can go to real-time Hot load and update code.

In fact, a Websocket is used to implement code updates. Live Server is writing some test HTML pages and it is really useful.

5. Code Spell Checker

When spelling some variable methods, we may misspell words, Code Spell Checker can help detect your mistakes.

When an incorrect word is detected, you can also look at some of the word suggestions it gives you:

6 . Image Preview

When multiple image URLs are introduced into the project, it is a pain to preview each image, Image preview Solved such a thing.

7. Import Cost

11 bare VSCode essential plug-ins to help you create a front-end development IDE

#In front-end projects, we often need to import various dependency packages. Import Cost You can view the size of the imported package to facilitate optimization.

8. Parameter Hints

##Parameter Hints will display the parameter names of the function.

9. Highlight Matching Tag

Highlight Matching Tag can highlight your HTML and JSX code matching symbols.

10. indent-rainbow

Indent-rainbow You can also indent the code Turn into a beautiful rainbow?.

11 bare VSCode essential plug-ins to help you create a front-end development IDE

11. Blockman

Blockman can highlight your current location code editing block.

11 bare VSCode essential plug-ins to help you create a front-end development IDE

Postscript

For VSCode, the number of plug-ins is overwhelming. For common development scenarios, there are many corresponding processing plug-ins that need to be used. Just search in the Marketplace, such as React project:

It is worth noting that installing too many plug-ins is not necessarily a good thing. The plug-in mechanism of VSCode is also event-driven. The disadvantages brought by too many plug-ins are on the one hand the conflict of plug-in functions and on the other hand the performance Consumption, that is, making VSCode laggy.

For more knowledge about VSCode, please visit: vscode Basic Tutorial!

The above is the detailed content of 11 bare VSCode essential plug-ins to help you create a front-end development IDE. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to view word documents in vscode How to view word documents in vscode How to view word documents in vscode How to view word documents in vscode May 09, 2024 am 09:37 AM

First, open the vscode software on the computer, click the [Extension] icon on the left, as shown in ① in the figure. Then, enter [officeviewer] in the search box of the extension interface, as shown in ② in the figure. Then, from the search Select [officeviewer] to install in the results, as shown in ③ in the figure. Finally, open the file, such as docx, pdf, etc., as shown below

How to draw a flow chart with vscode_How to draw a flow chart with visual_studio code How to draw a flow chart with vscode_How to draw a flow chart with visual_studio code Apr 23, 2024 pm 02:13 PM

First, open visual studio code on the computer, click the four square buttons on the left, then enter draw.io in the search box to query the plug-in, click Install. After installation, create a new test.drawio file, then select the test.drawio file, enter the editing mode on the left There are various graphics on the side. You can draw the flow chart by selecting at will. After drawing, click File → Embed → svg and then select Embed. Copy the svg code. Paste the copied svg code into the html code. Open the html web page and you can see it. Click on the picture on the web page to jump to the flow chart. On this page, you can zoom in and out of the flow chart. Here, we choose to click on the pencil pattern in the lower right corner to jump to the web page.

How to write Maude in Vscode_How to write Maude in Vscode How to write Maude in Vscode_How to write Maude in Vscode Apr 23, 2024 am 10:25 AM

First, you can search for the Maude plug-in in the vscode plug-in manager. Then, create a new file with the extension maude to use maude's code snippets and syntax highlighting. Terminal -> New Terminal can open the vscode built-in terminal in the current folder to run the maude or full-maude program. In maude's official tutorial, there are also examples of http clients, which can be called and run as shown in the figure. If you want to associate files with the fm extension, open settings, search for fileassociations in user settings, and open settings.json. Just add an entry to the file association, that is, the entry from *.fm to maude. But full

Caltech Chinese use AI to subvert mathematical proofs! Speed ​​up 5 times shocked Tao Zhexuan, 80% of mathematical steps are fully automated Caltech Chinese use AI to subvert mathematical proofs! Speed ​​up 5 times shocked Tao Zhexuan, 80% of mathematical steps are fully automated Apr 23, 2024 pm 03:01 PM

LeanCopilot, this formal mathematics tool that has been praised by many mathematicians such as Terence Tao, has evolved again? Just now, Caltech professor Anima Anandkumar announced that the team released an expanded version of the LeanCopilot paper and updated the code base. Image paper address: https://arxiv.org/pdf/2404.12534.pdf The latest experiments show that this Copilot tool can automate more than 80% of the mathematical proof steps! This record is 2.3 times better than the previous baseline aesop. And, as before, it's open source under the MIT license. In the picture, he is Song Peiyang, a Chinese boy. He is

How to enable background updates in vscode How to enable background updates in vscode How to enable background updates in vscode How to enable background updates in vscode May 09, 2024 am 09:52 AM

1. First, after opening the interface, click the file menu in the upper left corner. 2. Then, click the settings button in the preferences column. 3. Then, in the settings page that jumps, find the update section. 4. Finally, click the mouse to check and enable it. Download and install the new VSCode version button in the background on Windows and restart the program.

How to add files to vscode workspace How to add files to vscode workspace How to add files to vscode workspace How to add files to vscode workspace May 09, 2024 am 09:43 AM

1. First, open the vscode software, click the explorer icon, and find the workspace window 2. Then, click the file menu in the upper left corner and find the add folder to workspace option 3. Finally, find the folder location in the local disk , click the add button

How to disable wsl configuration file in vscode How to disable wsl configuration file in vscode How to disable wsl configuration file in vscode How to disable wsl configuration file in vscode May 09, 2024 am 10:30 AM

1. First, open the settings option in the settings menu. 2. Then, find the terminal column in the commonly used page. 3. Finally, uncheck the usewslprofiles button on the right side of the column.

How to set animation smooth insertion in VScode VScode tutorial to set animation smooth insertion How to set animation smooth insertion in VScode VScode tutorial to set animation smooth insertion May 09, 2024 am 09:49 AM

1. First, after opening the interface, click the workspace interface 2. Then, in the open editing panel, click the File menu 3. Then, click the Settings button under the Preferences column 4. Finally, click the mouse to check the CursorSmoothCaretAnimation button and save Just set it

See all articles