Difference between revisions of "Visual Studio Code"

From Publication Station
(Created page with "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 Visual Studio Code from https://code.visualstudio.com and install the software. After opening Visual Studio Code, click on the Extensions icon. Left side of the window. File:Visual Studio Code Extensions.png Search for the extension Live Server. File:Visual Studio Code Live Serve...")
 
 
(4 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.
[[File:Visual Studio Code Explorer Icon.png]]
Press the "Open Folder" button.
[[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.

Visual Studio Code.png

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.

Live Server extension

After opening Visual Studio Code, click on the Extensions icon. Left side of the window.

Visual Studio Code Extensions.png

Search for the extension Live Server.

Visual Studio Code Live Server.png

Click on Live Server and press "install".

Visual Studio Code Live Server Install.png

File explorer

Click on the Explorer icon to go back to the file explorer.

Visual Studio Code Explorer Icon.png

Press the "Open Folder" button.

Visual Studio Code Open Folder.png

Always create a new empty folder to start with.

Visual Studio Code Create Folder.png

First HTML file

Press the "new file" icon.

Visual Studio Code New File Icon.png

Type "index.html" and press enter.

Visual Studio Code Index html.png

Type "!" exclamation mark and press "tab"

Visual Studio Code Exclamation Mark.png

Write "hello" in the <body> element

Visual Studio Code Write In Body.png

Start Server

Press "Go Live" in the right bottom corner. This should open your website 🥳.

Visual Studio Code Go Live.png