Vs Code Zero to Hero setup

Vs Code Zero to Hero setup

ยท

2 min read

#1. first of all

Image description

get Rickroll'd

Image description

The vscode is a nice editor for web dev. And the broad variety of extensions that you can use to customize Vscode code is at another tier. and the settings are bonkers. like you are just writing a little code, and you want to change a podcast but you don't want open Spotify, then just go down and click the button and boom!

2.color themes

there are soo many color themes in the vscode. like are the worst to the best and these are themes that I use (also these are sorted ranking wise worst to best).

  1. Dracula This theme is one of the most popular themes for vscode. this theme looks nice, but its slightly off.

Image description

Image description

  1. monokai pro

this theme is the hottest theme for vs code but in the long term, you will get bored soon.

Image description

Image description

  1. community material this is also a very popular theme. It supports more than 6 variants. but they are all same.

Image description

Image description

Image description

  1. Atom one dark this theme is the cleanest theme on the list. it is not too flat not too contrasty. but it's not cool as the last one.

Image description

Image description

  1. Sweet vscode this is soo underrated theme. and this theme is the best of all. it's just ๐Ÿ’œ

Image description

Image description

Image description

3. snippets extension

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

a superb extension if you are using react, or just normal javascript.

Image description

  1. tabnine very powerful intelligence for programming, not just for javascript but also for python c, c++, or anything

Image description

Image description

  1. svelte for vs code *olny if you are using svelte

Image description

Image description

  1. Tailwind CSS IntelliSense if you are using tailwindcss this is compulsory

Image description

  1. prettier

Image description

Image description

5.eslint

Image description

Image description

  1. react native tools this is not only for react native, it's also for react

Image description

  1. Vetur

Image description

OR

  1. Vue Language Features

Image description

9.markdown all in one

Image description

  1. generals 1.codesnap

Image description

2.vim

Image description

3.gitlens

Image description

5. settings (finally!)

Image description

Image description

Image description

Image description

Image description

Final words (only for blog)

Now your Vscode looks like this

Image description

Image description

Image description

Did you find this article valuable?

Support atharva shankar avhad by becoming a sponsor. Any amount is appreciated!

ย