Avast! Code Setup,

Skip to content

Avast ye, this be a machine-translated text an’ may contain errors, aye!

1. Charts

The first thing we must do to get started with VS Code be openin’ a chart. Ye can do that by pressin’ “Open Folder”. If ye can’t find that button, ye can press “File” -> “Open folder”.

  • Tip 👍:
    • We recommend ye have a place where ye store all yer code, like for example: “HTML” inside an “IT” chart.
    • Inside this “HTML” chart, ye can name charts like “Project 1”, “Me Website”, and so on.
    • After makin’ a chart, just press on it, then the “Open Folder” button in the chart selectin’ window.

Warning

If ye don’t open a folder, ye’ll be havin’ trouble savin’ yer files. If ye haven’t opened a folder, VS Code won’t know where to save ‘em.

Tip

This be the menu ye’ll be seein’ (if ye haven’t opened any folder yet). Otherwise, ye click on “File” -> “Open Folder”

VS Code Start Menu

2. Files

These be the buttons ye use t’ create files an’ folders in VS Code. Give ‘em a try an’ see what happens, aye.

Folders an' files in VS Code

Warning

‘Tis most direly important that the files ye be workin’ with have the proper file extensions. ☝

Info

What be a file extension, ye ask? ‘Tis what comes after the dot . in a file name. In the example above, we see .html, meanin’ this be an HTML file.

What would it say if we had a CSS file, or a JavaScript file, aye? Why, it would say .css or .js. This be mighty important, for if ye be missin’ this, things won’t work as ye expect.

Tip

If ye be lackin’ the file extension, ye can always right-click on the file and press “Rename”. From there, ye can give the file both a proper name and a proper file extension.

Avast, Give it a Try!

Once ye’ve crafted a file, ‘tis time to start writin’ code, aye! Remember to save yer work!

Info

To save a file, ye can either press “File” -> “Save”, or press Ctrl + S (on Windows) or Command + S (on Mac).

The program be not runnin’! 🤯

In many a case, ye must save a file for things to work, aye. If somethin’ ain’t workin’, try savin’ it first!

3. Extensions

“Extensions”, or “Outboardings”, be a built-in part o’ VS Code. Unlike many other Code-editors, VS Code ain’t got a heap o’ extra features. ‘Tis what we use Extensions for.

Extensions OP

Ye reach the Extensions window by pressin’ on the icon with the four squares:

Extensions i VS Code

Here ye can search for Extensions for all sorts o’ purposes.

For example, try searchin’ HTML. Then ye’ll get a line o’ extensions comin’ down. To install, just press the right one and then press “Install”.

Install VS Code Extension

Info

If ye be wantin’ to uninstall, ye can sail back to the same spot, but now the “Install” button will be swapped out with “Uninstall”.

Extension Ikon Purpose
open in browser open in browser icon Helps ye open HTML files in yer browser.
Live Server Live Server icon Allows ye to run HTML files in yer browser, and they update automatically if ye make changes.
HTML CSS Support HTML CSS icon Gives ye auto-complete for more HTML and CSS features.
HTMLHint HTMLHint icon Gives ye a hand with findin’ what might be wrong with yer HTML code.
Python Python icon Gives ye much help with writin’ Python code, and includes more Python tools.

Extension Icon Purpose
JavaScript (ES6) code snippets JavaScript snippets icon Gives ye handy “snippets” for JavaScript code, aye.
indent-rainbow indent-rainbow icon Gives ye a “rainbow” o’ indentations. Useful if ‘tis hard to see where the indentations be in the code. 🌈