DEV Community

Cover image for Vs Code Zero to Hero setup
Atharva Shankar avhad
Atharva Shankar avhad

Posted on

Vs Code Zero to Hero setup

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

Top comments (8)

Collapse
 
iulover99 profile image
The 99's Puppycat

what are mess up config, volar and vetur both enabled? This is ridiculous and error prone

Collapse
 
atharvashankar profile image
Atharva Shankar avhad

ya! also did you got rickroll'd? because I am getting a lot 🤣

Collapse
 
atharvashankar profile image
Atharva Shankar avhad • Edited

thanks I forgot to add "or", Now it's updated

Collapse
 
namangarg profile image
Naman Garg

nice

Collapse
 
kalifasenou profile image
Kalifa SENOU

Thanks you for the custom

Collapse
 
atharvashankar profile image
Atharva Shankar avhad

ya! also did you got rickroll'd? because I am getting a lot 🤣

Collapse
 
caihai123 profile image
caihai123

我更喜欢One Dark Pro主题

Collapse
 
atharvashankar profile image
Atharva Shankar avhad

我喜欢“sweet vscode theme”