-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlab_04.html
104 lines (99 loc) · 4.68 KB
/
lab_04.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Lab 4 - Setup Visual Studio Code
</title>
<meta charset="UTF-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta "="" content=" width=device-width, initial-scale=1.0" name="viewport" />
<meta content="A guided tour through the fundamentals of Git, HTML, & CSS" name=" description" />
<meta content="#0000ff" name="theme-color" />
<link href="manifest.json" rel="manifest" />
<link href="css/reset.css" media="screen" rel="stylesheet" />
<link href="css/screen.css" media="screen" rel="stylesheet" />
</head>
<body data-lab-id="4">
<a class="skip-to-content" href="#content" tabindex="1">
Skip to content
</a>
<main class="layout">
<nav id="index">
<p class="link-home">
<a href="index.html">
<span>Hack4Impact Starter Pack</span>
</a>
</p>
<button class="link-menu">
Menu
</button>
<nav tabindex="0">
<ol>
</ol>
</nav>
</nav>
<div id="content" tabindex="-1">
<h1 class="lab_title">
<em>Lab 4</em>
Setup Visual Studio Code
</h1>
<h2>Goals</h2>
<ul>
<li>Download and setup Visual Studio Code</li>
<li>Install the Prettier extension</li>
</ul>
<h2>Integrated Development Environment</h2>
<p>Software developers use many different tools to write code, test programs, and manage
large projects. Instead of installing each tool individually, we can use an <strong> integrated development
environment</strong> or <abbr>IDE</abbr>. IDEs provide a convenient interface to install and manage all
the tools we need to develop software.
</p>
<p>One of the most popular IDEs is <abbr>VSCode</abbr> or <strong>Visual Studio Code</strong> by Microsoft. It's
completely free, works on Windows and macOS, and has a strong open-source community providing features through
downloadable extensions.</p>
<p>This is what Hack4Impact recommends new developers use and what you will need for the Starter Pack.</p>
<h2>Install Visual Studio Code</h2>
<p>Download and install Visual Studio Code from here: <a
href="https://code.visualstudio.com/Download" target="_blank" rel="noopener">https://code.visualstudio.com/Download</a>.</p>
<h2>Install the Prettier Extension</h2>
<p>Just like when writing an essay, you want your code to be readable and look nice. You can do this manually
or you can use Prettier. Prettier is standard for formatting a variety of web development languages. For the
purposes of the Starter Pack, we will need it to format <code>HTML</code> and <code>CSS</code>.</p>
<video controls class="video">
<source src="assets/0401.mp4" type="video/mp4">
</video>
<ol>
<li>Hover over the icons on the left-hand side. Click the <strong>Extensions</strong> icon.</li>
<li>In the search bar, search for "Prettier".</li>
<li>Click on the <i>Prettier - Code formatter</i> extension to see its details.</li>
<li>Click the blue <strong>Install</strong> button to install the Prettier extension.</li>
</ol>
<h2>Setup Prettier</h2>
<p>There's a little bit of setup to make sure that Prettier works as our formatter.</p>
<video class="video" controls>
<source src="assets/0402.mp4" type="video/mp4">
</video>
<ol>
<li>Click the <strong>Settings</strong> <em>gear</em> in the lower-left of the screen</li>
<li>Search for "Formatter" in the search bar</li>
<li>Under the select menu for <strong>Default Formatter</strong>, choose <em>Prettier - Code formatter</em></li>
<li>Check the box that says <strong>Format on Save</strong>. This will apply formatting whenever you save a
file.</li>
</ol>
<h2>Setup Autosave</h2>
<p>If you've ever closed a Word assignment without saving, then you know the pain of not having autosave.
Fortunately for us, VSCode comes with autosave. Unfortunately, it's disabled by default. Let's turn it on.</p>
<video class="video" controls>
<source src="assets/0403.mp4" type="video/mp4">
</video>
<ol>
<li>Click the <strong>Settings</strong> <em>gear</em> in the lower-left of the screen</li>
<li>Search for "Auto Save" in the search bar</li>
<li>Under the select menu for <strong>Auto Save</strong>, choose <em>afterDelay</em>. This will automatically
save your file after the delay time under <strong>Auto Save Delay</strong>. The default is 1000ms.</li>
</ol>
</div>
</main>
<script src="js/ui.js" type="text/javascript"></script>
</body>
</html>