VS Code for Web Developers
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.
Created Jul 12, 2020 - Last updated: Jul 12, 2020
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.
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
Access all available commands based on your current context.
Ctrl + Shift + P
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.
Quickly open files.
Ctrl + P
Navigate between recently opened files
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.
Navigate between recently opened folders and workspaces
Ctrl + R
Displays a Quick Pick dropdown with the list from File > Open Recent with recently opened folders and workspaces followed by files.
Errors and warnings
Ctrl + Shift + M
Quickly jump to errors and warnings in the project.
Cycle through errors with F8 or Shift+F8
You can filter problems either by type (’errors’, ‘warnings’) or text matching.
Change language mode
Ctrl + K M
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.
VS Code has a Extension store on it’s own, so no more hard work for working extensions.
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.
|Beautify||This Extension Helps to beautify and format HTML JS CSS SCSS JSON documents.|
|Community Material 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)||This Extension would help you to minify written codes into .min files, so our sites would be faster in no time.|
|Live Sass Compiler||We’re Using this extension to compile our SCSS Codes into css files so we can link them in our files.|
|Live 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||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||This extension will show a live preview of our markdown files so it’s easier to work with.|
|Material Icon Theme||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||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.
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 + `
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.
You Can use ! Symbol to load up a HTML boilerplate whenever you need.
Emmet in Visual Studio Code
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.
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.
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).
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.