Setup VS code with essential extensions for web development

Visual Studio Code is one of the most popular free source-code editors, made by Microsoft for Windows, Linux, and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. Users can change the theme, keyboard shortcuts, preferences, and install extensions that add additional functionality.

Installation

Installation is super easy, just go to the download page then choose your OS to start downloading VS-Code file compatible to your OS.

Settings

We have to do few settings so get the best out of VS-Code. There are various features that VS-Code

Go to settings

• MacOS press cmd+ comma i.e (⌘,)
• Widows press control + comma i.e (Ctrl,)

Now open settings.json file and paste below settings snippet

"editor.formatOnSave": true
"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true,
"editor.renameOnType": true,
"javascript.suggest.autoImports": true,
"typescript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",
"javascript.preferences.quoteStyle": "single",
"typescript.preferences.quoteStyle": "single",
"editor.codeActionsOnSave": {
    "source.organizeImports": true
},
"editor.renderWhitespace": "all",

Now let’s see the above added settings in detail.

Format on Save

This setting will auto-format your file when you save it so reducing the effort of pressing format code shortcut keys again and again.

Now open settings.json file and paste below settings snippet

  "editor.formatOnSave": true

Auto Close Tags

This setting enables the auto-closing feature which means that it automatically closed any of the HTML or JSX tags.

Now open settings.json file and paste below settings snippet

  "html.autoClosingTags": true,
  "javascript.autoClosingTags": true,
  "typescript.autoClosingTags": true

Alternate extension: auto-close-tag

Auto rename HTML tags

It helps to rename both starting and closing HTML tags even if you update one of them.

Now open the settings.json file and paste below settings snippet

"editor.renameOnType": true

Alternate extension: auto-rename-tag

Auto Import

Automatic imports speed up coding by suggesting available variables throughout your project and its dependencies. When you select one of these suggestions, VS Code automatically adds an import for it to the top of the file.

Now open the settings.json file and paste below settings snippet

"javascript.suggest.autoImports": true,
"typescript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",

Alternate extension: Auto Import

Organize Imports

The Organize Imports Source Action sorts the imports in a JavaScript file and removes any unused imports:

Now open the settings.json file and paste below settings snippet

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

Sync VSCode settings

This one is my most favorite as I don’t have to repeat all my VS Code settings when setting up a new VS Code in a new machine. So once I activate this setting it auto uploads all my settings.json configs in my GitHub gist and then when I am on my new machine I just need to activate this sync setting again on the new machine and it auto fetches the settings and brings back all my settings and extensions in VS Code. This is just magic!!!! 🧙🏻‍♀️

To activate the auto-sync feature, go to your settings Mac(cmd+,) Windows(ctrl+,) and search for sync and hit Turn on Setting Sync.

You can also select all things to keep in sync like Settings, Keyboard Shortcuts, User Snippets, Extensions, and UI State.

Alternate extension Settings Sync

Dummy Text

This is common that while development we need dummy text to fill in details to check our UI and hence we mostly use Loreum Ipsum. So VS Code gives another feature where you can directly generate loreum ipsum dummy text. This feature is already enabled for us and here is how we can use it.

lorem100

This will generate 100 words of “loreum ipsum” text.

p*4>lorem

This will get you four paragraphs of random-length “lorem ipsum” text.

li*5>p.item*3>lorem10

That will produce five <li> tags with three <paragraph class=”item”> tags containing a random ten-word text.

Alternate Extension Loreum Ipsum

Render Whitespaces

This setting helps you view all the whitespaces as dots(.) You can see in the below image for whitespaces you see dots.

  "editor.renderWhitespace": "all",

Extensions

QUOKKA.JS

I love this plugin the most as it helps me run my JS code and view result there itself without running any extra commands. Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.

Gitlens

Gitlens is your one-stop solution for all git-related features.  It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

PRETTIER – CODE FORMATTER

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

ESLINT

If you are a Javascript developer then ESLint is a must-have plugin for you as it provides static code checking and helps you from making mistakes and improves your code quality.

Code Spell Checker

A basic spell checker that works well with camelCase code. The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.

Debugger for Chrome

