learnweb/usingvscode.html at main · atcs-wang/learnweb · GitHub

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
<!DOCTYPE html>
<html>

<head>
    <title>Using VSCode</title>
</head>

<body>

    <h1>Using VS Code effectively</h1>
    <p>Visual Studio Code (VSCode) is a very powerful tool for various kinds of programmers. However, its wide range of features
        can be a little overwhelming. Here's a few tips for using VS Code well.

    </p>
    <h2>Basic shortcuts</h2>
    <ul>
        <li>Save quickly using <samp>Ctrl-S</samp> or <samp>CMD-S</samp>. The white dot in the tab means you
            have unsaved edits, which won't be shown in the browser. Alternatively,
            turn on Auto-Save in the File menu.
        </li>
        <li>Use <samp>Tab</samp> and <samp>Shift-Tab</samp> to add/remove indentation to the current line or
            group of highlighted lines</li>
        <li>Highlight some text and use <samp>Ctrl-Shift-L</samp> or <samp>CMD-Shift-L</samp> to highlight ALL
            instances of that text; you can then edit them all.
            Alternatively, use <samp>Ctrl-H</samp> or <samp>CMD-H</samp> to open the (more powerful)
            Find-Replace tool.</li>
        <li>Add multiple cursors anywhere with <samp>Alt-click</samp> or <samp>Option+click</samp>. You can also Alt-click-drag to highlight multiple places. You can return to a single cursor by clicking anywhere.</li>
    </ul>

    <h2>Adding Extensions</h2>
    <p>Extensions allow you to add additional features to VSCode. Click on the "Tetris blocks" symbol on the left to install and manage your Extensions. </p>
    <p>There is a large collection of open-source extensions available for installation.</p>

    <h2>Tips for working with HTML</h2>
        <p>VS Code has some great built-in features that help with writing/editing HTML. </p>

        <ul>
            <li>Tags have colored (blue) text; invalid tag names change color to red.</li>
            <li>If you write a opening tag, closing tags are automatically created.</li>
            <li>As you work with HTML in VSCode, try to adhere to the
                <a href="htmlbasics.html#formatting">standard formatting practices described in the "HTML Basics" page</a>.
                However, there is also a helpful "Format Document" command in the right-click menu, which attempts to
                automatically clean up your HTML.</li>
        </ul>
        <p>Here are some recommended VSCode Extensions for working with HTML:</p>
        <ol>
            <li>"Highlight Matching Tag" (by vincaslt): click on a opening/closing tag, and its corresponding tag
                will
                be underlined </li>
            <li>"htmltagwrap" (by Brad Gashler): highlight text and press Alt-W to add surrounding tags.</li>
        </ol>
        <p></p>
    </ul>

</body>

</html>