Table of Contents
1. Live Server
2. Auto Rename Tag
3. Bracket Pair Colorizer
4. Color Highlight
5. Better Comments
6. GitLens
7. VSCode-Icons
8. Tabnine
9. Project Dashboard
10. CodeSnap
11. CSS Peek
13. Auto Close Tag
14. Vetur
16. Import Cast
17. Beautify
18. Code Time
19. Settings Sync
20. Live Share
21. Code Spell Checker
23. ES7 React/Redux/GraphQL/React-Native snippets
#24. REST Client
#25. JavaScript Booster
26. Live SASS Compiler
27. Remote-SSH
28. Debugger for chrome
29. npm Intellisense
Home Development Tools VSCode [Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

Oct 08, 2022 pm 06:12 PM
vscode

This article mainly introduces some good plug-ins that I have used in the process of using VSCode over the years. These 30 VSCode plug-ins, there is always one suitable for you!

[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

1. Live Server

Live Server is a small server with real-time loading function. You can use live-server as a real-time server in the project. View the results of developed web pages or projects in real time. [Recommended learning: "vscode introductory tutorial"]

It is to start a local development server with real-time reloading function for static and dynamic pages. Click in the status bar to start or Stop the server.

[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

2. Auto Rename Tag

Use this extension to automatically rename an HTML tag when renaming it opening and closing tags. Avoid modifying only the opening tag and forgetting to modify the closing tag. The extension works with HTML, XML, PHP and JavaScript.

[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

3. Bracket Pair Colorizer

Use this plug-in to distinguish the brackets in the code with different colors. For those with many brackets The code is very practical. The plugin also supports custom bracket colors.

[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

4. Color Highlight

This extension can be used to style CSS colors. In addition to CSS, it also colors JavaScript, HTML, JSON, etc. files that do not display default colors. The plugin tints color names, RGB, RGBA and HEX colors.

[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

5. Better Comments

Better Comments extension can help us create more user-friendly comments in the code, in different forms and color notes for us to choose from.

[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

6. GitLens

GitLens enhances the Git functionality built into Visual Studio Code. GitLens helps us understand our code better. Quickly see who changed a line or block of code, why and when. Additionally, it allows us to easily explore the history and evolution of the codebase.
[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

7. VSCode-Icons

VSCode-Icons is a file image plug-in that can assign different icons to different types of files in the project. Makes it easier for us to differentiate between different file types.

After the installation is complete, follow the steps below to use it: File → Preferences → File Icon Theme → VSCode-Icons.

[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

8. Tabnine

tabnine is a multi-language plug-in that can automatically help us complete code input. Tabnine’s goal is to increase developer productivity through AI-based systems.

[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

9. Project Dashboard

Project Dashboard is a project dashboard plug-in that can display frequently accessed folders, files, etc. Pin to your dashboard to access them quickly.

[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

10. CodeSnap

CodeSnap is a vscode code screenshot capture plug-in. Just select the corresponding code segment in the project to quickly create Screenshot of the code.

[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

11. CSS Peek

The CSS Peek plug-in allows us to select a class or id name in HTML by holding down the Ctrl key. The left mouse button can directly locate the CSS of the name, improving development efficiency.

1[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

12. Path Autocomplete

Path Autocomplete provides path autocomplete for VS Code, so you don’t have to Remember those long file paths.

1[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

13. Auto Close Tag

Auto Close Tag plug-in is used to automatically complete HTML closing tags.

1[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

14. Vetur

Vue development essential plug-in, which provides useful tools for Vue.js, such as debugging, Error checking, syntax highlighting, snippets.

1[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

15. IntelliCode

IntelliCode is designed to help developers provide intelligent code suggestions. It supports Python, TypeScript/JavaScript, React, and Java by default. IntelliCode saves time by putting the content you're most likely to use at the top of the list. IntelliCode recommendations are based on thousands of open source projects on GitHub.

1[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

16. Import Cast

plugin is used to display the size of the imported package inline in the editor. This extension uses webpack to detect the size of imported packages.

[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

17. Beautify

Beautify can help us format the display of code in a more beautiful way. It supports popular languages ​​like JavaScript, JSON, CSS, Sass, and HTML.

1[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

18. Code Time

Code Time can calculate the time we use Visual Studio Code. A variety of data indicators are provided.

1[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

19. Settings Sync

Settings Sync is used to save Visual Studio Code settings on GitHub and easily It is used for other computers, such as information about extensions or system settings. This plugin makes it easy to set up for many different machines without having to open previously installed extensions and related settings.

1[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

20. Live Share

Live Share helps developers on the team share code in the program in real time, making it easy to edit and Debuggers such as shared debugging sessions, terminal instances, localhost web applications, voice calls, etc.

[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

21. Code Spell Checker

Code Spell Checker can help us check whether there are spelling errors in words. The checking rules follow camelCase (camel case naming Law).

2[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

22. Error Lens

**Error Lens ** is a tool for checking code (errors, warnings, syntax issues ) is a plug-in for highlighting. Error Lens enhances a language's diagnostic capabilities by making diagnostics more prominent, highlighting the entire line where a diagnostic generated by the language occurs, and printing diagnostic messages online in line at the location of the line of code.

2[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

23. ES7 React/Redux/GraphQL/React-Native snippets

React/Redux/Reatc Native/react-router Smart syntax tips, a must-have for React developers. With the help of this code snippet, you can easily create class-based components, function components.

2[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

#24. REST Client

REST Client is a VS Code extension that allows HTTP requests to be sent and viewed directly in VS Code response. It is Postman for VS Code and can be easily integrated into the code editor. The REST client supports both REST and GraphQL APIs.

2[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

#25. JavaScript Booster

JavaScript Booster automatically suggests quick actions to refactor or enhance your code by analyzing the code and its context. It supports multiple code operations from refactoring conditionals, declarations, functions, TypeScript, promises, JSX, and more.

2[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

26. Live SASS Compiler

The Live SASS Compiler extension can compile or translate SASS or SCSS files into CSS files in real time.

[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

27. Remote-SSH

Provided Remote-SSH can use any remote machine with an SSH server as a development environment. Because the extension runs commands directly on the remote machine, you can quickly operate the remote server without having source code on your local machine.

ssh (1).gif

28. Debugger for chrome

Debugger for chrome is a VS Code extension developed by Microsoft, which allows us to Debugging JS code. You can set breakpoints, step through code, debug dynamically added scripts, and more. It helps detect errors early in the development process.

2[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

29. npm Intellisense

After npm installs the package, provide the plug-in when require to get smart prompts, in the import statement Automatically populate npm modules.

2[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

30. Image preview

When the mouse is hovering over the link of the image, you can preview it in real time The image, among other things, can also see the size and resolution of the image.

[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you

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

The above is the detailed content of [Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you. 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

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

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)

What computer configuration is required for vscode What computer configuration is required for vscode Apr 15, 2025 pm 09:48 PM

VS Code system requirements: Operating system: Windows 10 and above, macOS 10.12 and above, Linux distribution processor: minimum 1.6 GHz, recommended 2.0 GHz and above memory: minimum 512 MB, recommended 4 GB and above storage space: minimum 250 MB, recommended 1 GB and above other requirements: stable network connection, Xorg/Wayland (Linux)

How to define header files for vscode How to define header files for vscode Apr 15, 2025 pm 09:09 PM

How to define header files using Visual Studio Code? Create a header file and declare symbols in the header file using the .h or .hpp suffix name (such as classes, functions, variables) Compile the program using the #include directive to include the header file in the source file. The header file will be included and the declared symbols are available.

How to switch Chinese mode with vscode How to switch Chinese mode with vscode Apr 15, 2025 pm 11:39 PM

VS Code To switch Chinese mode: Open the settings interface (Windows/Linux: Ctrl, macOS: Cmd,) Search for "Editor: Language" settings Select "Chinese" in the drop-down menu Save settings and restart VS Code

Common commands for vscode terminal Common commands for vscode terminal Apr 15, 2025 pm 10:06 PM

Common commands for VS Code terminals include: Clear the terminal screen (clear), list the current directory file (ls), change the current working directory (cd), print the current working directory path (pwd), create a new directory (mkdir), delete empty directory (rmdir), create a new file (touch) delete a file or directory (rm), copy a file or directory (cp), move or rename a file or directory (mv) display file content (cat) view file content and scroll (less) view file content only scroll down (more) display the first few lines of the file (head)

How to solve the problem of vscode Chinese annotations becoming question marks How to solve the problem of vscode Chinese annotations becoming question marks Apr 15, 2025 pm 11:36 PM

How to solve the problem that Chinese comments in Visual Studio Code become question marks: Check the file encoding and make sure it is "UTF-8 without BOM". Change the font to a font that supports Chinese characters, such as "Song Style" or "Microsoft Yahei". Reinstall the font. Enable Unicode support. Upgrade VSCode, restart the computer, and recreate the source file.

How to set vscode in Chinese How to set vscode in Chinese Apr 15, 2025 pm 09:27 PM

There are two ways to set up a Chinese language in Visual Studio Code: 1. Install the Chinese language package; 2. Modify the "locale" settings in the configuration file. Make sure Visual Studio Code version is 1.17 or higher.

vscode Previous Next Shortcut Key vscode Previous Next Shortcut Key Apr 15, 2025 pm 10:51 PM

VS Code One-step/Next step shortcut key usage: One-step (backward): Windows/Linux: Ctrl ←; macOS: Cmd ←Next step (forward): Windows/Linux: Ctrl →; macOS: Cmd →

How to use VSCode How to use VSCode Apr 15, 2025 pm 11:21 PM

Visual Studio Code (VSCode) is a cross-platform, open source and free code editor developed by Microsoft. It is known for its lightweight, scalability and support for a wide range of programming languages. To install VSCode, please visit the official website to download and run the installer. When using VSCode, you can create new projects, edit code, debug code, navigate projects, expand VSCode, and manage settings. VSCode is available for Windows, macOS, and Linux, supports multiple programming languages ​​and provides various extensions through Marketplace. Its advantages include lightweight, scalability, extensive language support, rich features and version

See all articles