DEV Community

Cover image for VS Code & Web Dev
Austin
Austin

Posted on

VS Code & Web Dev

There are many different text editors out there but by far one of my favorites is VS Code. It's an incredibly lightweight option with the added benefit of being open source makes it a great choice for new developers or experienced professionals. In this article, we are going to talk about some great extensions to use, and how to install if you don't already have it.

Extensions

An extension is a way to add features and functionality to VS Code examples include languages, debuggers, and tools.

Beautify

While programming my main goal is to get the program, feature, or product running quickly (yes, of course after I seek to find ways to optimize) and with that formating usually falls to the wayside. One of my favorite extensions is to help me quickly format is Beautify.

Alt Text

Beautify is a great way to format the HTML, JS, and more.

Better Comments

The next one I use quite often is Better Comments. I am an incredibly visual person when it comes to learning. The Better Comments extension will help you create more human-friendly comments in your code.

Alt Text

With this extension, you will be able to categorize your annotations into:

  • Alerts
  • Queries
  • TODOs
  • Highlights
  • Commented out code can also be styled to make it clear the code shouldn't be there
  • Any other comment styles you'd like can be specified in the settings

Chrome Debugger

Lastly probably the most needed extension is incorporating a debugger. The one that I use for Web development is Google Chrome Debugger.

Alt Text

The benefits here allows you to:

  • Setting breakpoints, including in source files when source maps are enabled
  • Stepping, including with the buttons on the Chrome page The Locals pane
  • Debugging eval scripts, script tags, and scripts that are added dynamically
  • Watches
  • Console

If you thought any of these extensions are great or would like to try Visual Studio Code here is the link to download: https://code.visualstudio.com/download

Already using Visual Studio Code, put your favorite extension in the comments below! Thanks for reading follow for more!

Top comments (7)

Collapse
 
tilakmaddy_68 profile image
Tilak Madichetti

normal person: uses debugger
legends: stare at the code until the code debugs itself

Collapse
 
snappydevlpr profile image
Austin

šŸ˜‚

Collapse
 
senthilmpro profile image
Senthil Muthuvel

Feature rich - YES
Light weight - NO

Sublime Text is light weight..

Collapse
 
snappydevlpr profile image
Austin • Edited

Sublime is a great option too! By light weight Iā€™m referring to memory footprint which around 200mb. what are your favorite things about both? Any extensions you use?

Collapse
 
senthilmpro profile image
Senthil Muthuvel

Sublime Text
Loads Super fast.
E.g. even if I load a 500 MB JSON file, it loads in few seconds.
Application doesn't slows down if I install a lot of extensions.

VS Code.
Feature rich. Lots of supports for extensions. Excellent keyboard bindings.
Bit slower in loading large files. App gets slower after installing lots of extensions.
But I do love VS code and use it everyday.

Thread Thread
 
gmarokov profile image
Georgi Marokov

Forgot to add that Sublime is not free.

Collapse
 
sourishkrout profile image
Sebastian Tiedtke

Are you interested in productivity tools at all, Austin? We've built Marquee which helps you overcome multi-workspace shortcomings.

dev.to/sourishkrout/lost-in-vs-cod...
dev.to/sourishkrout/getting-on-top...

Would love to hear your feeback!