VS Code Extensions to increase productivity and time-saver hacks for developers
Tags: webdev, programming, productivity
Published: 2021-04-06 01:54:22

How can developers be extra productive? You’re a developer or you manage a team of developers, higher productivity can get you extra things done through constant resources in a very small-time. 

You are currently here because you're finding **numerous** ways to increase your **productivity** while development or off the table, so investing your time reading this post will be worthy.

Starting this post with a quote: 
> "Always deliver more than expected" - Larry Page 

---

# Must have VS Code Extensions 

In brief VS Code is (Visual Studio Code) a very popular text editor that is maintained by **Microsoft**. As an easy and go-to-use text editor it has grown a lot in the Web Developers community. VS Code extensions allow you to add **languages**, **debuggers**, and **tools** to your installation to support your development workflow. Now let's see what all extensions I use. 

<br>

### Tabnine

<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1616671171301/b3CwIxvYl.gif?auto=compress">

Starting this list with my favorite extension **Tabnine**. The amazing thing that fascinates me about this extension is that it knows what you're going to type next 😧. 

 - Tabnine supports ALL modern programming languages and **understands **which language the developer is working on, according to the current file type.

- Tabnine is based on **OpenAI's GPT2** model. Since this model is textual, it can complete (and understand) **natural text too**, and not just code. 

For example, Tabnine can suggest completions for TODO comments😉, and even better - suggest code-line **completions** based on the TODO comments above them!

#### Tabnine Vs. IntelliCode

IntelliCode is same as Tabnine but definitely not better. 

 - Tabnine completes your code using deep models (GPT-2) trained on open source and a local index for your code

- Completion suggestions with every keystroke

- Codebase knowledge recommended by the **DEV Community**

- Deep-Learning infused model that gets better the more you use it  - Tabnine uses Deep Learning to get familiar with the developer's projects and libraries. So the more you use it, you get better code completions -  longer and more accurate.

Get the <a href="http://bit.ly/gettabnine" target="_blank">Tabnine</a> extension for free. 

<br>

### Better comments

<img src="https://github.com/aaron-bond/better-comments/raw/master/images/better-comments.PNG" alt="Better Comments VS Code extension Screenshot">

This extension might not be useful while coding. Better Comments adds a sort of **syntax** highlight to the comments, adding colour to keywords and statements that help the **readability** of your code comments. Commenting on your code is good because you don't want to be blank when you see your code after an hour. 

Read more about writing comment in <a href="https://www.digitalocean.com/community/tutorials/how-to-write-comments-in-javascript">JavaScript</a>.

Get the Better comments extension from
<a href="https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments" taget="_blank">Here</a>. 

<br>

### Settings Sync

<img src="https://shanalikhan.github.io/img/login-with-github.png" alt="Settings Sync VS Code extension Screenshot">

The extension is simple. It saves all your VS Code settings in your GitHub gists. So this is pretty cool as you'll get your VS Code settings from anywhere unless when you forget your GitHub password.

Get setting sync Extension from <a href="https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync" target="_blank">Here</a>. 

<br>

### Auto Rename tags

<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1615897627061/o4moRAkEM.gif?auto=compress" alt="Auto rename tags GIF">

Nearly all Web Developer love this extension and you can guess the work it does by its name or seeing the GIF above. 

Get the Auto Rename tags from <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag" target="_blank">Here</a>. 

<br>

### Remote-SSH

The Remote - SSH extension allows you to use any remote machine with an SSH server as your development environment. This could greatly modify development is in many situations. 

Do you want learn how to setup Remote-SSH? Read this <a href="https://www.digitalocean.com/community/tutorials/how-to-use-visual-studio-code-for-remote-development-via-the-remote-ssh-plugin">Article</a>. 
Get the Remote-SSH extension from <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh" target="_blank">Here</a>. 

### JavaScript (ES6+) Code snippets

JS Code Snippets enhances the in-built JS 
%[Link]
IntelliSense code by adding extra features of import/export methodology triggers, category helpers, and triggers.
**Supported languages**: JS, TypeScript, JS React, TS React, HTML, and Vue. You can also surf within the extension marketplace for getting snippets for any other language too. 

