Best VS Code extensions for Beginners
Tags: vscode, beginners, webdev, productivity
Published: 2021-11-16 15:53:19

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 Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxy73owii454n1m92mnx.png)Prettier 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 Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmp8l0r1gxlhwk3elk8p.png)Live 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:<br>https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server 
#Settings Sync
![Settings Sync extension for VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9cee0r9svdp3rdrqtkgk.png)Settings 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<br>https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
#Bracket Pair Colorizer
![Bracket Pair Colorizer extension for VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w51sncfizh1xsa8q5w60.png)Bracket 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:<br>https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer 
#blox
![blox extension for VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfzmm5g0mo0xe2frkj15.png)blox 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:<br>https://marketplace.visualstudio.com/items?itemName=vsblox.blox   
#Live Share
![Live Share extension for VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7iq40m0jdn0dckuh59gz.png)Live 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.<br>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?