DEV Community

Cover image for VS Code Setup for Frontend Devs

VS Code Setup for Frontend Devs

Ivan Simeonov on February 09, 2023

Table of Contents Introduction Theme Icons Extensions Auto Rename Tag Auto Close Tag Code Spell Checker CSS Peek DotENV Error Lens E...
Collapse
 
marblewraith profile image
Matthew Rath • Edited
  • ENV instead of DotENV gives you more features.

  • Console Ninja display console output inline.

  • Nested Comments fixes some weird default behaviour.

  • Highlight Counter does what it says, tells you how many instances of a highlighted selection are present (default only tells you how many chars selected).

  • File Utils is a better workflow by rebinding some keys. Instead of creating an untitled file and then having to save it (ctrl+s) and give it a location / name. You can do it all in one step, which means autosave / format also starts working immediately.

Collapse
 
ivannicksimeonov profile image
Ivan Simeonov

Thanks, for your suggestions. I will definitely try them out and update the post with the ones that I will be using in the following days!!

Collapse
 
chaudharidevam profile image
Devam Chaudhari

Vscode Extensions that i used:
- Autoprefixer.
- Code spell checker.
- Css peek.
- ES7+ React/Redux/React-Native snippets
- EsLint
- Git Graph
- Git history.
- Git lens.
- Indent rainbow.
- Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, R
- Total typescript.

Collapse
 
ivannicksimeonov profile image
Ivan Simeonov

I will definitely check the ones that are not already included in the article. Thanks for your input!

Collapse
 
chaudharidevam profile image
Devam Chaudhari

Also, thanks to you sharing vscode extension :-)

Collapse
 
codeofrelevancy profile image
Code of Relevancy

Nice setup

Collapse
 
bretbernhoft profile image
Bret Bernhoft

This is the kind of IDE walkthrough I wish I had when I first started learning to be a Frontend Web Developer. This is succinct and straight-to-the-point. Thank you for the information.

Collapse
 
ivannicksimeonov profile image
Ivan Simeonov • Edited

I hope the others will also find it so useful! 🔥

Collapse
 
juliocamposswork profile image
Julio Campos

Nice setup for basic usage, my suggest is "Color Highlight" nice for large code

Collapse
 
ivannicksimeonov profile image
Ivan Simeonov

Thanks for the suggestion. I like the default color preview but I will give this one a try!

Collapse
 
fruntend profile image
fruntend

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Collapse
 
ivannicksimeonov profile image
Ivan Simeonov

Thank you 🔥 🙏

Collapse
 
websitevikreta profile image
Website Vikreta

Good one. Thanks for sharing this.

Collapse
 
codeofrelevancy profile image
Code of Relevancy

Very detailed explanation. Thanks

Collapse
 
ivannicksimeonov profile image
Ivan Simeonov

I am glad you liked it and I hope you've found something useful. Feel free to share your most used extensions, theme or icons, so we can improve our dev environment.

Collapse
 
haimoudmustapha profile image
mustapha hmd

there is another extension that i start used recently is like the github autopilot but free, called : CODEIUM.

Collapse
 
ivannicksimeonov profile image
Ivan Simeonov

I will definitely check it out, thanks for the suggestion!