Best VS Code Extensions to 10x your productivity in 2022

In this video I go through some of the best Visual Studio Code extensions that you can use to increase your productivity as a developer. No matter which programming language or technology you use, you should find something helpful in this video. In this video I go through some of the best Visual Studio Code extensions that you can use to increase your productivity as a developer. No matter which programming language or technology you use, you should find something helpful in this video.

Here are all the extensions in the order that I explain in the video:

Auto Close Tag

Auto Rename Tag

Better Comments

Bracket Pair Colorizer 2

Color Highlight

CSS Peek

Docker

Dracula Official

ES7 React/Redux/GraphQL Snippets

Excel Viewer

GitLens

Paste JSON as Code

Path Intellisense

Prettier

Python

Remote SSH

Swagger Viewer

VS Code Icons

YAML to JSON

Let me know which extensions you use that I did not mention in this video.

Contact me at:

#vscode #extensions #productivity #webDevelopment

[guruyaya]

bracket colorizer is now not mentained, as it became an option within vscode.

[irtizahafiz]

Hi! If you enjoyed this, you might also enjoy this guide: How To Become a Backend Engineer in 2022 | Beginner to Advanced Guide

[homerlol]

Really good vid
You gained a sub My dude

[Noma]

Is there a prettier alternative to python?

[tyquao]

Can you tell me the name of the font you are using. thank

[tycn]

install almost all of the ones I didn't already have installed 😄

[EbonySeraphim]

My YouTube production hints (as a consumer, not creator) -- use chapters. The content here is too long to sit through it all at the pace you go.

My software engineering (seasoned) background believes some of the content value is questionable for a "10x" productivity boost. Maybe if you're dabbling in your own projects, not at a company, or not with a collaborative team. In order:

Auto-close and rename tags: useful for typing flow, but not going to increase your productivity significantly over a large and non-trivial project. It'll just make you feel better while in whatever IDE you use. I recommend everyone have this feature or equivalent anyways but it's not a 10x thing.

Better comments: No. And this will repeat with other plugin suggestions. No plugin that changes how things look (aside from code errors/diagnostics) is going to make you that much more productive. After a while in any programming or markup language, your eyes know where to look to find relevant information in comments and everywhere else is noise. You didn't need the red highlight, you knew how to look at the top of certain sections for it.

Bracket pair colorizer: Hell no. I'd argue trying to flail around with color matching is slow. Same reasons as above. Further, I'm fairly sure VSCode highlights matching bracket/parents/braces when you have your cursor on one of them. This is more of something that will make someone looking at your screen go "oh cool" and after they install it, nothing in their life changes.

Color highlight: Useful if you're a a front end designer and need the color feedback maybe? I imagine people who are fairly serious don't pull hex values for color out of their head to review in the IDE; rather are given values to use from some other source for visual confirmation.

CSS peak: Seems useful for a front end person if there isn't a more universal HTML/CSS plugin that can resolve "go to definition" for CSS style definitions. Except how useful is it if it only applies for IDs? And how confusing would it have to work to find all styles that apply to a current tag / applied classes?

Docker: For auto-complete in dockerfiles sure. But please god to not learn how to use Docker through a plugin like this. Learn how to sue docker on it's own -- that is via CLI commands. Only after you know that, should you consider how this plugin may speed up your workflow. If using a VSCode docker extension feature doesn't work for you, it you're going to have a smaller pool of other engineers willing and able to help you. It's questionable that docker is broken versus your configuration of the plugin, or the plugin not understanding your project.

Auto-complete snippets for react/redux -- perhaps useful. Feels only typing speed related. Auto-compete utility for me is less about typing and more about confirmation of properly typed symbols, sometimes even discovery of better symbols (standard function libraries) and documentation popups.

Excel viewer: what?

GitHub for VSCode: Looks useful and probably is. But like docker, learn how to use the tool on it's own first is probably better unless you're trying to "learn fast" to get off the ground. Over time, you're hurting yourself if you don't know how to use git cli because eventually you may not have VSCode or need to do something beyond what the extension can do and you just won't know how if you're starting from zero at the CLI.

Paste Json as code: My initial thoughts after 2 seconds was "that's cool" but quickly realized during the demo that no one models like that for a real application. Any important and non-trivial data will have been (or should be) modeled with some other source of truth for what it is. It looks great for prototyping or really shallow stuff but dead to me otherwise.

Path Intellisense: Not useful beyond the absolutely beginner programming - maybe more useful in Windows. Yes, you do deal with file paths, but often times substantial applications should be worried about relative root directories testing on your dev/test machine, versus production. If you can understand those differences, getting a path auto-completed has little value.

Prettier: I wouldn't call it productivity increase. Very mature dev teams have hooks that force your code to go through a formatter before code is ever pushed so your styling cannot disagree. This is productivity increase. Having your own is just for your own aesthetics.

Python: get this (or some Python IDE extensions) is you're writing Python in VSCode. If you don't, then you're a .1x engineer. Find another career

RemoteSSH - like docker and git, learn how to use SSH without an extension. If you need the feature within IDE, take advantage but it won't be a huge productivity bump.

VScode-icons: definitely not a productivity boost. It's a nice looking thing like the bracket colorizer. It's an oh cool feature, but you should be able to tell what your files are by their extension over the icon. I more readily recognize .py as an extension than I do the actual Python programming language logo.

YAMLtoJson: If you're in Windows, maybe this is useful given how "out of terminal/command prompt" users tend to be there. On Linux/Mac/POSIX world, go learn and use CLI tools for this. It's not something I've ever jumped back and forth with such that I needed it built into my editor to 1-click.