[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!