Vs Code Zero to Hero setup
Tags: vscode, webdev, beginners, programming
Published: 2022-12-11 06:00:06

#1. first of all

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jamx6mdyp6b6a2jgui1.gif)

get Rickroll'd


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0b95f7ntp3ex5h6ozjs.png)

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).

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dcna6mo4o2o9sd0qr39m.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g44uasktljztt6vvqh3o.png)



4. monokai pro

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9d0wgblsl1xo7pvz7u6u.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7fup9vvrkzvlvttu7mz.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ma2rh0c7snchdmnw2r3w.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7t2elhhpvh40yosoevqb.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k511835w62bika19hmf3.png)


2. 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dcnesyau7uf5ei2rik3m.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z04axzf0ys8pb5psp3ex.png)

1. Sweet vscode
this is soo underrated theme. and this theme is the best of all. it's just 💜


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/938voo03s5zy2x84r85l.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dy7vxv6a191ckei7ptql.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oflb8hkfoqhmwxm7p6vx.gif)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbpptqb5iw56hb3q8ijr.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a29ztr03n9jbx5f2lhyp.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/elor1wnepxwm05th3bfd.gif)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4e6qhxtezuim3bn8n3b.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5sa0e02p1uxzxcdmkc29.gif)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24b9hek3yje3chwig4pm.png)

4. prettier

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4kiutkb0tpn5kq4irfp.png) 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vo8usa8nl7v8o4wzwa7q.gif)

5.eslint

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ke3d86qcsqsctrfuikpo.gif)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwzojhvocrroydfrluxy.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2x3q12bdq83dmi26k0kv.png)

7. Vetur

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qcguckm0gbkdx1q8i64m.png)
OR

8. Vue Language Features


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jv0kyxgoftm6gxwwcccc.png)

9.markdown all in one

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94p9p61vg6vyhfikcxbk.png)

4. generals
1.codesnap

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3ble6lky3wjzj6jv8aj.png)

2.vim

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ad5y0s3wwl3gc31ceulu.png)

3.gitlens

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgze13oeaoznkx0cxsjt.png)

## 5. settings (finally!)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hull31iaty6fcissul3d.gif)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ml7c75pra535vde19eiv.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2vzk91gynsqgon9182j.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hygc9p2ouqnb6qekyo3x.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4t5r9il7ro11a19nols.png)

# Final words (only for blog)

Now your Vscode looks like this 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z663kdy7eq3r0cudrj3r.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/leldld2kqs93if547lm0.gif)










































![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkgx948rnopkcfpb1zsp.gif)