Visual Studio Code: Difference between revisions
VKranendonk (talk | contribs) No edit summary |
VKranendonk (talk | contribs) |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
Visual Studio Code is a code editor created by Microsoft and freely available. | Visual Studio Code is a code editor created by Microsoft and freely available. | ||
[[File:Visual Studio Code.png]] | |||
The following will be instructions on installing Visual Studio Code and additional extensions. | The following will be instructions on installing Visual Studio Code and additional extensions. | ||
== Download and install == | |||
Download Visual Studio Code from https://code.visualstudio.com and install the software. | Download Visual Studio Code from https://code.visualstudio.com and install the software. | ||
== Live Server extension == | |||
After opening Visual Studio Code, click on the Extensions icon. Left side of the window. | After opening Visual Studio Code, click on the Extensions icon. Left side of the window. | ||
| Line 16: | Line 22: | ||
[[File:Visual Studio Code Live Server Install.png]] | [[File:Visual Studio Code Live Server Install.png]] | ||
== File explorer == | |||
Click on the Explorer icon to go back to the file explorer. | Click on the Explorer icon to go back to the file explorer. | ||
| Line 21: | Line 29: | ||
[[File:Visual Studio Code Explorer Icon.png]] | [[File:Visual Studio Code Explorer Icon.png]] | ||
Press the "Open | Press the "Open Folder" button. | ||
[[File:Visual Studio Code Open Folder.png]] | [[File:Visual Studio Code Open Folder.png]] | ||
Always create a new empty folder to start with. | |||
[[File:Visual Studio Code Create Folder.png]] | |||
== First HTML file == | |||
Press the "new file" icon. | |||
[[File:Visual Studio Code New File Icon.png]] | |||
Type "index.html" and press enter. | |||
[[File:Visual Studio Code Index html.png]] | |||
Type "!" exclamation mark and press "tab" | |||
[[File:Visual Studio Code Exclamation Mark.png]] | |||
Write "hello" in the <body> element | |||
[[File:Visual Studio Code Write In Body.png]] | |||
== Start Server == | |||
Press "Go Live" in the right bottom corner. This should open your website 🥳. | |||
[[File:Visual Studio Code Go Live.png]] | |||
Latest revision as of 10:06, 5 September 2022
Visual Studio Code is a code editor created by Microsoft and freely available.
The following will be instructions on installing Visual Studio Code and additional extensions.
Download and install
[edit]Download Visual Studio Code from https://code.visualstudio.com and install the software.
Live Server extension
[edit]After opening Visual Studio Code, click on the Extensions icon. Left side of the window.
Search for the extension Live Server.
Click on Live Server and press "install".
File explorer
[edit]Click on the Explorer icon to go back to the file explorer.
Press the "Open Folder" button.
Always create a new empty folder to start with.
First HTML file
[edit]Press the "new file" icon.
Type "index.html" and press enter.
Type "!" exclamation mark and press "tab"
Write "hello" in the <body> element
Start Server
[edit]Press "Go Live" in the right bottom corner. This should open your website 🥳.
