


[Organization and sharing] 30 VSCode plug-ins, there is always one suitable for you
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
12. Path Autocomplete
Path Autocomplete provides path autocomplete for VS Code, so you don’t have to Remember those long file paths.
13. Auto Close Tag
Auto Close Tag plug-in is used to automatically complete HTML closing tags.
14. Vetur
Vue development essential plug-in, which provides useful tools for Vue.js, such as debugging, Error checking, syntax highlighting, snippets.
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.
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.
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.
18. Code Time
Code Time can calculate the time we use Visual Studio Code. A variety of data indicators are provided.
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.
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.
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).
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.
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.
#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.
#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.
26. Live SASS Compiler
The Live SASS Compiler extension can compile or translate SASS or SCSS files into CSS files in real time.
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.
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.
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.
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.
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



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

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

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.

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 →

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
