The are versions for Windows, Linux & Mac.
Visual Studio Code (“VSCode”) is a free, open-source code editing application from Microsoft. I have been using (and have blogged about using) Notepad++ to teach HTML & CSS up until now. You can download the latest version of VSCode for free from Microsoft.com or the Microsoft Store. The interface is fully configurable, and you can synchronise your settings to your Microsoft account in the Cloud to have your optimal settings available on any machine you sign into with your account!
In this tutorial:
Download:
See also:
- Open Browser Preview extension for VSCode
- Using VSCode’s Compare files feature
Word Wrap
Word Wrap can be switched on using the Word Wrap command which appears last under the View menu. This is a must.
Tabbed interface
If you have been coding in Notepad, you will definitely enjoy this simple feature: you can open all the files you are working on in tabs. This means you have access to commands such as Save All which will save all changes made in all open files (keyboard shortcut: Ctrl + K S).
There are 2 files open in the screenshot below: index.html & basic.css. The ● (dot) on the right of the index.html tab indicates that there are unsaved changes:
Explorer
You can open a folder and have its contents displayed and accessible in the Explorer:
HTML IntelliSense
IntelliSense offers suggestions as you type in HTML. Simply complete typing the word or take the shortcut: use the arrow key to select the correct option (if necessary) and press the Enter key to complete the word. If you are not adding attributes, then simply type the closing >.
This feature is an incredible aid if you are not 100% certain of your tags and attributes!
Close tags
Tag elements are automatically closed when the > of the opening tag is typed. This can take some getting used to and is only useful when you are coding from scratch.
Auto update tags
When modifying a tag, the linked editing feature automatically updates the matching closing tag. This feature is deactivated by default.
To activate, open the Settings by navigating to Files » Preferences » Settings:
- The Settings panel opens
- Search for linked editing
- Select the Linked Editing option
Color picker
The VSCode color picker UI is now available in HTML style sections. Not only do you get loads of help with color via IntelliSense, but there is a handy color-palette as well.
Note that the HEX values for the colors are also available. The Cambridge IGCSE syllabus requires that you use HEX values and not color names.
MDN Web Docs is an open-source, collaborative project documenting Web platform technologies. [4]
Hover
Hovering over a tag shows a tooltip with a link to the tag’s documentation on MDN Web Docs. In the screenshot below you can see the tooltip that appears when you hover over the <body> tag.
Validation
Errors and warnings are shown as you type. In the screenshot below, you can immediately see the red coloured text indicating that there is currently a syntax error in the code:
Folding
Code folding is available for HTML. This feature is especially useful when you are focusing on a particular section of code, or the structure (rather than the content) of your code.
Read about CSS code formatting here: CSS you need to know for Cambridge ICT.
Code formatting
You can automatically format your code. To format your entire page of code, right-click anywhere on the page and select the Format Document command (Shift + Alt + F):
Zoom
Zoom in is Ctrl+Shift++
Zoom out is Ctrl+Shift+-
References:
- Microsoft (2021) User Interface, Visual Studio Code Docs. Available at: https://code.visualstudio.com/docs/getstarted/userinterface (Accessed: 06 October 2023).
- Microsoft (2021) HTML programming with Visual Studio Code, Visual Studio Code Docs. Available at: https://code.visualstudio.com/Docs/languages/html (Accessed: 05 October 2023).
- Microsoft (2021) Basic editing in Visual Studio Code, Visual Studio Code Docs. Available at: https://code.visualstudio.com/docs/editor/codebasics (Accessed: 06 October 2023).
- MozDevNet (no date) About MDN, MDN Web Docs. Available at: https://developer.mozilla.org/en-US/about (Accessed: 06 October 2023).