DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for TOP 10 VsCode Extensions for web developers
Adam Nagy
Adam Nagy

Posted on • Updated on

TOP 10 VsCode Extensions for web developers

Advantages of extensions

Visual Studio Code is widely used nowadays for writing software. It is highly extensible and there are a lot of contributors that create useful extensions for it, to give this editor superpowers. It’s not a joke, you can really speed up your development with these tools and enhance the contribution with teammates.
Here is my top 10 extension that you should try in Vs Code:

Video

If you prefer to watch a video instead of reading, you can check out the video that I made on the topic on my YouTube channel:

The toplist of VsCode extensions

10. Gitlens

Gitlens
GitLens is an open-source extension that combines the capabilities of Git and VsCode. One of the best features of this extension, is the ability to visualize code authorship via Git blame annotations and code lens. You can also navigate in the history of a file back and forth to see the changes that were made on it. With the current-line blame you have the ability to click on a single line in the code and you can see the last commit that modified it and you also get a link to the pull request that introduced that change. Overall a really useful tool if you use git as your version control system.

9. Live Server

Live server
Oh I really wish this extension existed when I started to learn web development. It spins up a light nodejs server and serves your html file and all assets from the given directory. On top of that any saved changes you make to your website will be reflected immediately in the browser, which gives a really fast and enjoyable developer experience. You can find this functionality in tools for modern frameworks and libraries like Angular and React, but with this extension you can have the same functionality in any web development project.

8. Import Cost

Import Cost
You know that feeling when you look at npm’s website and see a cool package, install it immediately and import it into your project. So do I, the problem is that we often don’t think of the overhead that it can cause. This is why this little extension is so important. It enables you to track the size of the imported packages and libraries, so you can control the amount of code size that you import. Especially in web development, you should mind every single byte you import as they will negatively affect the load speed of your site, may harm user experience and even SEO rankings.

7. Prettier

Prettier is an opinionated code formatter, which you can set up according to your preferences. It just simply formats your code, and it is really beneficial to have a consistent formatting and styling across your code, because it can save you a lot of time, especially when you collaborate with other developers. You can use Prettier plugins to further enhance the capabilities of this extension, and you can also make it format your code automatically when you save a file.

6. Icons

Icons
This is not a specific extension rather a collection of extensions. If you install an icon extension VsCode will show little icons before your directory names and filenames. Every file extension will have it’s custom icon which makes it 10 times easier to navigate in the code and find the file or folder that you searched for. Even directories can have their specific icons based on their names and purpose. My go-to option is Material Icon Theme, but there are other really cool ones like vscode-icons, Simple Icons, Material Theme Icons. Find out which one suits you the most.

5. MarkDown all in one

Mardown all in one
Writing documentation is part of the developer job, whether you like it or not. The most commonly used markup to write documentations or even blog posts is markdown. Markdown all in one makes this process more enjoyable by providing useful shortcuts, autocomplete and live-preview features. It really speeds up documentation writing, so you can get back to developing new features much faster.

4. Better Comments

Better comments
Better comments help you write more human-friendly, readable comments. Comments help you understand your own and others' code. This extension helps to visually organize your comments, so it will be much more digestible. You can categorize your annotations to highlighted text, errors and warnings, questions, strikethrough and TODO. With these formatted annotations being visually separated you won’t miss out on any must-read comments.

3. Snippets

This is again not a single extension but a collection of extensions. Using code snippets is a really good way to save time during development and increase productivity. For example if you use react and install the ES7/React/redux/GraphQL/React-native snippet you can simply type β€œrfc” and hit enter to import React and create a functional component. You can also find code snippet extensions for angular, vue, python, html and so on.

2. Path intellisense

Path intellisense
Path intellisense is a great tool which makes it easier to work with files. It autocompletes filenames, and can be really useful if you work with lots of node modules or files in general.

1. Auto Rename Tag

Auto rename tag
This is a must-have extension for web developers. As the name suggests, it automatically renames the second tag if the first one is modified and vice versa. In bigger projects where you have nested tags and elements manual update can be difficult and tedious. And the great thing is that it works with JSX so you can use it with React too!

Where you can learn more from me?

I create education content covering web-development on several platforms, feel free to πŸ‘€ check them out.

I also create a newsletter where I share the week's or 2 week's educational content that I created. No bullπŸ’© just educational content.

πŸ”— Links:

Top comments (29)

Collapse
 
tomaszs2 profile image
Tom Smykowski

Great list. I'd add Assistant to the list: marketplace.visualstudio.com/items...

Collapse
 
alexomeyer profile image
Alex Omeyer

Cool stuff, thanks for sharing!

Our team is building Stepsize VS Code extension for managing technical debt, we'd be happy to hear your feedback on it if you give it a try :)

Collapse
 
javascriptacademy profile image
Adam Nagy Author

Looks promising :D
I’ll probably give it a try soon

