Up and Running with VS Code
Part 1 of 3 of VSCode series
A no-frills guide to setting up and learning Visual Studio Code — the world’s greatest text editor.
VSCode is very quickly becoming the text editor of choice for most programmers. I will even go so far as to say that I believe VSCode will soon become industry standard software, if it doesn’t hold that title already.
According to the 2019 Developers Survey conducted by Stack Overflow, 50.7% of respondents chose VSCode as their daily text editor. Many people I have spoken to balked at having to switch to VSCode, but then fell in love. I fall into both of these categories. You couldn’t have convinced me to switch if it hadn’t been a requirement for school. However, I love it now and you could never convince me to switch again.
Getting up and running with VSCode is incredibly easy. It is a relatively small file that downloads quickly. The user interface is highly intuitive. Without having to read any docs, you can figure out the core features in under half an hour. There are thousands of extensions, icon packs, and themes so you can customize your editor to be exactly what you want. If you’re coming from another editor, you can typically download a pack with the theme and keybindings you’re used to with very minimal effort.
You can go beyond syntax highlighting and autocomplete with IntelliSense, which provides smart completions based on variable types, function definitions, and imported modules. You can debug from inside the editor. It has a built-in Git command GUI if you don’t like working from the command line (although I’ll cover other options in a future series on Git specifically . Stay tuned for it too). There are a staggering number of extensions for different languages.
I could go on and on, but I’m sure you’re ready to get started with VSCode and learn the interface. So let’s jump in and get you up and running. Head over to :
Download the version appropriate for your OS and choose between 32-bit or 64-bit if you’re on Windows. If you’re not sure which version you’re using, type “system information” from your Windows search bar, and look through the top few lines for “System Type”. If it says x64, you’re 64-bit. Otherwise, download 32-bit.
The installer is pretty straightforward. I would recommend that if you don’t understand options in the installer, stick with the defaults. Although, make sure you install to PATH when given the option. And I personally prefer the other options on that same page. (see below) This one will enable options that you will undoubtedly need as you progress.
Choose the defaults on the rest of the options unless you understand the choices. Everything can always be changed later from settings if you do change your mind about anything. After you select all of your options, and install, you will be presented with this screen.
To the far left, you have the activity bar. There are 5 options by default:
Explorer (this is where you browse directories in your file system and open a folder to work from.
Search
Source Control (a GUI for working with Git source control)
Debug
Extensions (download extensions, themes, or icons from the Marketplace)
A common practice is to create a working folder that all projects will go into. You will at some point be using terminal, so I recommend creating this folder at the root of your drive. (i.e. root/projects) It will make things easier for you in the future. When you clone a file from Git in that directory, it gets its own folder, and if you start your own project without cloning, you should create your own folder. If you do personal work and work for your job, make those two separate directories, if not completely different user profiles on your computer.
With that in mind, create a folder at your root to keep all of your projects in and then create a subfolder called UpRunVSC (Up and running with VSCode), or some other title that will be easy for you to remember. You can do this from Explorer (Windows), Finder (MacOS), or the command line. You have a few options :drag and drop that folder onto VSCode, right click and select “Open with Code”, or type `code .` from terminal (notice the . at the end). It is also an option to go to Explorer in VSCode and choose “Open folder” and navigate to the directory, but that may not be the best choice if you already have the folder open elsewhere.
Once you have opened a folder, you will see a few buttons available to you on the bar that has your folder name. You have to hover on the bar for the icons to show up. The left button is Create File. Use it to create a file called index.html. Then create another file named style.css. Create a folder with the second icon and name it styles. You can drag and drop files to another folder. Drag and drop style.css into the styles folder. Click in the blank area below all the names to deselect all items, then go back up and create a new folder called scripts. Create a file named app.js. Notice how the file is created in the most recent folder you created. When you create a folder, the focus shifts to the folder. And files are also created wherever the focus is currently at. If you need a folder or file created at the root of your open folder, click in the empty area below the file names or hit Esc to deselect all items.
Click on index.html to bring the file up in your editor panel. In the editor panel, type an exclamation point (!), and then hit the Tab key. A boilerplate for HTML 5 will appear. This is performed by Emmet, a tool to create long bits of HTML very quickly. You can see the following website for some of the most common abbreviations:
https://docs.emmet.io/cheat-sheet/
Notice how all of your text is color coded according to its HTML syntax. HTML, JavaScript and CSS are installed by default, as well as a few other languages.
But let’s say you use Go or C. Click the bottom icon on the activity bar: Extensions. It will pull up a menu. Copy and paste @category:”programming languages” with the quotation marks into the search bar that appears. This will bring up a variety of language extensions so that you can add the AI and highlighting for the language that you work in. Or if you only need one specific language, you could type that language directly into the search bar.
Once you get your language installed, let’s play some more in VSCode. The interface is pretty configurable. If you like to work without distraction, you can activate Zen mode. This will hide most of the UI except your editor windows. Cmd/Ctrl + Shift + P will bring up your Command Palette. This has hundreds of options you can type out. As soon as you start typing Zen you will see the option to activate Zen mode. The keyboard shortcut may be one unfamiliar to you so far. Press Ctrl + K then release both and press Z. To exit hit Esc. Sometimes I have to double tap Esc.
There are two resources provided to you by the editor, and I recommend you check them out before you go any further. The first is under Help > Keyboard Shortcuts Reference. The second is Help > Interactive Playground. This is an incredible. It opens up a sandbox and tutorial in one right inside of your editor. This tutorial will walk you through the most essential things to know about VSCode to help improve your productivity. DO NOT skip this. If you skip everything else, do this one thing. It will help you so much in the long run. Perhaps even revisit it again in two weeks to refresh it. Make them habit, then make them muscle memory. Time equals money my friend!
This should have you up and running. Play with the editor, and build a small project or two. Then once you feel comfortable with all of the basics, come back for Parts 2–3 to finish out this series:
- Absolutely Essential Extensions for any VSCode User
- Tips and Tricks for VSCode
Now go get coding!
