Set up your coding environment quickly and efficiently by customizing Visual Studio Code with essential extensions and shortcuts. Follow clear steps to optimize your workflow and begin your web development journey smoothly.
Key Insights
- Download and configure Visual Studio Code from code.visualstudio.com, including installing an essential extension called "Open in Browser" to easily preview your web pages in browsers like Chrome.
- Assign a custom keyboard shortcut (Option-W on Mac, Alt-W on Windows) for the "Emmet Wrap with Abbreviation" feature, streamlining your coding workflow by quickly wrapping code blocks.
- Set Google Chrome as the default browser within Visual Studio Code's "Open in Browser" extension settings, leveraging Chrome's widespread use and robust developer tools.
Note: These materials offer prospective students a preview of how our classes are structured. Students enrolled in this course will receive access to the full set of materials, including video lectures, project-based assignments, and instructor feedback.
In the workbook, we have step-by-step instructions that go hand-in-hand with doing this training. A couple of things about using it: this table of contents is clickable.
So, for example, if you want to download the class files, you can click on that, and that'll take you to the page for downloading the files. A couple of pages later, there is some instructor material you might want to read about what HTML and CSS are. The Before You Begin section is something you're going to want to do.
I'm going to walk you through it on screen here, but the instructions are written down here to do these steps as well. You're going to want to head over to code.visualstudio.com, or you can just Google Visual Studio Code and download that for your Mac or PC. Once you've downloaded and installed it, go ahead and launch the application.
There are a couple of things that will make your life easier as a Web Developer—things you'll want to install. For example, an extension to preview in browsers. Once we have written our code, we're going to want to view it in a web browser, and an extension will make that a lot easier.
There's one called Open in Browser, and there are actually two versions—one with capital letters and one with lowercase. Get the one with more installs and lowercase letters. Go ahead and install that option, and that'll add a feature so you'll be able to easily open your web pages in your browser using a keyboard shortcut or menu option.
There's also a setting that we're going to use through a keyboard shortcut a lot, and that is to wrap code in a wrapper element. If we go down here to this little gear and go to Keyboard Shortcuts, we can search for Wrap. This Emmet Wrap with Abbreviation—notice there is no keystroke for that.
I want to assign a keystroke, so I'm going to double-click on that. On a Mac, press Option-W, and on Windows, press ALT W. Even on a Mac, it may display as ALT W, but I did hit Option-W.
W as in Wrap, that's why we're doing that. Press that keystroke and then press ENTER, and you should see it set there. We'll be using that later on in the training.
Another setting I'd like to configure is to make sure that the extension we've installed opens up in Chrome. With the Extensions pane open and the Open in Browser extension visible, click the little gear icon to manage it, and go to Settings. Notice that mine is already set to Chrome, but yours will likely be set to Empty by default.
Type in Chrome there, and that way when we preview in Browser, it'll open up in Google Chrome, which is the most commonly used browser and offers excellent developer tools. That's the primary browser we're going to develop in. Of course, we'll want to preview in other browsers like Safari and Firefox, but for default previewing, Chrome is the browser I typically want to use.
Now your code editor is all set up, and you can go on to the next video to start learning how to code.
