VS Code Cool Extensions
VS Code Cool Extensions!
Hello fellow Coders! Did you know that you can actually have fun while coding using VS Code?
Visual Studio Code isn’t just a text editor — it’s a customizable coding playground 🎡
In this tutorial, I’ll show you 5 of my favorite VS Code extensions that make coding faster, cleaner, and way more fun (yes, even cute). From saving time from constantly reloading your browser to adding a tiny pet that runs around your editor — this guide has it all.
## Don’t Have VS Code Yet?
No worries! You can download it for free at https://code.visualstudio.com
Just choose your operating system (Windows, Mac, or Linux), install it, and open it up — then you're ready to go!
Once you have VS Code installed, we can proceed with the extensions.
.gif)
For those who haven't tried installing extensions, what are extensions?
VS Code extensions are software add-ons that extend the functionality of the Visual Studio Code Editor. This allows the users to use certain features to enhance their coding experience.
Let’s dive into the extensions every web developer (or chaotic student) should try.
Below are 5 amazing ones you should definitely check out 👇
1. Live Server
Live server opens your HTML file in the browser and automatically reloads the page whenever you save your file. It gives you a live preview of your work without the need to manually refresh your browser.
This is really perfect for front-end development. Whether your are styling with CSS or experimenting with HTML Structure, you'll see your changes instantly.
How to install and use
Step 1: Open the extensions tab (or press Ctrl + Shift + X) and you should see something like this
Or you could just click this icon below:
Step 2: Search for Live Server
Step 3: Click Install
Step 4: Once it is installed, you should see that is is already installed
Step 5: Open an HTML file, then right-click on the file, and choose "Open with Live Server"
Below, I have here a basic HTML build with bootstrap.
Step 6: To see the magic, try updating your file and saving it.
A browser should open and you should see your code come to life. See example below:
The refresh should happen automatically and you should see your updates instantly.
You will know if the file isn't saved yet if you still see a circle beside your file name.
Step 1: Search for Excalidraw and install it
And there you have it! Have fun!
Step 2: In any code file, type a comment and include TODO: or FIXME:
If you extension is successfully installed, your Todo and Fixme comment should be automatically highlighted.
Step 1: Search for VS Code Pets and install it
Happy coding with your pets!
After saving, the circle beside your file name is gone your page auto-reloads.
There you go! On to the next extension.
2. Emmet
Emmet is built into VS Code therefore you don't need to install it from the marketplace. This extension helps you write HTML and CSS faster using shortcut syntax. For example, typing ul>li*3 and pressing Tab would let you create an unordered list with 3 items instantly.
It is a massive time-saver! You can generate a bunch of code with just a few keystrokes which is great for repetitive layouts or quick structure. Let's generate an HTML boilerplate.
This is pre-built in VS Code
Step 1: Prepare an empty html file
Step 2: Type "!", this small window should show and then, press Tab or Enter
And there you have your HTML boilerplate!
Now let's try adding an unordered list
Step 1: Type the emmet shortcut ul>li*3, it should show a small preview, then press tab or enter
And there you have it!
3. Excalidraw
Excalidraw is an extension that lets you create diagrams. It is like having a Paint app inside VS Code!
This is great for planning UI layouts, wireframes, userflows, or just doodling while coding.
It is awesome because sometimes, you just need to think visually. It's like you have your own whiteboard!
How to install and use
Step 2: Create a file with an extension of .excalidraw in your folder. My example is sample.excalidraw. If you have installed the extension properly, you should see a blank canvass that should let you draw stuff
4. Todo Highlight
Todo Highlight scans your code for comments like // TODO: or // FIXME: and visually highlights them so they stand out while you work. It also gives you an easy way to look for things you need to do or fix while scanning your code.
You could also actually change the colors according to your preference in the settings. It's like putting sticky notes in your code.
How to install and use
Step 1: Search for Todo Higlight and install itStep 2: In any code file, type a comment and include TODO: or FIXME:
5. VS Code Pets
VS Code Pets adds cute pets to your editor. You can literally code with a dog, cat, or even a snake chilling in your workspace.
It doesn't have much of a functionality but with how coding can get really stressful, having these adorable pets bouncing around your screen makes debugging not so bad.
How to install and use
Step 2: Press ctrl + shift + P to open Command Palette, then type and run:
Start pet coding session
Step 3: In the lower left corner of your code editor, you should see this
Step 4: Click the + sign and you should see a list of pets
Step 5: Select as many pets as you like! You can choose their color and even add a name for them! Then, in the lower left corner of your code editor, you will see all your cute pets running around and doing their thing!
There you have it — 5 cool VS Code extensions that’ll boost your workflow, keep you organized, and maybe even make you smile (I’m looking at you, VS Code Pets 🐾).
Whether you're building full websites or just learning the ropes, these tools can help you code faster, smarter, and with a little more fun. Try a few out, mix and match, and find what works best for *your* dev flow.
Here are some of additional resources you can take a look at:
Thanks for stopping by! Don’t forget to check out the video demo below 👇