icon-dark icon-light

VS Code Extension For Better Developer Experience

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

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

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

Link: Quokka.js


Code Spell Checker

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

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)

Prettier

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

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

Link: ESLint


VSCode Icons

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

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

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

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

Path Intellisense

This will autocomplete path and filenames in your code.

Link: Path-Intellisense


Bracket Pair Colorizer

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

VIM

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

Link: VIM


TODO Highlighter

TODO Highlighter

Highlight TODO, FIXME and other annotations within your code.

Link: TODO-Highlighter


ES6 String HTML Highlighter

TODO Highlighter

Highlight HTML inside ES6 syntax.

Link: ES6 String HTML


Color Highlight

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

Settings Sync

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 👍🏻 ❤️

Loading...