Introduction

Visual studio code is a powerful and a user-friendly code editor, It has extended functionality, which makes it an all-in-one solution for most of the web developers and This would be a follow up guide to a Web and Hybrid app development course I’m planning forward to.

Installation

VS Code is available for Windows, Mac and linux, so pretty much It’s a cross platform code editor. one of my favourite. You can download it Here for all platforms. Or You can get it from Linux and mac app stores too. And for choco instance,

  > choco install vscode

Command Palette

Access all available commands based on your current context.

  Ctrl + Shift + P

VS Code

Default keyboard shortcuts

All of the commands are in the Command Palette with the associated key binding (if it exists). If you forget a keyboard shortcut, use the Command Palette to help you out.

VS Code

VS Code

Quick Open

Quickly open files.

  Ctrl + P

VS Code

Repeat the Quick Open keyboard shortcut to cycle quickly between recently opened files.

Open multiple files from Quick Open

You can open multiple files from Quick Open by pressing the Right arrow key. This will open the currently selected file in the background and you can continue selecting files from Quick Open.

Open Recent

  Ctrl + R

Displays a Quick Pick dropdown with the list from File > Open Recent with recently opened folders and workspaces followed by files.

Status Bar

Errors and warnings

  Ctrl + Shift + M

Quickly jump to errors and warnings in the project.

Cycle through errors with F8 or Shift+F8

VS Code

You can filter problems either by type (’errors’, ‘warnings’) or text matching.

Change language mode

  Ctrl + K M

VS Code

f you want to persist the new language mode for that file type, you can use the Configure File Association for command to associate the current file extension with an installed language.

For more information Check This article.

Extensions

VS Code has a Extension store on it’s own, so no more hard work for working extensions. VS Code

Here you can see the extension store of the VS Code, you can also trigger it using

  Ctrl + Shift + X

or for mac

  Command + Shift + X

What I Extensions Should You Use

Well, for today, I’ll show you some extensions I use for my personal Projects, Use the extension Store to get These Extensions.

Extension Icon Description
Beautify Beautify This Extension Helps to beautify and format HTML JS CSS SCSS JSON documents.
Community Material Theme Theme This Would increase the contras between code and the editor, so It’s easier to see and easy for the eyes.
JS & CSS Minifier (Minify) Minify This Extension would help you to minify written codes into .min files, so our sites would be faster in no time.
Live Sass Compiler SCSS We’re Using this extension to compile our SCSS Codes into css files so we can link them in our files.
Live Server SERVER As it says in the name, It’s a simple web server. why do we need it? because modern JS won’t work completely in local files. so we need a some kind of a Server to test everything.
Mark Down All In One MDE This one will help us on our markdown files, to format markdown files and it also has some Snippets to use.
Mark Down Preview Enhanced MDP This extension will show a live preview of our markdown files so it’s easier to work with.
Material Icon Theme MIT Here’s another theme for you. This would change default file extension icons in VS Code and I Highly Recommend it
Toggle format on save FOS This extension would format our documents on save. I use it most of the times, and you should.

And That’s Pretty much It for now. Also you can search for more extensions in the store anytime you want. Just click install to install it.

Useful Commands And Guide

Press F1 to popup the quick command panel, It’ll help you to run quick commands and extensions.

Toggle format on save

Press F1 and type Toggle Format on save and your extension window will pop up, click on it and you’re good to go. That’s pretty much how you do it for almost every extension.

VS Code

Terminal / Power shell on current Directory

You can open your working directory by using

  > code .

on terminal Or going to File > Open Folder

Then you can popup an integrated terminal on that specific folder by using

  Ctrl + `

or in Mac

  Command + `

VS Code

Live Server

If you installed the live server Extension, you can see a small Go Live button on bottom right when you’re working with HTML Pages.

VS Code

Quick Tips

You Can use ! Symbol to load up a HTML boilerplate whenever you need.

VS Code VS Code

Emmet in Visual Studio Code

Emmet

This is a complete toolkit for web developers. It’s Easier to learn and use, and It’ll improve your productivity overtime. I’ll explain it in another post because there are so much to go. I’ll provide you what we need in specific documents in the future.

Or Check This Guide On Emmet. Also a Cheat Sheet to Download

GIT Integration

Yes, VS Code has built in Git support, but you have to download and install git bash to associate with this functions. I’ll Explain everything in the future so if you aren’t comfortable with anything above, Don’t worry you’ll be comfortable after everything completes.

What’s Next?

From Here on I’ll Discuss a complete guide to Web development and Hybrid app development. And in the End I’ll Provide with a Course hub “Maybe” If You are interested (Let me know in the comments).

Conclusion

It’s Harder for humans to brake up with their habits, but for a starter, Start with what’s best and you’ll be more productive with the time. VS Code is a great and easy to use editor or “A Development Environment”, as nothing as I seen in the past, No doubts it’s the most favourite.