search
HomeDevelopment ToolsVSCode8 useful VSCode extension tools that will make your coding fun!

8 useful VSCode extension tools that will make your coding fun!

Having the right tools can make your development job easier. Many developers use VSCode as a development tool. VSCode allows the installation of various extension tools. [Recommended: vscode Basic Tutorial]

There are too many extension tools available on the Visual Studio Marketplace. We will focus on the following 8 extension tools.

Even the simplest tools empower people to do great things - Biz Stone

All of these plugins are available in the Visual Studio Marketplace Get it for free on.

1. REST Client

REST Client extension tool allows you to send HTTP requests and view the responses directly in VSCode . No more using external applications to send HTTP requests to the server.

This is a very popular extension tool favored by many developers and has been installed more than 1 million times. Also I've been using this plugin myself for a while and I think it's great.

Sending a request has become so easy. The syntax is very concise and provides many options to suit your needs. A simple GET request only requires one line of code, the GET keyword followed by URL.

8 useful VSCode extension tools that will make your coding fun!

You should really try the REST Client extension tool.

2. CSS Peek

If you are a web developer, CSS Peek is absolutely necessary. With this extension, you can hover over an element's class name or element ID to see the CSS rules applied to that element.

As shown below:

8 useful VSCode extension tools that will make your coding fun!

This extension tool allows you to view more than just styles. It also has a "go to" feature that allows you to instantly jump to the CSS rule applied to the element. This saves you a lot of time looking for the right selector.

3. Beautify

If you like clean code, then you will definitely like Beautify.

Beautify Supports JavaScript, HTML, CSS, Sass and JSON .

The best thing about this extension is that all options are fully customizable -- like indent size and whether the file should end on a new line. If you code in several programming languages, Beautify has you covered. Options for each programming language can be customized.

The extension has been downloaded more than 5 million times and ranks among the top 20 most popular installed extensions.

4. Auto Rename Tag

Auto Rename Tag The work done by the extension tool is very simple, but it is very useful. The extension will automatically rename pairs of HTML tags. If you are renaming an opening tag, it will change the corresponding closing tag; and vice versa.

If you want to automatically add a closing tag as you type within the opening tag's closing bracket, you should take a look at the Auto Close Tag extension. Installing these two extensions is very useful and will help you write HTML in a more efficient and consistent way.

8 useful VSCode extension tools that will make your coding fun!

5. Quokka.js

Quokka.js is the prototype in the editor Platform that provides access to project files, inline reports, and more. Values ​​in the code are updated at runtime and displayed next to the code in the IDE as you type it.

a!

8 useful VSCode extension tools that will make your coding fun!

6. Night Owl

Without a stunning theme, what is the value of optimizing VS code? Not much, right? ! Since you spend so much time on VS Code, you'd better make it look better by installing a theme.

Night Owl theme is a beautiful theme used by many developers. According to the description of this theme, it is fine-tuned and optimized for those of us who like to code late into the night.

8 useful VSCode extension tools that will make your coding fun!

If you don't like the Night Owl theme, try it out: Pink Cat Boo, Panda Syntax, Mini Dark, Gatito Theme, One Monokai, these theme colors are also very beautiful~

7. JavaScript (ES6) code snippets

The last one to introduce The extension tool is the JavaScript (ES6) code snippets extension tool. The extension has multiple code snippets that you can use to generate ES6 code snippets.
For example, type clg and press Enter to get a console.log. It may take you a while to get familiar with all the code snippets, but once you master it, you can type ES6 code very quickly

8. TabNine

TabNine Yes The best code completion tool I have ever used, TabNine is an automatic code completion tool based on artificial intelligence. TabNine will give the probability of each candidate during automatic completion, and follow the Sort by probability. In addition, the source and address of the candidates will be given, making it easier to query and read. It has been downloaded more than 30W times so far.

8 useful VSCode extension tools that will make your coding fun!

Well, if you see this, it means you are in true love. Do you want to add a star to my Github?

8 useful VSCode extension tools that will make your coding fun!

Related recommendations: Programming Teaching! !

The above is the detailed content of 8 useful VSCode extension tools that will make your coding fun!. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:segmentfault. If there is any infringement, please contact admin@php.cn delete
How to format json with vscodeHow to format json with vscodeApr 16, 2025 am 07:54 AM

The 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 vscodeHow to compile vscodeApr 16, 2025 am 07:51 AM

Compiling 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 vscodeHow to install vscodeApr 16, 2025 am 07:48 AM

To 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 vscodeHow to enlarge fonts with vscodeApr 16, 2025 am 07:45 AM

The 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 vscodeHow to connect to a remote server with vscodeApr 16, 2025 am 07:42 AM

How 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

How to run vue with vscodeHow to run vue with vscodeApr 16, 2025 am 07:39 AM

Running a Vue project in VSCode requires the following steps: 1. Install the Vue CLI; 2. Create a Vue project; 3. Switch to the project directory; 4. Install project dependencies; 5. Run the development server; 6. Open the browser to visit http://localhost:8080.

How to compare two files with vscodeHow to compare two files with vscodeApr 16, 2025 am 07:36 AM

How to compare files in VSCode: 1. Open two files, 2. Enable the Differences view (View menu), 3. View the Differences (Add green, delete red, modify purple), 4. Use the arrow keys to navigate, 5. Accept or reject changes. Additional features include merging changes, copying changes, viewing details, and editing differences.

How to run js code with vscodeHow to run js code with vscodeApr 16, 2025 am 07:33 AM

How to run JS code in VSCode? Create .js files and write code; install Node.js and npm; install Debugger for Chrome; open the debug console; select Chrome; add debug configuration; set debug scripts; run code; debug code (optional).

See all articles

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)
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

MinGW - Minimalist GNU for Windows

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.

Atom editor mac version download

Atom editor mac version download

The most popular open source editor