In this article, we will go over the steps necessary to download a popular text editor called Visual Studio Code, also referred to as “VS Code.” By the end of the article you will be able to create a folder in Visual Studio Code that contains an HTML document that you can open in your web browser. Show
I. IntroductionWhat are ‘text editors’?Text editors, also called code editors, are applications used by developers to write code. They can highlight and format your code so that it’s easier to read and understand. If you’ve used Codecademy, you’re already familiar with a text editor. It’s the area you write your code in. Using a text editor is part of creating your “development environment,” the set of tools that you use for working on coding projects. It will allow you to take what you’ve learned on Codecademy and put it into practice as you work on projects on your computer. Not only will this introduce you to tools that are commonly used by professional developers but it also means that you’ve grown as a developer and are ready to start working on your own—great work! Specific to writing code, text editors provide a number of advantages:
You may also have read or heard about IDEs, or “integrated development editors.” An IDE allows you to not only edit, but also compile, and debug your code through one application or interface. While the text editor we recommend isn’t considered an IDE, it has many IDE-like features that make life as a developer easier without needing a lot of resources that an IDE usually requires. The best of both worlds! Choosing a Text EditorThere are a number of text editors to choose from. For example, Visual Studio Code is one of the most popular text editors used by developers. (That’s Visual Studio Code and not Visual Studio, which is slightly different. We want the former, the one with ‘Code’ in the name.) Other popular text editors you may have heard of are Atom and Sublime Text. Any of these text editors mentioned are great for development but to make things easier, we suggest you start off with Visual Studio Code. Some of the benefits of this editor are:
When you are further along in your coding career, you can try other code editors to see what features work best with your personal development workflow. II. Installing Visual Studio CodeSo, we’ve chosen our text editor, now we just need to install it on our computer! Video InstructionsFor the visual learners, this video details how to download and install Visual Studio Code. Written instructions are below. Installation StepsThe installation process for computers running macOS, Windows, and Linux, (specifically Ubuntu and Debian), will be very similar and using Visual Studio Code across all of them will be the same.
That’s it, you’ve successfully installed your text editor and are ready to start coding! III. Practice: Use Visual Studio Code to start an off platform projectAs you move through various lessons and paths here on Codecademy, you may find yourself needing to create a project on your own computer and not on the Codecademy learning environment. This can be tricky, but it’s an exciting step that signals that you are ready to work independently. To do this, we’ll need to use the text editor we installed above. Let’s take a moment to try out Visual Studio Code. What are ‘development folders’?Before using your text editor, it’s important to establish an organized file system. As the number and size of your projects grow, it becomes increasingly important to know where to save new projects and find old projects. Most developers store their projects in an easy-to-find directory, (what you might be used to calling a ‘folder’). Here at Codecademy, we recommend naming this directory projects. It will store all of your coding projects. Whenever you create a new project, no matter how small, you should always make a new folder inside your projects directory. You will find that single-file projects can quickly turn into large, multi-folder projects. Practice: Let’s make a projectBelow are the steps you need to follow to create a new folder for all of your programming projects. You will also learn how to load a new project folder into Visual Studio Code and make your very first “hello world” HTML project. We’d recommend that you watch the above video and then follow the written steps below. 1. Make a development folder.Navigate to a folder using your file manager or the terminal. Make sure it is a folder you visit regularly and will remember. Create a new folder called projects. Mac users: This may be your User account or “Home” folder. Windows users: You may want to save this on your C drive. Linux users: You may want to save this in your User folder inside of the “Home” folder. Inside the projects folder, create a new folder called HelloWorld. Everything you add to this folder will be part of your HelloWorld project. 2. Open Visual Studio Code3. Open your development folderClick on the ‘Explorer’ icon on the left hand menu and click on the button ‘Open Folder’ and choose your development folder. This will launch your file manager. Navigate to the HelloWorld folder and select Open. The folder will open in Visual Studio Code’s side pane. At this point, there should not be any contents in the folder. We’ll add a file in the next step. 4. Add a file.Before you learn how to add files to a project folder, it is important to understand the purpose of file extensions. A file extension is the suffix of a filename (the last 3 or 4 characters in a filename, preceded by a period) and describes the type of content the file contains. For example, the HTML file extension is .html, and it tells the browser (and other applications) to interpret the contents of the file as an HTML document. Once Visual Studio Code loads a project folder, you can add files. The steps below describe how to add files. Don’t worry about doing this on your own computer. We’ll get to that next. In Visual Studio Code’s Explorer pane, click on your development folder’s name. You’ll see four icons appear to the right of the folder name. Click the ’New File’ icon. Type the new file’s name with its appropriate file extension ( for example, .html, .css, .csv). It is critical that you include the correct file extension, so programs like linters know how to interpret its contents. Press Enter when done. 5. Begin coding!Copy and paste the following boilerplate HTML code:
|