Step up your Productivity using VSCode

Mohit Sai
4 min readApr 14, 2021

--

Hey guysss..hope you all are having a wonderful day. I will be telling you guys some extensions that will help you code 2x Faster

Since you are going to code in this daily , you have to step up the game in the loooks ryttt.So i will be telling you some themes you can choose to step up your gamee :)

THEMES

1. COBALT2

This is the theme i am using ryt now. She’s a real stunner 🔥 .You can remove that black menu bar easily.

First open your settings (Ctrl+,) and the search for titlebar, and after that select ‘custom’ in “Window: Title Bar Style”. And your theme will apply to your menu bar too 😄

2. RAINGLOW

set of colors

Rainglow theme has variety of colours , so you can choose any of them as per your convenience. You can check more abt them on their repo. 🔥

3. NOCTIS

Noctis has both dark and light themes which can help your eyes strain less which is really important. You can check out their 👌 😎 themes on this link

There are lot of sexyyy themes out there and i can’t possibly put everything this post. But Do check this website out. They have an amazing plethora of dark and light themes.

NOW once the look is over, let’s hop on to the main part “THE EXTENSIONS” bcoz that’s what helps you ace up your coding speed :)

EXTENSIONS

  1. GITLENS

As a programmer , it’s one of the axioms that you will have to use github at some part in your life. Gitlens makes your life way easier. It gives you a quick glimpse into whom , why and when a code block or line has changed. These are some of the features they provide 😄

  • effortless revision navigation (backwards and forwards) through the history of a file
  • an unobtrusive current line blame annotation at the end of the line showing the commit and author who last modified the line, with more detailed blame information accessible on hover
  • authorship code lens showing the most recent commit and number of authors at the top of files and/or on code blocks
  • a status bar blame annotation showing the commit and author who last modified the current line

2. Bracket Pair Colorizer

Sometimes while coding , we miss some brackets and struggle to find where they are. Bracket Pair Colorizer allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use. The best use case of this is in nested looops 😏

3. indent-rainbow

From now on, you won’t pull your hair out on indent errors 😺 . indent-rainbow extension colorizes the indentation in front of your text alternating four different colors on each step which means solving indentation problems is wayy easier

4.CSS Peek

Imagine changing css classes from your main file itself.This extension extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for css/scss/less (classes and IDs) found in strings within the source code.

This was heavily inspired by a similar feature in Brackets called CSS Inline Editors.

5. VS Code ES7 React/Redux/React-Native/JS snippets

Snippets are a beautiful piece of small generic code which can be used to save time. This extension is mainly for React, Typescript and React Native .Just typing rcc and tab will render you a basic React js code.

5. Tabnine

Tabnine is the best auto-completion extension i have used. It has bindings to other editors too. This is a must have extension which can increase your productivity.

Here are some bonus tips

EMMET is a really handy plugin in vscode.

Do check this page out.. Once you get used to this , your speed will easily double up.

Thanks a lot for coming to the end of my first medium post 😄. Please like ❤️ and share. Also comment the theme you guys chose xD

--

--

Mohit Sai
Mohit Sai

Written by Mohit Sai

0 Followers

Just dipping my feet in medium :)

No responses yet