|
1 | | -In this unit, you'll learn how easy it is to locate and install Visual Studio Code extensions. As seen previously, Visual Studio Code installs with many built-in extensions, but it does not come bundled with support for every development language and environment. By using the Extensions Marketplace, you can locate the tools, languages, and debuggers you need for your particular workflow and personal preference. Additionally, there are many extensions that add to the powerful features of Visual Studio Code for even greater customization and control, efficiency, and maybe even some fun. |
| 1 | +In this unit, learn how easy it is to locate and install Visual Studio Code extensions. As seen previously, Visual Studio Code installs with many built-in extensions, but it doesn't come bundled with support for every development language and environment. By using the Extensions Marketplace, you can locate the tools, languages, and debuggers you need for your particular workflow and personal preference. Additionally, there are many extensions that add to the powerful features of Visual Studio Code for even greater customization and control, efficiency, and maybe even some fun. |
2 | 2 |
|
3 | 3 | ## Extension Marketplace |
4 | 4 |
|
5 | | -In the previous unit, you saw the default list presented when you access the Extension Marketplace. Let's look more closely at that, and install a few things. |
| 5 | +In the previous unit, you saw the default list presented when you access the Extension Marketplace. Let's look more closely at that list, and then install a few things. |
6 | 6 |
|
7 | 7 | ### Searching for extensions |
8 | 8 |
|
9 | | -On the left of the Visual Studio Code UI is the Activity Bar. If you do not see an Activity Bar, toggle it on by navigating the pulldown menu sequence: **View > Appearance > Show Activity Bar**. The **Extensions** icon is the highlighted icon in the following graphic. |
| 9 | +The Activity Bar is on the left of the Visual Studio Code UI. If you don't see an Activity Bar, toggle it on by navigating the pulldown menu sequence: **View > Appearance > Show Activity Bar**. The **Extensions** icon is the highlighted icon in the following graphic. |
10 | 10 |
|
11 | | - |
| 11 | +:::image type="content" source="../media/3-visual-studio-code-select-extension.png" alt-text="Screenshot that shows the Visual Studio Code Extension icon highlighted with a red box on the Activity Bar."::: |
12 | 12 |
|
13 | | -By default, all activity icons are showing. If you don't see this icon, right-click in the vacant area of the Activity Bar to see the list of available icons, and select **Extensions**. Open the Extensions list by selecting the icon shown below. |
| 13 | +By default, all activity icons are showing. If you don't see this icon, right-click in the vacant area of the Activity Bar to see the list of available icons, and select **Extensions**. Select the Extension icon to open the Extensions list. |
14 | 14 |
|
15 | 15 | > [!NOTE] |
16 | | -> There is a keyboard shortcut for extensions. Hover your mouse over the **Extensions** icon to see yours (varies by platform). |
| 16 | +> There's a keyboard shortcut for extensions. Hover your mouse over the **Extensions** icon to see yours (varies by platform). |
17 | 17 |
|
18 | | -Since this is your first time installing any extensions, you'll see only a list of popular extensions on the marketplace. |
| 18 | +Since it's your first time installing any extensions, you see only a list of popular extensions on the marketplace. |
19 | 19 |
|
20 | | - |
| 20 | +:::image type="content" source="../media/2-visual-studio-code-extensions.png" alt-text="Screenshot that shows the Extensions button selected in Visual Studio Code."::: |
21 | 21 |
|
22 | | -This list is one way to browse, but with so many extensions available, it's usually quicker to use the Search box at the top. |
| 22 | +This list is one way to browse, but with so many extensions available, it's quicker to use the Search box at the top. |
23 | 23 |
|
24 | 24 | To give you an idea of the variety of choices available for a given category of extensions, type **icons** in the search box. You should see many pages of extensions, sorted by default order (a combination of install count and rating). You can sort more specifically by choosing a sort from the ellipsis icon (`...`) in the upper-right corner of the Extensions area. |
25 | 25 |
|
26 | 26 | ### Installing and managing extensions |
27 | 27 |
|
28 | | -Installing is as easy as clicking the **Install** button on an extension entry in the Marketplace. Let's install a few now. Use the Search box to locate the extensions listed below, and then use the **Install** button on each (we'll get into the function of each of these later): |
| 28 | +Installing is as easy as clicking the **Install** button on an extension entry in the Marketplace. Let's install a few now. Use the Search box to locate the following extensions, and then use the **Install** button on each: |
29 | 29 |
|
30 | 30 | - Material Theme |
31 | 31 | - Prettier Now |
32 | 32 | - Bracket Pair Colorizer |
33 | 33 | - Live Server |
34 | 34 |
|
35 | | -While installing, removing, disabling, and enabling extensions, the button may change into a **Reload** button. Be sure to select it if applicable. |
| 35 | +While you install, remove, disable, and enable extensions, the button might change into a **Reload** button. Select it if applicable. |
36 | 36 |
|
37 | 37 | #### Material Theme |
38 | 38 |
|
39 | | -Just for fun, let's play around with this one a little bit. Once it's installed and ready, bring up the Color Themes (remember, there are many ways to get there, from pull-down menu sequences to keyboard shortcuts and the Welcome page). We use the direct shortcut Ctrl-K, Ctrl-T (Cmd-K, Cmd-T on macOS). Now use the up and down arrow keys to change the theme. You'll see the change immediately as you select new themes. Try out some of the Material Themes that now appear in the list to find one you like. Even if you don't select one you prefer now, if you're like many of us, you'll eventually enjoy a quick change to the color theme once in a while. Adding lots of choices can help you with this, so feel free to add more themes. |
| 39 | +Just for fun, let's play around with this extension slightly. Once it's installed and ready, bring up the Color Themes (remember, there are many ways to get there, from pull-down menu sequences to keyboard shortcuts and the Welcome page). We use the direct shortcut Ctrl-K, Ctrl-T (Cmd-K, Cmd-T on macOS). Now use the up and down arrow keys to change the theme. You can see the change immediately as you select new themes. Try out some of the Material Themes that appear in the list to find one you like. Even if you don't select one you prefer now, if you're like many of us, you enjoy a quick change to the color theme on occasion. Adding lots of choices can help you with this change, so feel free to add more themes. |
40 | 40 |
|
41 | 41 | This extension is here to illustrate customization features. You can safely remove or disable it if you don't like it. |
42 | 42 |
|
43 | 43 | #### Prettier Now |
44 | 44 |
|
45 | | -This extension is a *beautifier*. In case you aren't already aware, this term refers to an editor's ability to format your code automatically using certain rules the designer has decided work well for the type of code you're' working with, so it can be a subtle but powerful tool to use. There are many beautifiers available in the Extensions Marketplace, but this one has a lot of options and is easy to use. |
| 45 | +This extension is a *beautifier*. This term refers to an editor's ability to format your code automatically by using certain rules that the designer thinks work well for the type of code you working with. It can be a subtle but powerful tool to use. There are many beautifiers available in the Extensions Marketplace, but this one has many options and is easy to use. |
46 | 46 |
|
47 | 47 | Again, if you don't care for this extension, feel free to disable it or choose a different one. |
48 | 48 |
|
49 | 49 | #### Bracket Pair Colorizer |
50 | 50 |
|
51 | | -As with the beautifier and theme we installed, this is an extension that can help you code more efficiently with visual feedback, but isn't required for web development. However, this extension can truly save you a lot of time troubleshooting, and provide your eyes some relief. |
| 51 | +As with the beautifier and theme we installed, this extension can help you code more efficiently with visual feedback, but isn't required for web development. However, this extension can save you much time troubleshooting, and provide your eyes with some relief. |
52 | 52 |
|
53 | 53 | #### Live Server |
54 | 54 |
|
55 | | -This extension provides a local development server with a live reload feature for static and dynamic pages. This greatly eases web development by providing real-time updates to your content in a web browser. As with most extensions, there are other choices for this functionality in the Marketplace, but we'll use this one for now. |
| 55 | +This extension provides a local development server with a live reload feature for static and dynamic pages. It greatly eases web development by providing real-time updates to your content in a web browser. As with most extensions, there are other choices for this functionality in the marketplace, but we're going to use this one for now. |
56 | 56 |
|
57 | | -This is the only extension here that we'll be using in later units, and other modules might also direct you to install it or a similar extension. Next, we'll put together a simple web page and you'll see how this extension works. |
| 57 | +This extension is the only one here that we use in later units, and other modules might also direct you to install it or a similar extension. Next, we put together a simple web page and you can see how this extension works. |
0 commit comments