I have been working as a Software Developer for 3y+, in that time VSCode is always my 1st choice of editor for JS/TS stack.
One of the things that make VSCode stand out to other Editors is its extension marketplace. In this post, I'm gonna show you some of the extensions that I find most useful to my workflow.
1. Pair bracket colorizer
Maybe many of you have heard about it. This extension will match brackets color in pair so you can easily identify starting/ending point of a block of code. This becomes extremely useful whenever I have to copy/paste a block of code from one place to another.
Sadly, when you're missing a bracket, the colors will become incorrect, so this can't help too much in debugging a missing bracket.
2. Git Ignore
Easily create a .gitignore file for your project from thousand of pre-made templates with just a command.
Language support for .gitignore is also provided but I don't find any difference
3. Import Cost
If you're a Front-End developer, optimizing bundle size is always an important task. This one will show import package size right after your import statement, helping you detect heavy libs immediately when you import it.
After using this package, I also found out that for some package, importing the whole library vs import only the function you needed don't have any different because of the way the package author export them.
4. NPM Intellisense
This extension will autocomplete NPM module when you write your import statement. It also provides actions for quick importing modules.
I find this extension most useful when you have to import modules with extremely long name that you can't remember.
5. Paste and Indent
Have you ever felt annoying when copy & paste a piece of code into your project and all the indentation being messed up ? This extension will help indent your code to the correct indentation when you perform the "paste" action.
After you install it, simply change "CMD + V" action into "pasteAndIndent.action" in your shortcut key settings
The indentation is not 100% correct all the time, but still very useful to me
6. SQL Beautify
VSCode was born for web development, especially Front-end side. If you like me working on both Front-end and Backed-end you will definitely have to work with SQL files sooner or later.
This extension does the same as Prettier or Beautify but for .sql files. Under the hood, it uses a library name "vkbeautify".
7. Turbo Console
I know it's not a good practice to use console.log() for debugging purposes but if you're like me, debugging with console.log() most of the time, this ext can save you a lot of time writing those console.log().
Simply put, it provides you with a keybinding for quickly add a console.log() in your JS/TS file. In my mac, I have modified this key binding into "Ctrl + C".
8. YAML by Red Hat
If you have to work on .yaml/.yml file this one is a life saver. In the past, I had to work with an extremely long swagger docs written in YAML file without any formatter or language support, luckily, I found this.
This extension provides YAML/YML validation, auto-complete and formatted.
Happy Coding!!!!
Top comments (3)
Pretty good list...Based on your descriptions, I’ve made a few opinionated comments for each:
I think I just fell in love with Turbo Console Log. Thanks for that.
I've loved this list. Definitely will try some of these out. I guess two extensions that I use a lot and that are very useful are prettier and live server. Prettier is an auto-format extension that you can configure to your coding preferences. And live server puts your index.html file (or other file) in live mode, so whenever you save your work, the page auto refreshes, what is very helpful.