5 VS Code Extensions that make coding more exciting.

These are the 5 VS Code extensions to improve your coding and save some time.

Hey ๐Ÿ‘‹ Dev Family, In this article, I will be covering some of the most used VS Code extensions that can make your coding experience soothing and save a ton of time for you. Choosing the best extension for your lDE can sometimes take up to hours of research and trial and error.

There are thousands of extensions available to choose from but here is the commonly used extension by every other developer in day-to-day coding.

1. Prettier โ€” Code formatter (12.6M installs ๐Ÿ”ฅ)

A web developer writes usually hundreds of lines of code, no matter how good you are with the keyboard code always gets messier, and with all this chaos it is difficult to understand the code.

Prettier โ€” Code formatted is a VS Code extension that enforces a consistent style by parsing your code by a set of rules and reprinting is, this you can format JavaScript ยท TypeScript ยท Flow ยท JSX ยท JSON CSS ยท SCSS ยท Less HTML ยท Vue ยท Angular GraphQL ยท Markdown ยท YAML

You can easily install in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

You can make sure that Prettier Code formatter should work above all other formatter by setting config like,

{ "editor.defaultFormatter": "esbenp.prettier-vscode" }

You can just format your document by pressing Ctrl + I.

2. Live Server (11.9M installs ๐Ÿ”ฅ)

Serving the static files on the server could be a headache sometimes, need to install an HTTP server some additional code to configure the server, and even though sometimes it can take hours.

But VS Codeโ€™s Live Server extension makes serving a project/file very easy you simply need to start the server rest is taken care of by the Live Server.

You can easily install in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

Now simply open a project and click on the Go Live from the status bar of VS Code to turn on/off the server.

Next, you can go to the project folder and click on the Open with Live Server or open file and hit alt+L, alt+O to serve it.

You can read more about Live Server here

3. Turbo Console Log (12.6M installs ๐Ÿ”ฅ)

Writing a meaningful log message is really a skill when it comes to debugging a javascript application.

Turbo Console Log extension makes your application debugging much easier by logging meaning full log message on the console with a single keypress.

You can easily install in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install ChakrounAnas.turbo-console-log

Now simply select a variable that you want to log and press ctrl + alt + L, this will insert the log on the next relative line something like this,

4. Better Comments (1.7M installs ๐Ÿ”ฅ)

Writing Comments can be tricky sometimes, we always need to make sure that comments should be catchy and easily understandable.

Better Comments extension will help you create more human-friendly comments in your code. With this extension, you will be able to categorize your annotations into Alerts, Queries, TODOs, Highlights.

You can easily install in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

You can simply style your comments like this,

5. Code Spell Checker (2.6M installs ๐Ÿ”ฅ)

Sometimes a simple spell mistake can lead to a bigger problem. what the FCUK ๐Ÿคช?

Code Spell Checker is an extension that will save you from those big problems, this is a basic spell checker that works well with camelCase and it has a low number of false positives.

You can easily install in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

Now incorrect spellings will be highlighted with an underline below it like below and simple press ctrl+. and choose appropriate spelling from the list,

You can also install some language package extensions.

So Thatโ€™s It. Stay tuned for more useful content and do react/comment if you think this is helpful and share it with your friends.

Originally published at https://adarsh-thakur.hashnode.dev.

--

--

--

Hey ๐Ÿ‘‹, I am Adarsh, a Web Developer from ๐Ÿ‡ฎ๐Ÿ‡ณ

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Gradle, Instant Run and an applicationId

Google I/O 2021 Punch Card Puzzle ๐Ÿงฉ

From PoC to MvP

Consolidate tasks from Oracle applications cloud and other applications into a single list of tasks

3 Things I wish I knew as DevOps Engineer

The History of Software Development, the Waterfall Revisited

You looking for new games to watch?

Deploying UI applications using Docker and NGINX

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adarsh Thakur

Adarsh Thakur

Hey ๐Ÿ‘‹, I am Adarsh, a Web Developer from ๐Ÿ‡ฎ๐Ÿ‡ณ

More from Medium

I will convert psd, xd, figma, sketch to html css bootstrap

Reverting to a Previous Commit

Get SAWO SDK linked to your HTML code.

Day 16: Async & Forms