VS Code Extension For Better Developer Experience

Today Let’s look at some of the VS Code extension that will power up you developer experience.

Live Server

This allows us to automatically reload the page when you change the code in your IDE

Link: Live server

Quokka.js

Quokka.js is automagically compute the results you are typing and print the results in the IDE itself.

Link: Quokka.js

Code Spell Checker

This spell checker will report some common spelling errors. This works well with camel case code.

Link: Code Spell Checker

GitLens

GitLens supercharges the git capabilities built int VS Code. It helps you to visualize code authorrship at a glance via Git Blame annotations.

Link: GitLens

Prettier (Code Formatter)

Pretteir is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules

Link: Prettier

ESLint

ESLint is a static code analysis tool for identifying problematic patterns found in JS Code. Rules in ESLint are configurable.

Link: ESLint

VSCode Icons

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.

Link: VSCode-Icons

Live Sass Compiler

This extension helps you to compile/transpile your SASS/SCSS files to CSS files in real time with a live browser reload.

Link: Live-Sass-Compiler

JS (ES6) Code Snippets

This extension contains code snippets for javascript in ES6 syntax (supports both Typescript & Javascript).

Link: JS-Code-Snippets

Browser Preview

Browser Preview for VS Code enables you to open a real browser preview inside your editor that you can debug with.

Link: Browser-Preview

Path Intellisense

This will autocomplete path and filenames in your code.

Link: Path-Intellisense

Bracket Pair Colorizer

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

VIM

VS Code VIM is a Vim emulator for VS Code, bringing the power of Vim to your text editor.

Link: VIM

TODO Highlighter

Highlight TODO, FIXME and other annotations within your code.

Link: TODO-Highlighter

ES6 String HTML Highlighter

Highlight HTML inside ES6 syntax.

Link: ES6 String HTML

Color Highlight

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

Settings Sync

Honourable mention

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).

Link: Settings-Sync

Hope you found this short article useful. If so hit the 👍🏻 ❤️