Get the extension from <a href="https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets" target="_blank">here</a>. 

<hr>

> If you can see it better then you can understand it better

---

### Rainbow Brackets 

<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1616038853407/4ccefeSLv.jpeg?auto=compress" alt="screenshot of Rainbow Brackets extension">

This VS Code extension highlights the parenthesis in several colours allowing us to urge a far better idea of which brackets are related to whom. For people like me who get confused in brackets, this is the perfect solution for it. 

Get the extension from <a href="https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets">here</a>. 

---

### indent-rainbow

<img src="https://raw.githubusercontent.com/oderwat/vscode-indent-rainbow/master/assets/example.png" alt="indent-rainbow screenshot">

This extension colorizes the indentation before you lines of code alternating four different colours after every step.

Get the extension from <a href="https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow">here</a>. 

---

### Prettier 

You have probably heard of this extension pretty often. This is a narrow code formatter that enforces a homogenous vogue by parsing your code and re-printing it with its own rules that take the utmost line length under consideration, wrapping code once necessary.
 

Get the extension from <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Here</a>.

### Quokka.js

<img src="https://quokkajs.com/assets/img/main-video.gif">

Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.

Get the extension from <a href="https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode">here</a>.


--- 

# TIPS / TRICKS / HACKS

In this section, I will provide you with some Tips, Tricks and Hacks to increase your productivity.
You probably know many of the tricks and tips you have read on other blogs but this post covers the content you need. 

1. Distraction-free Coding

<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1616041435790/ofKkJGqTg.gif?auto=compress">

Some pro developers may already know about the Zen Mode view, the ultimate distraction-free view. This will assist you in coding or studying somebody else’s code😉.

Enable the Zen Mode: View -> Appearance -> Toggle Zen Mode

2. Simplifying your debugging experience

You can do *Ctrl+Shift+O* to group the symbols by kind by adding a colon, `@:`. 

3. Selecting word like a pro 

<img scr="https://cdn.hashnode.com/res/hashnode/image/upload/v1616042889426/99BLoPNIP.gif?auto=compress">

Using the command **Ctrl + Shift + Right arrow / Left arrow** you can select the words and do the editing simply. 

4. Duplicating your cursor

<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1616043513799/9MVFNV5dr.gif?auto=compress">

Using the command **Ctrl + Alt + Up Arrow / Down Arrow** can duplicate the cursor and you can type in one time at many places and later you can change the values. 

5. Emmet CheatSheet

Emmet adds up its feature with the VS IntelliSense code. Emmet allows you to be a super-efficient coder by providing you shorthand's. 
You can download the full cheat-sheet as a pdf from <a href="http://bit.ly/emmetsheet">here</a>. 

---

# Time-Saving techniques/tips

![domenico-loia-DHq8C54g6Bs-unsplash.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1616672043904/8a6kkvCka.jpeg)

1. Never **multitask**

If you want to **screw** you all the project at once then multitasking is perfect for you. Multitasking is general for developers, they work on many projects rather than **focusing** on one. If you think this can save your time and make you more productive then you're **wrong**. 

2. Mastering your tools

Knowing your tools can result in more effective work. Make a list of all the tools you use and then first their **shorthands** and how to optimize it while coding. Like you're here because you probably want to know **fasten** your development process in VS code. 

3. GTD [Getting Things Done]

Being cautious with however we tend to pay our time is **significant** to obtaining a lot of done throughout the day. There is numerous way of making your life easier. But I most prefer making a **To-do list**. Why? **To-do lists** are effective for me I just give 5 minutes in making a To-do list about what I'll do today. When I forget about what to do I simply open it and see what I have to do. I use **Notion** for making my life easier. 

4. Learn to say NO!

Sometimes this tiny word is that the hardest to mention. However, it’s okay to say it. It’s vital to manage people’s **expectations**, therefore if you can’t take one thing on and provides it 100 %, then don’t do it at all.

5. Eliminating 

The meeting is the major cause of wastage of time unless it's a very important one. When programming any conferences, certify they're really necessary and whether or not what you propose to debate are often handled through email or by phone.

--- 

Now I'm pretty much done with my stuff and you know what you've to do. No? Share this article!

Thank You for Reading, Amazing people🤗