The Web Developer’s Guide to Visual Studio Code
Visual Studio Code is the most popular editor in Web Development.
Visual Studio Code is a lightweight text editor built with Electron that can run cross- platform on Windows, Mac, and Linux. It is easily customizable, incredibly fast, and extremely powerful. This guide is targeted at Web Developers looking to take advantage of the amazing features VS Code offers.
VS Code has support for tons of different languages and is especially apt for working with HTML, CSS, and JavaScript for Front-End Web Development. There is also great support for Back-End languages like PHP, JavaScript, Python, Ruby, and more!
Shortcuts
Shortcuts can save you a ton of time as a Web Developer while working inside of VS Code. Spend some time becoming familiar with the VS Code shortcuts so increase your development efficiency.
Key Bindings (docs)
Windows Keyboard Shortcuts MacOS Keyboard Shortcuts
Essential Shortcuts in Visual Studio Code (video)
Top Extensions for Web Developers
One of the best features of VS Code is the ability to add functionality through extensions. The extension ecosystem is massive and covers almost any scenario you can think of.
Here’s a list of the top 22 Best Visual Studio Code Extensions for Web Developers.
Check out the Web Development Essentials Extension Pack to install the best extensions for Web Developers all at once!
Out of the box, VS Code supports Emmet, which makes writing HTML and CSS much quicker. Emmet provides an easy to use abbreviation syntax to generate well-structured HTML and CSS code. As a Web Developer, Emmet is a necessity! To activate an Emmet shortcut, type the abbreviation and then press enter or tab.
Emmet HTML Snippets Cheat Sheet
Emmet HTML Snippets in Visual Studio Code (video)
Debugging
VS Code has debugging tools built in to inspect variables, step through code, etc. By creating the appropriate configuration, you can debug the most popular Front-End and Back-End languages and frameworks. Here’s a couple of videos to get you started.
Debugging Node (video) Debugging JavaScript (video)
Debugging Create React App (video) Debugging (docs)
Debugger Extension (docs)
Live Reloading Servers
Lots of Front-End frameworks have live reloading servers built in, but some do not. VS Code has two amazing extensions to help you run one yourself! It’s really simple. Start the server, save your code, and the webpage will automatically refresh with the latest changes.
A live reloading server will reload your app in the browser every time you save a code change.
Live Server Extension in VS Code (video) Live Server Extension
Browser Preview Extension
All Web Developers should be using version control in their daily workflow, and it can all be done right inside of VS Code. VS Code has built in support for Git version control as well as working with remote repositories like Github.
If you are looking to improve your workflow in handling Github Pull Requests, you can also check out the Github Pull Requests extension.
Git in Visual Studio Code (video)
The Built-in Terminal
Working with the terminal is essential for Web Developers to create projects, install NPM packages, start dev servers, etc. With VS Code, the terminal is built in, so you can write your code and execute terminal commands all in the same app! You can even customize it to specify which terminal you want to use.
Integrated Terminal (docs)
Fira Code – A Free Font with Fancy Font Ligatures
Every Web Developer needs a fancy font to work with in their editor. Fira Code is a free font that supports Font Ligatures which make your code look even better than it already is!
VS Code Instructions for Fira Code
Markdown is the language that all Github repository ReadMe files are written in. Since the Web Development community is so heavily involved in open source, it’s likely that you will write your very own ReadMe file one day. When you do, just know that VS Code has amazing support for writing and previewing Markdown files.
Introduction to Markdown Using VS Code Markdown in VS Code (docs)
Markdown Worksheet
Auto Formatting
As a Web Developer, the last thing you want to have to worry about is manually formatting your code. Lucky for you, there are several extensions to help automate the formatting process, so that you can focus on building awesome things!
Editor Config for VS Code
Prettier – Code Formatter
ESLint (Formatting and Linting)
TSLint (Formatting and Linting)