Minhazur Rahman Ratul

Posted on Feb 21, 2021 • Updated on May 22, 2021

My productivity setup ( VS Code )

#vscode #webdev #productivity #showdev

In this post I am gonna show you my personal vs code setup! Which makes me more productive. And gives me inspiration to do more coding. I will show you how turn this boring one, -

To this cool one-

And I will also provide you a list of useful VS code extentions which will make you life more easier as a developer. So if you are interested, continue reading...

Theme

When it comes about theme every people has a different choice. But I personally prefer to use - "The best theme". Yes if you take my opinion this is the best theme. Which gives an elegant look to my VS code. It's pretty similar to one dark pro. But this one is a little bit lighter than one dark pro. Which attracts me so much.

Font

I use Fira Code as the default font of my editor. Which looks pretty fine. It gives a nice look to my editor. And fira code 400 medium is recommended with the Best theme.

Icons

For icons I use Material Icon Theme Which makes my icons simple and elegant looking.

Useful Extentions

1. Prettier

Prettier is a really really useful extention. It formats your unformatted code once you save your file. So install it. And after installation, go to settings, and search - "Format on save" Then check the settings if it is marked. Then add some code in your settings.json

"editor.defaultFormatter": "esbenp.prettier-vscode",

2. Auto Rename Tag

This extention saves my time a lot When I am working with React, Html and XML. It renames the closing tag automatically when you try to rename the opening tag.

3. ES7 React/Redux/GraphQL/React-Native snippets

This extention saves a lot of time when I am working with react and react-native. It helps me to prevent writing all the boilerplate codes. Like when I type - 'rafce' if generates all the codes for a react functional component.

4. Live Server

This extention is so useful when you are working with html, css and js projects. It auto reloads the browser page once you save any file in your project.

5. Bracket Pair Colorizer

This extention is so much useful. It highlights the occurance of the opening and closing brackets. And it generates different colors of brackets. Which helps me a lot to have a more better and fast understanding.

6. Tabnine Autocomplete AI

Tabnine is autocomplete AI tool. This will help you a lot when it comes to coding! And I highly recommend it. Just install it and you are gonna stick with that! it's insane!

So that was my vs code setup. I enjoy working a lot with this setup. Let me know what is your productivity setup! in the discussions.

Latest comments (65)

Sergei Sarkisian • May 12 '21

TabNine is pretty heavy on resources, be noticed.

Jules Parra • Feb 26 '21

omg i need to use the live server extention🤩 thanks for sharing, i've been looking for resources like this lately as I'm experimenting with vscode with web dev after being a loyal brackets user

MikeD81 • Feb 25 '21

Hey guys! I would like to ask a question with a problem I'm having. When I click on the "go live" tab on vscode it's not opening the web browser as it should, Chrome is my default as it always has been, also when I right click on the html file in the workspace column it's still not opening the browser. I've searched many solutions and none seem to be helping I've also uninstalled and reinstalled code twice, nothing seems to work, can anyone shed some light or point me in a direction I can work with. I appreciate any help you guys can offer.

Rod Hartzell • Feb 25 '21

I absolutely love the indent-rainbow extension.

Mehmet Yatkı • Feb 25 '21

You may wanna try this one too :)

yatki / vscode-surround

🔥A simple yet powerful extension to add wrapper templates around your code blocks

Surround

A simple yet powerful extension to add wrapper templates around your code blocks

Features

Supports multi selections
Fully customizable
Custom wrapper functions
You can assign shortcuts for each wrapper function separately
Nicely formated

Demo 1: Choosing wrapper function from quick pick menu

Demo 2: Wrapping multi selections

How To Use

After selecting the code block, you can

right click on selected code
OR press (ctrl+shift+T) or (cmd+shift+T)

to get list of commands and pick one of them.

Hint

Each wrapper has a separate command so you can define keybindings for your favourite wrappers by searching surround.with.commandName in the 'Keyboard Shortcuts' section.

List of commands

Command	Snippet
`surround.with` (ctrl+shift+T)	List of all the enabled commands below
`surround.with.if`	if ($condition) { ... }
`surround.with.ifElse`	if ($condition) { ... } else { $else }
`surround.with.tryCatch`	try { ... } catch (err) { $catchBlock }
`surround.with.tryFinally`	try { ... } finally { $finalBlock

…

View on GitHub

🚀🖖

Jesper Hodge • Feb 25 '21

Did you try Fira Code iScript? I'm so so happy with the italics, even though I was skeptical first...

And another question, has anyone compared TabNine to Kite? (Free version) - I'm using Kite, it's quite helpful so far but not incredible, do you recommend TabNine instead?

Jason Kim • Feb 25 '21

Auto Rename Tag looks great. Thanks for the suggestion

Jan Kohlbach • Feb 24 '21

haha, thanks for liking and mentioning my theme 😬
I was wondering why the install count did raise so much the last days and even github issues appeared until someone mentioned this article to me 😂

Minhazur Rahman Ratul • Feb 25 '21 • Edited

DUde! Your theme is so awesome. I really enjoy using your theme :D Thanks for creating that

orels1 • Feb 24 '21

While it's a paid font, I still can't recommend Dank Mono enough. Its a pretty unique looking font among the coding fonts, so you never know if you might like it!

gumroad.com/l/dank-mono

JetBrains mono is also good. Learned to love it when I started doing some C# coding for Unity stuff.

And in terms of themes, I just can't stop using Monokai Pro: monokai.pro/

Some other things to note that i haven't seen other mention:

Dash integration, if you're on macos and using Dash - pulls up the docs for things in Dash
Code Spell Checker, for all your flase and other fun typos
Partial Diff, for weird situations when you want to quickly compare some code in the editor, i often use it to compare some code that i have open on github withi pieces on my local machine (without having to switch branches locally)

Nice compilation though! Will be grabbing the autocomplete for sure

Minhazur Rahman Ratul • Feb 25 '21

Thank for the font!

Jaswanth • Feb 24 '21

What is the extension you used to get those three vertical lines for "===" operator?

Pascal • Feb 23 '21

Nice article! I'm currently using JetBrains Mono but I'm a huge fan of Fira Code as well.

Comment hidden by post author - thread only accessible via permalink

lepinekong • Feb 23 '21

I tried tabnine for typescript I found it completely useless

Minhazur Rahman Ratul • Feb 23 '21

But in my device, it works just fine :)..... IDK why it is not working in your device it might be a bug .

lepinekong • Feb 23 '21

I didn't it doesn't work I say it's useless ;)

kunalgupta557a • Feb 23 '21

How do i change fonts to jetbrains

Minhazur Rahman Ratul • Feb 23 '21

at first install them > then go to settings > and search font's > then set it to > 'jetbrains mono' / 'fira code'

universaltutor5 • Feb 23 '21

universal-tutorial.com/general-tut...

View full discussion (65 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more

DEV Community