A VS Code extension to debug your JavaScript code in the Google Chrome browser, or other targets that support the Chrome DevTools Protocol.

Paste JSON as Code

This plugin is really helpful especially for Typescript as it helps to generate TS types from a JSON. In any JSON file, use the command “Open quicktype for JSON” to summon quicktype, which will generate types from the JSON.

Better Comments

The Better Comments extension will help you create more human-friendly comments in your code.
With this extension, you will be able to categorize your annotations into:

• Alerts
• Queries
• TODOs
• Highlights
• Commented-out code can also be styled to make it clear the code shouldn’t be there
• Any other comment styles you’d like can be specified in the settings

To get the comments as shown in the image above you need to apply the settings mentioned in the gist

Todo+

This is helpful only if you add comments with different tags like TODO, FIX, etc. This plugin helps to manage all your todo tags, it also helps to visualize all your tags on the activity bar.

Import Cost

If you are a developer who keeps an eye on the size of the external dependencies in your project then this plugin is especially for you. This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babil-webpack-plugin in order to detect the imported size

Filesize

it displays the size of the focused file in the status bar of the editor. If you click on the status bar component it will display more information about the file!

Search node_modules

A simple plugin for VS Code that allows you to quickly navigate the file inside your project’s node_modules directory.

Angular Code Snippets

Visual Studio Code TypeScript and Html snippets and code examples for Angular 2,4,5,6,7,8,9 & 10. This makes angular development faster as you don’t need to write all code instead use these snippets.

Angular Schematics

It allows you to generate Angular schematics with a Graphical User Interface. Works with Ionic Angular projects too!.

This extension will save you time:

• Simple interface for Angular CLI: no command line required
• Many options are pre-filled
• The generated file will auto open
• No more typo errors
• No more searching in the documentation: all options available are described

Reactjs code snippets

Similar to angular snippets this one is for ReactJS and Redux. It helps you quickly generate react code using pre-defined snippets.

Bookmarks

As the name says bookmark just like you bookmark your page in a book similarly this plugin helps to bookmark your line of code so that you can easily find it.

YAML

Provides comprehensive YAML Language support to Visual Studio Code, via the yaml-language-server, with built-in Kubernetes syntax support.

Beautify VS Code

Material Icon Theme

These are 300+ colorful material themed icons for files and fodlers. I don’t find any other icon themes as cool and exciting as these Material Icon Theme icons.

Bracket Pair Colorizer

This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use.

Peacock

If you are amoung the developers who keeps multiple vs code instances open at the same time then this plugin is really for you, as it will apply a new color theme to each one of your vs-code instance making it easier to differentiate your instances.

Dracula Official

This is my all-time favorite dark theme. Dracula is amongst the most popular dark themes.

Popping and Locking Theme

This is again a dark colored themed but very colorful

Slack Theme

If you have used Slack and loved the themes provided by slack then you can get the same themes for your VS Code using this extension.

Useful VS Code shortcuts

Here are few shortcuts while I use very often

Description	Windows	Mac
Open user settings	CTRL+,	⌘+,
Show shortcuts	CTRL+K CTRL+S	⌘+K ⌘+S
Show Command Palette	Ctrl+Shift+P, F1	⇧⌘P, F1
Go to line	CTRL+G	^+G
Go to file	CTRL+P	⌘+P
Go to next error or warning	F8	F8
Find in current File	Ctrl+F	⌘+F
Find in all files	CTRL+⇧+F	⌘+⇧+F
Replace in current File	Ctrl+H	⌘+⌥+F
Replace in all files	CTRL+⇧+H	⌘+⇧+H
Format document	⇧+ALT+F	⇧+⌥+F
Select all occurrences of current selection	CTRL+SHIFT+L	⌘+⇧+L
Select all occurrences of current word	CTRL+F2	⌘+F2
Insert cursor above/below	Ctrl+Alt+ ↑/↓	⌘+⌥+ ↑/↓
Cut line	Ctrl+X	⌘+X
Copy line	Ctrl+C	⌘+C
Toggle line comment	Ctrl+/	⌘+/

To view more VS Code shortcuts click on the links below:

• Keyboard shortcuts for macOS
• Keyboard shortcuts for Windows