Avast ye, this be a machine-translated text an’ may contain errors, aye!
Installasjon og Grunnleggende Konfigurasjon
Aye, first ye gotta install the beast, Visual Studio Code! Download it from https://code.visualstudio.com/ and follow the instructions for yer vessel – I mean, yer operating system. Once installed, we be needin’ to configure it for smooth sailin’.
Viktige Utvidelser
Shiver me timbers, extensions be like the crew o’ a ship – essential for gettin’ the job done! Here be a few ye should consider:
- Python: For all ye Python scallywags.
- JavaScript (ES6) code snippets: A treasure trove o’ code snippets for JavaScript.
- Prettier: Keeps yer code lookin’ shipshape and Bristol fashion.
- Live Server: Lets ye preview yer web pages without liftin’ anchor.
Konfigurering av Editor
Now, let’s tweak the editor to suit yer piratical needs. Open the settings (File > Preferences > Settings) and adjust as ye see fit.
Tema
Change the theme to somethin’ that pleases yer eye. Dark themes be popular amongst us sea dogs!
Fontstørrelse og Fontfamilie
Adjust the font size and family for optimal readability. A clear font be crucial when navigatin’ through code!
Integrering med Terminal
A true pirate needs a trusty terminal! Visual Studio Code has one built-in. Ye can access it by pressin’ Ctrl + \ (or Cmd + \ on a Mac).
Bruk av Debugger
The debugger be like a spyglass, helpin’ ye find and fix errors in yer code. Learn to use it, and ye’ll be a master o’ yer domain!
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). Or else, ye click on “File” -> “Open Folder”
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.
Warning
‘Tis most crucial 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 be if we had a CSS file, or a JavaScript file, aye? Why, it would be .css or .js. This be mighty important, for if ye be missin’ this, things won’t work as ye expect.
Tip
Should ye be missin’ the file extension, ye can always right-click the file an’ press “Rename”. From there, ye can give the file both a proper name an’ a proper file extension.
Avast, Give it a Whirl!
Once ye’ve crafted a file, ‘tis time to start scribin’ code! Remember to save yer work, aye!
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 “Outboards”, be a built-in part o’ VS Code. Unlike many other Code-editors, VS Code ain’t got a heap o’ extra features. That be what we use Extensions for.
Ye get to the Extensions window by pressin’ on the icon with the four squares:
Here ye can search for Extensions for all sorts o’ purposes.
For example, try searchin’ for HTML. Then ye’ll get a row o’ extensions comin’ down. To install, just press the right one and then press “Install”.
Info
If ye be wantin’ to uninstall, ye can sail back to the same spot, but now the “Install” button will be swapped out for “Uninstall”.
Recommended Extensions:
| Extension | Ikon | Purpose |
|---|---|---|
| open in browser |  | Helps ye open HTML files in yer browser. |
| Live Server |  | Allows ye to run HTML files in yer browser, and they update automatically if ye make changes. |
| HTML CSS Support |  | Gives ye auto-complete for more HTML and CSS features. |
| HTMLHint |  | Gives ye help with findin’ what might be wrong with yer HTML code. |
| Python |  | Gives ye much help with writin’ Python code, includin’ more Python tools. |
Optional (but still recommended)
| Extension | Icon | Purpose |
|---|---|---|
| JavaScript (ES6) code snippets |  | Gives ye handy “snippets” for JavaScript code, aye. |
| indent-rainbow |  | Gives ye a “rainbow” o’ indentations. Useful if ‘tis hard to see where the indentations be in the code. 🌈 |