Maybe you miss these cool VSCode extensions

sese22 — Sun, 31 Jan 2021 10:54:37 +0000

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

DEV Community: sese22