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 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 pages later, there's 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 doing 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 have that downloaded and installed, go ahead and launch that application.
There's a couple things that will make your life easier as a web developer, things you 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 that's called Open in Browser, and there's actually one that has capital letters and one with lowercase. Get the first one here with more installs with lowercase. Go ahead and install that option, and that'll add a feature so that we'll be able to easily open our web pages in our browser via 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 some code in some sort of wrapper code. 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 set a keystroke, so I'm going to double-click on that. On the Mac, I would hit Option-W, and on Windows, that'll be ALT W. I know here even on the Mac, I know it does display as ALT W, but I did hit Option-W.
W as in Wrap, that's why we're doing that. We hit that keystroke and hit ENTER, and then you should see it set there. We'll be using that later on in the training.
Also, another thing I'd like to set is a setting to make sure that that extension here that we've installed is going to open up in Chrome. Actually, here with this Extensions pane open and the Open in Browser extension visible, I can click the little gear here to manage it, and I can go to the Settings. Notice that mine is already set to Chrome, but yours will probably be defaulted to Empty.
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 does have very good developer tools. That's the primary browser that we're going to develop in. Of course, we'll want to preview in other browsers like Safari and Firefox, but as far as a default for previewing the way that most people will be viewing our web pages and for the good developer tools that Chrome has, that's the default browser that 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.
