In the next two chapters, you will learn how to use the Visual Studio Code tool. You will learn how to :
Configure Visual Studio Code
Check out the editor
Manage your work folders
Leverage the commande palette
Handle the terminal
Use git
Make the most of VS Code with extensions
Are you ready?
Configure VS Code
In this first screencast, discover the Visual Studio Code tool and how to configure VS Code. Below, you can find a step-by-step description of the configuration process.
Before diving into VS Code's features, let's start with some basic configuration.
Let's start by choosing a theme: you do this by clicking the Manage button in the bottom left-hand corner.
A pop up menu will appear where you can choose Color Theme.
You can choose between the different Light and Dark themes using the arrow keys, and hit Enter when you have found a theme you like.
For all other configuration and customization options, we'll use the Manage button again in the bottom left, and select Settings.
For example, you can change the Editor: Font Size option. The default option may be a little small, so you can change it from its default 12 to 15.
When you're done, close the Settings tab. You'll notice that you are not automatically redirected to the Get started tab, so open it again from the Help menu.
Check Out the Editor
In this screencast, you will discover the features of VS Code from a code file:
To work with the code editor, you're going to need some code! Start by cloning this OpenClassrooms repo:
https://github.com/OpenClassrooms-Student-Center/5493201-js-for-the-web-gulp
On the GitHub page, click on the green Code button. Under HTTPS, the clone URL option will pop up. Click on the two boxes next to the URL to copy it.
Go back to the Visual Studio Code Get Started window and click on Clone Git Repository.
Paste the clone URL that you copied from the GitHub page.
Click Select Repository Location to choose a directory to save the repository on your computer.
In the bottom left corner, click on Open to start cloning the code into Visual Studio Code.
Once you have successfully cloned the repository, it will show in the Explorer window on the left.
You'll now see the contents of the code folder on the left-hand side of the VS Code window. Close the Welcome tab, and open blog.js by clicking on it:
You should see a file written in JavaScript, one of the many languages for which VS Code has built-in support. Don't worry if you don't understand any of the code; this isn't a JavaScript course! I'd just like to show you some Editor features.
The first thing you'll notice is that the text is multicolored. The different colors correspond to different parts of the programming language and make code easier to read and understand.
Next, notice that the lines of code are numbered, which is an essential tool for all developers, as it allows you to find errors quickly and makes collaboration with other developers much simpler.
If you hover your mouse between the line numbers and the code, some arrows should appear. These arrows allow you to fold the code. Click on the arrows next to lines 4,20,31, and 35:
The code is still there, as the line numbers show, but it is folded up and hidden. It cleans up your editor window, making it easier to concentrate on what you're doing.
You'll discover many more features of the Editor throughout the course of your studies and your career as a developer.
Manage Your Work Folders
Manage file extensions and organise your folders here. This will be very useful for your projects!
While checking out the code editor, you saw that we could open a file by clicking on it in the file explorer on the screen's left-hand side. This explorer also lets you manage your work files and folders. If you place your cursor inside the explorer, you'll see a few icons appear in the header:
The first icon allows you create a new file. When doing so, you must specify its extension.
VS Code interprets the file extension to set up code coloring and auto-correction, for example. Click on New File , and try these three examples: new.html ,new.js , new.css . You'll see that VS Code recognizes the extensions and assigns specific icons to each file type:
The second icon lets you create folders and sub-folders. You can recognize folders in the file explorer by the arrowhead icon VS Code assigns them. Clicking on a folder will open it and show its contents. Create an icons sub-folder to the images folder by selecting it and clicking New Folder :
The next icon, the circular arrow, refreshes the file explorer. This feature is useful when other apps create files in your project folder, and you need VS Code to take them into account.
The final icon collapses the folder structure, folding all folders in the file explorer. It will come in particularly handy in large, complex projects with lots of folders, like this advanced front-end project:
Leverage the Command Palette
The Command Palette is a feature you won’t want to do without! It will help you work more efficiently on VS Code. Check out how it works in this screencast:
VS Code has a shortcut that gives you access to the full range of commands by typing their name. It means that you don't need to learn which menus contain which commands or learn every keyboard shortcut by heart (although you will learn some!). All you need is the Command Palette, which you can open with Ctrl+Shift+P on PC, or Cmd+Shift+P on Mac:
For example, let's say you have multiple editor tabs open, and you want to close them all to work on some other feature in your project. Open the Command Palette, and type "close:"
One of the available choices in the palette is "Close All Editors." You can move down to it with the arrow keys and hit Enter to execute the command.
Another quick command you can use is "New File:"
It accomplishes the same thing as clicking the New File button in the File Explorer, but without using your mouse. Anything that keeps your hands on the keyboard makes you more efficient and comfortable, so try to use this kind of shortcut wherever possible!
Let's Recap!
In this chapter, you explored the basics of Visual Studio Code:
You configured your installation by choosing a theme.
You discovered the Editor.
You explored File Explorer.
You used the Command Palette to access various VS Code commands.
In the next chapter, we will explore more of VS Code's features!
