In this article, we’ll go through the steps required to download a popular text editor called Visual Studio Code, also known as “VS Code”. By the end of the article, you’ll be able to create a folder in Visual Studio Code that contains an HTML document that you can open in your web browser.
Me. Introduction
What are ‘text editors’?
Text editors, also called code editors, are applications used by developers to write code. They can highlight and format your code to make it easier to read and understand. If you’ve used Codecademy, you’re already familiar with a text editor. It is the area in which you write your code.
Using a text editor is part of creating your “development environment,” the set of tools you use to work on coding projects. It will allow you to take what you’ve learned at Codecademy and put it into practice while working on projects on your computer. This will not only introduce you to the tools that professional developers often use, but it also means that you’ve grown as a developer and are ready to start working on your own. Great job!
Specific to writing code, text editors provide a number of advantages:
- Language-specific syntax highlighting
- Indentation automatic code scanning
- Color schemes to suit your preferences and make code easier to read
- Plugins, or plug-ins, to catch code errors
- A tree view, or visual representation, of a project’s folders and files, so you can conveniently navigate your project
- Shortcuts or key combinations for faster development
You may have also 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 an application or interface. While the text editor we recommend is not considered an IDE, it does have many IDE-like features that make life easier as a developer without the many resources that an IDE normally requires. The best of both worlds!
Choosing a text editor
There are several 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 mentioned text editors are great for development, but to make things easier, we suggest you start with Visual Studio Code. Some of the benefits of this editor are:
- Free to use
- Open source (meaning that the code of a program can be viewed, modified, and shared)
- IDE-like features
- Backed by a large user community and Microsoft
When you’re further along in your coding career, you can try other code editors to see which features work best with your personal development workflow.
II. Installing Visual Studio Code
So, we’ve chosen our text editor, now we just have to install it on our computer!
Video Instructions
For visual learners, this video details how to download and install Visual Studio Code. Written instructions are below.
Installation Steps
The installation process for computers running macOS, Windows, and Linux (specifically Ubuntu and Debian) will be very similar, and using Visual Studio Code on all of them will be the same.
-
Visit the Visual Studio Code website to download the latest version of Visual Studio Code.
-
You should see your computer’s operating system, but if it’s not correct, click the down arrow and find the option that matches your operating system in the dropdown menu and click the down arrow icon. set to “Stable”.
Windows users: This will download the latest version of Visual Studio Code as an .exe file.
Windows users Mac : This will download the latest version of Visual Studio Code for Mac as a .zip file.
Linux users: .deb and .rpm are file types different for data storage. We suggest that you download the .deb file for automatic updates to work as the Visual Studio Code documentation suggests.
-
Once the Visual Studio Code file has finished downloading , we must install it . Find the Visual Studio Code file in your file manager, the program that allows you to view the files and folders on your computer.
Windows users: Open the .exe file by clicking on it and run the installer. Continue clicking “Next” and finally “Finish”.
Mac users: The downloaded .zip file should be in the “Downloads” folder. Open the file. If you see this message, choose “Open”.”
Linux users: The downloaded file should be in your ‘Downloads’ folder.
Find it in your file manager, double-click and choose ‘Install’ in the GUI software center, or run the following commands, one at a time, in the terminal:
sudo dpkg -i download_filename.deb sudo apt-get install -f
-
Make sure you have your Visual Studio Code application saved somewhere you know it can be easily found.
Windows users: It will automatically be placed on your Start menu.
Mac users: Click and drag the Visual Studio Code icon from the folder Downloads to the Applications folder.
Linux users: It should appear in the programs taskbar.
It That’s it, you have successfully installed your text editor and are ready to start coding!
III. Practice: Use Visual Studio Code to start an off-platform project
As you progress through various lessons and pathways here on Codecademy, you may need to create a project on your own computer and not in the tutorial by Codecademy. atmosphere. This can be tricky, but it’s an exciting step that signals you’re ready to work independently.
To do this, we’ll need to use the text editor we installed above. Let’s take a moment to test 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 your coding projects. Anytime you create a new project, no matter how small, you should always create a new folder inside your project directory. You’ll find that single-file projects can quickly become large multi-folder projects.
Try It: Let’s Make a Project
Here are the steps you need to follow to create a new folder for all your programming projects. You will also learn how to load a new project folder in Visual Studio Code and create your first “hello world” HTML project.
We recommend that you watch the video above and then follow the steps below.
1. Create a development folder.
Navigate to a folder using your file manager or the terminal. Make sure it is a folder that you visit regularly and that you will remember. Create a new folder called projects.
Mac users: This can be your user account or the “Startup” folder.
Windows users: You can save this to your C drive.
Linux users: You can save this to your folder inside the “Startup” folder.
Inside projects, create a new folder called HelloWorld. Anything you add to this folder will be part of your HelloWorld project.
2. Open Visual Studio Code
3. Open your development folder
Click the ‘Explorer’ icon on the left menu and click the ‘Open Folder’ button and choose your development folder. This will launch your file manager.
Navigate to the HelloWorld folder and select Open. The folder will open in the side panel of Visual Studio Code. At this point, there should be no content in the folder. We’ll add a file in the next step.
4. Add a file.
Before learning how to add files to a project folder, it’s important to understand the purpose of file extensions. A file extension is the suffix to a file name (the last 3-4 characters in a file name, preceded by a period) and describes the type of content that the file contains. For example, the HTML file extension is .html and tells the browser (and other applications) to interpret the content 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 the Visual Studio Code Explorer panel, click the name of your development folder. You will see four icons appear to the right of the folder name. Click on the ‘New File’ icon. Type the name of the new file with its appropriate file extension (for example, .html, .css, .csv). It’s critical that you include the correct file extension, so programs like linters know how to interpret your content. Press Enter when you’re done.
5. Start coding!
Copy and paste the following boilerplate HTML code:
Save your file often with AutoSave and track changes with a time tracking system versions if you know how to use it. . (To turn on auto save, click ‘File’ and then ‘Auto Save’. When it’s on, you’ll see a check mark next to ‘Auto Save’.) This will decrease the chances of losing your unsaved work.
File Extensions and Syntax Highlighting
Syntax is the set of rules that tells us how to create correctly written code. Visual Studio Code and other text editors can interpret file extensions and provide language-specific syntax highlighting. Syntax highlighting is a tool to make code easier to read. Take a look at your index.html file. The text and labels are in different colors. This is how Visual Studio Code highlights the .html syntax. With each new language you learn, Visual Studio Code will highlight text in a way that makes your code easy to read. This may be different than other text editors and also different from the way your code is highlighted in Codecademy.
Optional: Change the color scheme
Although Visual Studio Code comes with default syntax highlighting, you may want to change the colors used. Good color themes will make reading all those lines of code easy on your eyes. (Try low-contrast dark themes like “Solarized Dark” or “Dracula Dark”.)
To do this, select Color Theme on the Welcome page when you first open Visual Studio Code, or click Click Code in the menu bar at the top of your desktop window, then click Preferences, followed by Color Theme. You can also search for color themes to install using the Extensions menu.
6. View your HTML file in the browser
At this point, your file is ready to be viewed in a web browser. The following steps should be performed outside of Visual Studio Code:
Navigate to the index.html file in your Hello World folder via your file manager or terminal.
Double-click or open index.html. The page should open in your default web browser. Take the second to marvel at your work: you made your first project with Visual Studio Code.
Go Further with Visual Studio Code Features
If you’re already comfortable with the steps above, explore the features below to further customize your development environment. You don’t need to use these hints to complete the projects in Codecademy, but they can help you be more efficient when writing code and are what make Visual Studio Code such a useful editor.
-
Debugging code in the editor: That’s right, you can run and test your code from the editor!
-
Version control: You don’t need to switch to the terminal on your computer to track changes with Git.
-
Integrated Terminal: You can run command line commands from your editor with Visual Studio Code.
IV. Wrapping Up
Congratulations! You have successfully set up your text editor and are ready to create websites on your own computer.
Happy coding!
.