Collapse
 
lukeshiru profile image
Luke Shiru • Edited on

Correct me if I'm wrong but to rename matching tags, you can use F2, so you might not need the extension.

Collapse
 
cavo789 profile image
Christophe Avonture

You're right. That extension is no more useful since months.

Collapse
 
javascriptacademy profile image
Adam Nagy Author

I’ve just searched for it and you’re right! I haven’t tried it yet, but feels like if you need it often the extension way will be faster

Collapse
 
nadatanasovska profile image
Nadica Atanasovska

You can just enable Linked Editing in settings ;)

Thread Thread
 
javascriptacademy profile image
Adam Nagy Author

Thanks for the info I'll try it out

Collapse
 
blackr1234 profile image
blackr1234

Very useful article, thanks for sharing! 🍻

Collapse
 
javascriptacademy profile image
Adam Nagy Author

You’re welcome. Hope you will or already use dome of these πŸ˜‰

Collapse
 
blackr1234 profile image
blackr1234

I have been using Prettier which is a must-have to me. I have tried Gitlens but I'm still not used to all those buttons/features. For Live Server, I just use the one that comes with React. For Auto Rename Tag, I press F2 (Windows) and type the new tag name, but this extension is a faster way. The other ones are really useful.

Thread Thread
 
javascriptacademy profile image
Adam Nagy Author

Yes definetely Prettier is a must have for me either πŸ‘

Collapse
 
yatki profile image
Mehmet YatkΔ±

Hey @javascriptacademy thanks for the list.. you can also check this little extension of mine. It gives you CTRL + SHIFT + T shortcut to surround your codeblocks with snippets.

GitHub logo yatki / vscode-surround

πŸ”₯A simple yet powerful extension to add wrapper templates around your code blocks

Surround

Visual Studio Marketplace Visual Studio Marketplace GitHub last commit License


A simple yet powerful extension to add wrapper snippets around your code blocks

Features

  • Supports language identifiers πŸš€New!
  • Supports multi selections
  • Fully customizable
  • Custom wrapper snippets
  • You can assign shortcuts for each wrapper snippets separately
  • Nicely formatted (Preserves indentations πŸš€New!)
  • Sorts recently used snippets on top πŸš€New!

Demo 1: Choosing a wrapper snippet from quick pick menu

Demo 1

Demo 2: Wrapping multi selections

Demo 2

How To Use

After selecting the code block, you can

  • right click on selected code
  • OR press (ctrl+shift+T) or (cmd+shift+T)

to get list of commands and pick one of them.

Hint

Each wrapper has a separate command so you can define keybindings for your favorite wrappers by searching surround.with.commandName in the 'Keyboard Shortcuts' section.

List of commands






















Command Snippet

surround.with (ctrl+shift+T)
List of all the enabled commands below
surround.with.if if ($condition) { ... }
surround.with.ifElse if ($condition) { ... } else { $else
…




Cheers, πŸš€πŸ––

Collapse
 
gul profile image
Gul

Extremely Cool 😎.
Waiting for the next article ☺️☺️

Collapse
 
javascriptacademy profile image
Adam Nagy Author

Thanks!
Hope you won't need to wait for so long.
Next blogpost is planned to release today afternoon.

Collapse
 
leodevbro profile image
Levan Katsadze

Maybe you will also like the VSCode extension "Blockman". It highlights nested codes blocks based on curly/square/round brackets, html/xml tags and Python/Yaml indentation. (I am the author of Blockman).
.
i.ibb.co/31F0rm9/vscode-blockman-i...
.
.

Collapse
 
imonem profile image
imonem

Extremely useful, thanks a lot.

Collapse
 
javascriptacademy profile image
Adam Nagy Author

You're welcome!

Collapse
 
sjanjan profile image
lijian

Good job,very helpful

Collapse
 
javascriptacademy profile image
Adam Nagy Author

Thank you! Enjoy these extensions!

Collapse
 
foxnacity profile image
Damian Nowak

That's a really helpful article. I love the Better Comments extension, the way my code shines right now in term of comments and theirs usefulness is brilliant. Thanks for sharing!

Collapse
 
javascriptacademy profile image
Adam Nagy Author

Glad to hear that it helped you and enjoy the use of the extension 😊

Collapse
 
pachverb profile image
new/bird

good job

Collapse
 
obaino82 profile image
Obaino82

Perfect πŸ™Œ

Collapse
 
javascriptacademy profile image
Adam Nagy Author

Thanks! Hope you’ll love to use these extensions!

Collapse
 
tracksuite profile image
Azrem Ahamed

how did the prettier automatically correct the code formation?

Collapse
 
fiwz profile image
Afiani F

Omo, I need that better comment!! Thank you πŸ‘

Collapse
 
juni profile image
Junaid Anwar

I love the path intelligence and better comments. I'll try them later today.

Thank you for the helpful list of extensions!

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post