Maybe you miss these cool VSCode extensions

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!!!!

Comments

[Mark Smith]

Pretty good list...Based on your descriptions, I’ve made a few opinionated comments for each:

• Pair bracket coloriser - I don’t often have issues with brackets, it’s usually a sign my code needs refactoring, one place it does happen is in templates (ejs, njk, etc)
• Import cost - I could see this maybe being useful for frontend programmers, I’m mostly backend atm, I do optimise my client code for size but I’ll do it every now and then, rather than have a plug-in, I’m not adding so many libraries in the frontend that I need a plugin
• npm intelligence - I’m not that much into intellisence, usually I find it just gets in the way, having it just for npm seems over the top to me
• paste and indent - doesn’t happen enough to warrant a plugin imo
• SQL Beautify - this looks like a cool plugin, makes a lot sense to automate this task
• Turbo console - I don’t use console.log that much fir debugging, mostly I use the debugger, but I do like how this automatically adds the location in the code as a string, I can see this being useful
• YAML by redhat - large yaml files start to get tricky to see the syntax, so this looks useful, though I don’t currently use that much yaml, when I do use it, it tends to be relatively small files, but in cloud native there’s a lot of yaml, so I could see this being useful in some future projects perhaps

[Jake Carpenter]

I think I just fell in love with Turbo Console Log. Thanks for that.

[Letícia Pegoraro Garcez]

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.