Development ToolsVSCode36 commonly used front-end plug-ins in vscode, search and download directly!36 commonly used front-end plug-ins in vscode, search and download directly!
Take advantage of the free time to sort out some commonly used vscode plug-ins, so that you have to search and download them again when you change computers later. , students who need it can save it first, and we will continue to update it if we get some new plug-ins later! [Recommended learning: "vscode tutorial"]
1. Indent-Rainbow
Let the indentation be colored
2. Material Icon Theme
Good-looking file icon
3. Beautify
Code formatting
4. Power Mode
A cool keyboard tapping effect
5. Vetur
Powerful vue development support tool
6. vscode-fileheader
File header annotation information
7. Vue CSS Peek
Provide css conversion definition support for single-page vue files
8. Vue Peek
Click on the component to jump to the component definition file
9. Vue VSCode Snippets
Some data, method and other functions in Vue automatically complete prompts to facilitate quick code writing;
10. Little Overlord
A Super Mario that can be played in vscode
11. translate. Hold the mouse over the selection for a few seconds to view the translated content.
12. filesize
Display the current file size in the status bar.
13. TabNine
Al auxiliary code completion artifact. Appropriate fields can be matched for you based on the coding habits you have written.
14. Auto Close Tag
Auto Close Tag
15. Auto Import
Auto Import Module
16. Auto Rename Tag
Ends automatic renaming of tag name when changing tag name
17. Quokka
is a debugging tool plug-in that provides real-time feedback based on the code you are writing. It is easy to configure and provides the ability to preview functions and calculated value results of variables. Plus, it works out of the box in projects using JSX or TypeScript.
18. CSS Peek
Using this plugin, you can trace to where CSS classes and ids are defined in your stylesheet. When you right-click the selector in the HTML file and select the "Go to Definition and Peek definition" option, it will send you the CSS code for the styling.
19. HTML Boilerplate
By using the HTML Boilerplate plug-in, you get rid of the trouble of rewriting the header and body tags for new HTML files. You just type html into an empty file and press the Tab key to generate a clean document structure.
20. Better Comments
Improve your code and make it more attractive by adding colorful comments.
21. Error Lens
The warnings, errors, syntax problems (prompt wavy lines), etc. diagnosed by the editor are filled with color in the line background. Highlight the prompt and display diagnostic information at the end.
22. Prettier
is currently the most popular code formatter in web development. With this plugin installed, it automatically applies Prettier and quickly formats entire JS and CSS documents into a unified code style. If you still want to use ESLint, there is also a Prettier-Eslint plug-in, don’t miss it!
23. color highlight
A commonly used code highlighting plug-in
24. Color Picker
Color picker
25. Git Blame
Can find out who wrote that code
26. ESLint
eslint plugin
27. TODO Highlight
TODO Highlight
28. Trailing Spaces
Highlight trailing spaces and let your "space" obsessive-compulsive disorder appear
29. VS Code Counter
Statistics code The total number of lines, the number of comment lines, the number of blank lines, and the language used.
30. Bracket Pair Colorizer
Colorize matching brackets
31. Code Spell Checker
spellchecker. For example, if the word "banana" is misspelled as "banane", you will be prompted whether to change it to "banana". You can also add "banane" to the dictionary of the checker. 32. Path Intellisense
Autocomplete file names
33. Rainbow Fart
Official overview:VSCode Rainbow Fart is an extension that continues to praise your awesome writing when you are programming. It can play a real-person voice that is close to the meaning of the code based on the code keywords.
34. any-rule
You can quickly use regular expressions in vscode without the help of Du Niang!
35. ## Todo Tree
Todo Tree is a plug-in that prompts to-do events. Add //TODO## at the beginning of the code comment. #, the entire comment will be highlighted;
36. ## project-tree
This is a plug-in that automatically generates the project structure; For more programming-related knowledge, please visit:Introduction to Programming! !
The above is the detailed content of 36 commonly used front-end plug-ins in vscode, search and download directly!. For more information, please follow other related articles on the PHP Chinese website!
Visual Studio and VS Code: Understanding Their Key DifferencesApr 19, 2025 am 12:16 AMVisualStudio is suitable for large-scale projects and enterprise-level application development, while VSCode is suitable for rapid development and multilingual support. 1. VisualStudio provides a comprehensive IDE environment and supports Microsoft technology stack. 2.VSCode is a lightweight editor that emphasizes flexibility and scalability, and supports cross-platform.
Is Visual Studio Still Free? Understanding the AvailabilityApr 18, 2025 am 12:05 AMYes, some versions of VisualStudio are free. Specifically, VisualStudioCommunityEdition is free for individual developers, open source projects, academic research, and small organizations. However, there are also paid versions such as VisualStudioProfessional and Enterprise, suitable for large teams and enterprises, providing additional features.
Using Visual Studio: Developing Software Across PlatformsApr 17, 2025 am 12:13 AMCross-platform development with VisualStudio is feasible, and by supporting frameworks like .NETCore and Xamarin, developers can write code at once and run on multiple operating systems. 1) Create .NETCore projects and use their cross-platform capabilities, 2) Use Xamarin for mobile application development, 3) Use asynchronous programming and code reuse to optimize performance to ensure efficient operation and maintainability of applications.
How to format json with vscodeApr 16, 2025 am 07:54 AMThe ways to format JSON in VS Code are: 1. Use shortcut keys (Windows/Linux: Ctrl Shift I; macOS: Cmd Shift I); 2. Go through the menu ("Edit" > "Format Document"); 3. Install JSON formatter extensions (such as Prettier); 4. Format manually (use shortcut keys to indent/extract blocks or add braces and semicolons); 5. Use external tools (such as JSONLint and JSON Formatter).
How to compile vscodeApr 16, 2025 am 07:51 AMCompiling code in VSCode is divided into 5 steps: Install the C extension; create the "main.cpp" file in the project folder; configure the compiler (such as MinGW); compile the code with the shortcut key ("Ctrl Shift B") or the "Build" button; run the compiled program with the shortcut key ("F5") or the "Run" button.
How to install vscodeApr 16, 2025 am 07:48 AMTo install Visual Studio Code, please follow the following steps: Visit the official website https://code.visualstudio.com/; download the installer according to the operating system; run the installer; accept the license agreement and select the installation path; VSCode will start automatically after the installation is completed.
How to enlarge fonts with vscodeApr 16, 2025 am 07:45 AMThe methods to enlarge fonts in Visual Studio Code are: open the settings panel (Ctrl, or Cmd,). Search and adjust "Font Size". Choose "Font Family" with the right size. Install or select a theme that provides the right size. Use keyboard shortcuts (Ctrl or Cmd) to enlarge the font.
How to connect to a remote server with vscodeApr 16, 2025 am 07:42 AMHow to connect to a remote server through VSCode? Install Remote - SSH Extended Configuration SSH Create a Connection in VSCode Enter connection information: Host, Username, Port, SSH Key Double-click the saved connection in Remote Explorer
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
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
WebStorm Mac version
Useful JavaScript development tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
