VS Code Text Editor
Load Time This page contains embedded interactive content. In may take 3-10 seconds to completely load.
Text editors are specialty applications which can ease the type of text and coding work you will be doing in web development. These applications are designed to speed up the writing process and are specially equipped to display text documents in a way that makes identifying errors more easy.
There are many types of text editors, each optimized for specific types of tasks.
For this class, we need a text editor that is optimized for web development and code. You are welcome to use whatever text editor you like for this course, however, we will be using GitHub’s open-source VS Code Editor for our videos and tutorials, and it may behoove you to use it as well (especially beginners).
VS Code Installation Guide
The following pages will guide you through the installation process. Please following the appropriate instructions for your device.
For Mac
For PC
Optional/Recommended Additions
Most text editors allow you to download additional options created by the community which extend their functionality and can make them more suited to your particular needs.
For VS Code and this course, these would be very beneficial:
These packages (slides 1-8), add functionality to your editor.
- file-icons - Displays file type icons next to files in the sidebar (used in the following tutorial)
- open-in-browser - Opens files (such as HTML) in your default browser
- highlight-selected - Highlights all occurrences of a selected word. This is useful for debugging.
- base linter - Base package to show code errors. Couple with linter-htmlhint and linter-stylelint
- pigments - Highlights color values in files.
This theme (slides 9-14), which customizes the look and feel of the editor:
- newbound-dark-syntax - Subtle, medium contrast theme.
development