8 VSCode Extensions to make you the most efficient web developer inΒ 2022

The following list contains extension for Visual Studio Code to help you write more and cleaner code in less time, reduce errors during development and speed up your debugging cycles.

Although extension like bracket colorizer might be helpful, those kinds of extensions won't help you to become more productive. If you want to be a 10X frontend developer, check out the following extensions!


1. Prettier

Prettier logo

Problems to solve 🀯

  • unnecessary changes in Git, because everyone uses his own coding style
  • endless discussions about the right coding style
  • spotting indentation errors in your code

Why it's useful 🀩

  • generates pretty code styles while saving your file
  • supports all major (and even minor) languages
  • no setup or config files necessary
  • no more "tabs vs spaces" discussions (but let me know in the comments, which team you are πŸ˜‰) means more time to code
  • never worry about your code style, just save it and be done with it

Where to get it πŸ”—


2. Auto Close Tag

Auto Close Tag Animation from their Github Page

Problems to solve 🀯

  • hours of searching for the remaining closing tags

Why it's useful 🀩

  • inserts closing tags for you (who would've thought πŸ˜…)
  • places cursor right between the tag after closing
  • faster and less typing

Where to get it πŸ”—


3. Auto Rename Tag

Auto Rename Tag Animation from their Github Page

Problems to solve 🀯

  • changing tags h1 to h2, ul to ol or div to main etc forces you to change the tag name twice
  • you have to search in the DOM tree for the matching closing tag

Why it's useful 🀩

  • changes the matching tag element (closing or the opening one) for you while you're typing!
  • saves a lot of time (and nerves)

Where to get it πŸ”—


4. VSCode Vim Plugin

VSCode Vim Plugin Animation from their Github Page

Problems to solve 🀯

  • slowly moving your mouse from one side of the text in quotes to the other, just to select it and change it
  • manually scrolling through your code to find a position
  • wasted time of moving the cursor with arrow keys to the end of a block…

Why it's useful 🀩

  • when you get used to some vim motions, you'll be able to edit chunks of code in no time! πŸš€
  • even some simple motions will speed you up, e.g. type ci" to change all the content in between the quotes, dat to delete around the current tag where your cursor is, and all its inner child tags, cs' to change the quotes from " to ' without leaving your cursor position, and many more!
  • the mouse slows you down… learn to use your keyboard and dominate it!
  • this plugin will give you all the benefits of Vim, while you get the support of an IDE with file management, completion and much more! It's pure gold πŸ’ͺ

Where to get it πŸ”—


5. Github Copilot

Problems to solve 🀯

  • you can't remember how to center a div
  • you can describe the problem, but don't know how to code it
  • you're stuck with a problem, but StackOverflow is down πŸ’₯

Why it's useful 🀩

  • converts comments to code! You only need to scaffold the function and write a simple documentation, and Copilot implements the function for you
  • produces a high quality code base, because you've commented every function on the way
  • can write tests for you, simply explain what to test
  • provides different solutions, simply select the one you like the most

Where to get it πŸ”—


6. ES7+ React/Redux/React-Native/JS snippets

ES7+ React/Redux/React-Native/JS snippets Animation from their Github Page

Problems to solve 🀯

  • writing repetitive code, like scaffolding a react component

Why it's useful 🀩

  • generates React components based on file names
  • automatically adds all imports for you
  • don't waste time scaffolding components anymore, start implementing right away
  • multi cursor support, so that you can name the component (and all references to it) the way you want
  • consistent code base by re-using the same snippets

Where to get it πŸ”—


7. Turbo Console Log

Turbo Console Log Animation from their Github Page

Problems to solve 🀯

  • Finding all places, where a variable is used, to debug / trace it (because console.log is the real way to debug code 😏)
  • writing console logs for each and every place
  • come up with different log messages, so that you know where you are

Why it's useful 🀩

  • by selecting a variable and pressing one keyboard shortcut, you get all console logs generated at once!
  • comment out all console logs again with one more keyboard shortcut!
  • after fixing the issue, pressing one final keyboard shortcut to clean (I mean remove) the console log mess in your code

Where to get it πŸ”—


8. Tailwind CSS IntelliSense

Tailwind CSS IntelliSense Animation from their Github Page

Problems to solve 🀯

  • it takes some time to remember all of the functionality of Tailwind CSS
  • you don't know, what this css class really does

Why it's useful 🀩

  • it's more about Tailwind than the extension
  • Tailwind CSS helps to speed up your frontend development by 10 times
  • create beautiful websites and web applications in no time
  • get a preview of the css implementation by hovering over the CSS class
  • get full autocompletion support for all Tailwind CSS classes

Where to get it πŸ”—


Conclusion πŸ’‘

By making use of some of the extensions from above, you can rapidly speed up your daily programming workflow as a frontend developer.

Learn to use your keyboard and customize keyboard bindings and shortcuts, so that it fits well in your development environment.

I hope you've found some new extensions here! Let me know in the comments, which one really blew your mind and has helped you the most! πŸ‘‹