Today Let’s look at some of the VS Code extension that will power up you developer experience.
This allows us to automatically reload the page when you change the code in your IDE
Link: Live server
Quokka.js is automagically compute the results you are typing and print the results in the IDE itself.
This spell checker will report some common spelling errors. This works well with camel case code.
Link: Code Spell Checker
GitLens supercharges the git capabilities built int VS Code. It helps you to visualize code authorrship at a glance via Git Blame annotations.
Pretteir is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules
ESLint is a static code analysis tool for identifying problematic patterns found in JS Code. Rules in ESLint are configurable.
This will provide icons next to file names in a tree view based on file extensions. This makes it much easier to identify files at glance.
This extension helps you to compile/transpile your SASS/SCSS files to CSS files in real time with a live browser reload.
Browser Preview for VS Code enables you to open a real browser preview inside your editor that you can debug with.
This will autocomplete path and filenames in your code.
This exetension allows matching brackets to be identified with colors. The user can define which characters to match and which colors to use.
Link: Bracket Pair Colorizer
VS Code VIM is a Vim emulator for VS Code, bringing the power of Vim to your text editor.
Highlight TODO, FIXME and other annotations within your code.
Highlight HTML inside ES6 syntax.
Link: ES6 String HTML
This extension styles CSS/Web colors found in your document so you can see what colors they are, without needing to open the page.
Link: Color Highlight
In case you need to sync your VS Code settings (Configs and extensions), you could use the settings Sync extension (uses Github’s Gist to sync).
Hope you found this short article useful. If so hit the 👍🏻 ❤️