macbook setup

Setup VS code with essential extensions for web development

setup vs code

setup vs code

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,)
VS Code - Open Settings Command Image

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.

Visual Studio

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 staring and closing HTML tags even if you update on of them.

Usage

Now open 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.

Global symbols are shown in the suggestion list

Now open 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 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 what 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 generare 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 help 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 runnign any extra command. 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.

Gitlens

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 improve 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 categorise 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 visiualize 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 specially for your. This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-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!

status bar component

Search node_modules

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 the angular development faster as you don’t need to write all code instead use this 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 search in 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.

screencast

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.

Visual Studio Code Theme Preview

Popping and Locking Theme

This is again a dark colored themed but very colorful

js

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

DescriptionWindowsMac
Open user settingsCTRL+,⌘+,
Show shortcutsCTRL+K CTRL+S⌘+K ⌘+S
Show Command PaletteCtrl+Shift+P, F1⇧⌘P, F1
Go to lineCTRL+G^+G
Go to fileCTRL+P⌘+P
Go to next error or warningF8F8
Find in current FileCtrl+F⌘+F
Find in all filesCTRL+⇧+F⌘+⇧+F
Replace in current FileCtrl+H⌘+⌥+F
Replace in all filesCTRL+⇧+H⌘+⇧+H
Format document⇧+ALT+F⇧+⌥+F
Select all occurrences of current selectionCTRL+SHIFT+L⌘+⇧+L
Select all occurrences of current wordCTRL+F2⌘+F2
Insert cursor above/belowCtrl+Alt+ ↑/↓⌘+⌥+ ↑/
Cut lineCtrl+X⌘+X
Copy lineCtrl+C⌘+C
Toggle line commentCtrl+/⌘+/

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

Let me know your thoughts

%d bloggers like this: