Do you want to speed up your web development workflow? follow me in this post to know some of the best vscode extensions I have installed which have improved my web dev productivity 10x⛽️🔥🚀

Gain more focus and code faster with these zen tricks. Make your code look more organized, shorter, readable and cleaner. So 🚀boost your coding, 🔋turbocharge and develop faster by installing vscode extensions recommended in this series😇

1- #region folding for VS Code

Fold (...) any number of lines from your codes to a one liner with comment, even if they aren’t foldable by default. Make your code look cleaner and shorter. Expand and reveal folded lines when you want to read/edit them by removing #region comments or pushing a keyboard shortcut.

I hide and fold 📁 all parts of my code that I want to get out of my way with “region extension” start and ending comment tags. Then 📂 unfold them when necessary.

I just use a keyboard shortcut like ⌨️ alt + f (I’ve set myself) to fold all specified regions and when I want to read a folded part I use ⌨️ alt + u to unfold all the regions, and then unfold them again🎉😁

This extension enhances the default code folding abilities of Visual Studio Code editor. Regions of code that you'd like to be folded can be wrapped with #region //comments.

Put multiple lines you want to fold between two comments like this in js:

//#region
🔽  now
      these
      lines become 
      foldable
//#endregion

after folding:

▶️//#region ...

now you’ll see a fold icon added near the first line and this region can be folded, so it makes your code much shorter, cleaner and 👀readable.

You can fold all your regions or unfold them at once with the extension’s handy shortcuts.

🔗 marketplace.visualstudio.com/items?itemName..

2- Auto Hide 🙈

Causes the side bar to be hidden whenever the user clicks into the text editor.

It hides the sidebar when you are coding (when you click on editor it will hide the sidebar for you) 😑

🔗 marketplace.visualstudio.com/items?itemName..

3- 😜 Emoji

A simple plugin to insert emoji from the command palette.

I use this extension to add 😎cool and related emojis in comments to organize my code to different #section’s

😇😍🙃

👀 Emojis can help making code more scannable 👀

//  👻🆔🌐 Get #req 👻🆔🌐

//. ❌❌❌ Delete #req❌❌❌

//  🐥🐥🐥 Local #state 🐥🐥🐥

// 🐻🐻🐻 Global #state 🐻🐻🐻

// 🎏🔴🔵
// 📌 I use these emojis for attention purpose
//  👀 They make your code easy to scan
//  🔎 I also use 🏷 #hashtags to search (ctrl + f) them and jump to different parts of my code much easier

🔗 marketplace.visualstudio.com/items?itemName..

4- Better Comments

The Better Comments extension will help you create more human-friendly comments in your code. With this extension, you will be able to categorise your annotations into:

⚠️Alerts ❓Queries ✅TODOs ✳️Highlights

Commented out code can also be styled to make it clear the code shouldn't be there Any other comment styles you'd like can be specified in the settings

🎯 I use “better comments” vscode extension to adjust my comments color in relation with editor bg color in order to decrease comments visibility

🧩 I use ”better comments” along with “region” extension to make //#region tags less visible

🔗 marketplace.visualstudio.com/items?itemName..

5- Hide Comments

Hide 😑 and 😶 Reveal all //comments in your code whenever you want by clicking a button 🖲

⬛️⬜️ The extension will set all comments to transparent. The extension will never remove the comments from the file.

On the editor title, a toggle action is available to show/hide the comments quickly:

👁 Click on eye icon to toggle your current file comments visibility, easy peasy

🔗 marketplace.visualstudio.com/items?itemName..

Bonus Extension:

💯💯💯 Done 🥳🎊🎉

😍 Enjoy coding