DEV Community

Cover image for Best VS Code extensions for Beginners
Haris#
Haris#

Posted on

Best VS Code extensions for Beginners

Hi everyone,
I’m Haris and I’m a newbie to the developer realm. Today I'd like to share my favourite VS Code extensions that will definitely help you if you’re starting out like me.

Prettier

Prettier extension for VS CodePrettier is a code formatter that greatly improves readability in teams. It's a tough job to create consistent code formatting in large codebases. As soon as you install prettier in your project, it gets implemented throughout your dev process. It works as automatic formatting on save or while you’re typing. Prettier is a well renowned extension that saves time and improves readability for teams and individuals as well.
Check out prettier here:
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Live Preview

Live Preview extension for VS CodeLive preview hosts a local server where you can preview your web projects inside VS code. It has many preview features including HTML file previewing, Embedded preview, Persistent Server task with server Logging, External browser Previewing & Debugging, Console Output Channel, Workspace-less Previewing, and Multi-root Support.
Try Live preview:
https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

Settings Sync

Settings Sync extension for VS CodeSettings Sync allows you to maintain a consistent IDE experience across multiple machines by downloading your extensions and reconfiguring all of your settings by saving everything via GitHub. You can keep everything in sync by adding this extension in your VS code.
Check out Settings sync
https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

Bracket Pair Colorizer

Bracket Pair Colorizer extension for VS CodeBracket Pair colorizer identifies different brackets through different colors. You can easily define which characters to match, and the colours to use. You can also configure custom bracket characters. Additionally, it becomes pretty simple to configure a list of colors, as well as a specified color for orphaned brackets.
Check out Bracket Pair colorizer:
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

blox

blox extension for VS Codeblox is a VS code extension with a built-in library of 1500 code snippets. It lets you drop whole chunks of code blocks with a single click. It supports different frameworks including Tailwind CSS, Angular, React, and Vue. It will also support Alpine.js, Svelte, Laravel, Bootstrap, and Material UI in the future.
Check out blox:
https://marketplace.visualstudio.com/items?itemName=vsblox.blox

Live Share

Live Share extension for VS CodeLive Share allows developers to collaborate on projects where they can edit and debug together. Developers can join different sessions and receive all of the editor context from another developer's environment that ensures they can start collaborating immediately, without the need to clone any repos or install any SDKs.
https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

So this sums up the list for now, do share your experience if you’ve given any of these a shot.
What are your favorite VS code extensions that you use on a daily basis?

Discussion (16)

Collapse
italypaleale profile image
Alessandro (Ale) Segala

Hi Haris, thanks for this! I'm from the VS Code team and liked your article :) Just wanted to let you know that both Settings Sync and Bracket Pair Colorizer are now available into VS Code without the need for any extension.

For settings sync: code.visualstudio.com/docs/editor/... Using the official one allows you to quickly sync your settings anywhere, including VS Code for the Web (vscode.dev and github.dev) and GitHub Codespaces

For bracket pair colorizer, a couple of months ago we added it to the core editor because that's the only way we could make it highly-performant: code.visualstudio.com/blogs/2021/0...

Collapse
whippingdot profile image
Sanjaay R.

There is also a microsoft live preview extension now right?

Collapse
italypaleale profile image
Alessandro (Ale) Segala

Correct, because Live Server was unmaintained. The Live Preview extension Haris listed is already the new one

Thread Thread
whippingdot profile image
Sanjaay R.

Oh okay yeah I see it now!

Collapse
harishash profile image
Haris# Author

Thanks for the feedback mate. Love what you and your team are doing!

Collapse
amediocredev profile image
a Mediocre Dev

I'd like to add on a hidden gem of an extension (especially for beginners) called Error Lens <- This is the most current maintained version.

What it does is highlight the errors and warnings on the line you are getting them as opposed to vscode displaying all the issues in the Problems panel. If you can get past the editor shouting at you after leaving a line of broken code, then this is extremely helpful especially when you start out and write buggy code that the linter picks up.

Collapse
harishash profile image
Haris# Author

Nice one mate. Seems like a huge time saver!

Collapse
spandyboss profile image
SpandyBoss

I liked the Live preview extension the most. Thanks for writing this post. Loved it

Collapse
harishash profile image
Haris# Author

Appreciate it! Stay tuned for more content from a newbie's perspective...

Collapse
spandyboss profile image
SpandyBoss

Sure

Collapse
talhakhalid101 profile image
TalhaKhalid101 • Edited on

I would like to add browser preview. It is very useful if you only have one monitor and don't want to switch between browser and VS Code every time you want to see the result of changes. Browser Preview integrates a simplified browser within its VS Code. So you can edit the code and at the same time, without leaving the editor, view the changes in real time. In addition, it allows you to simulate different screen sizes, allowing you to test your app's responsiveness.

The thing is, you need to have a development server running so you can access it through the built-in browser. And here comes the tip: you can use Browser Preview together with Liver Server! You just start the Live Server and then access localhost:5500 (or whatever port you have defined for the Live Server) in the browser built into the VS Code by Browser Preview.

Collapse
dominikbraun profile image
Dominik Braun

Finally a VS Code extension list on dev.to!

Collapse
subhadas01 profile image
Subha_das01 • Edited on

Bt u can say about docker file !!!!

Collapse
opeolluwa profile image
ADEOYE ADEFEMI OPEOLUWA

Nice collection

Collapse
umairkh34094841 profile image
Umair Khan • Edited on

Was Very Helpful... My team also Appreciate it!
overall GREAT Job.

Collapse
harishash profile image
Haris# Author

Glad to hear that!