{"id":1196,"date":"2020-01-28T13:46:38","date_gmt":"2020-01-28T18:46:38","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=1196"},"modified":"2022-02-10T02:42:56","modified_gmt":"2022-02-10T02:42:56","slug":"vsc-field-notes","status":"publish","type":"page","link":"https:\/\/nmi.cool\/web\/vsc-field-notes\/","title":{"rendered":"Visual Studio Code Field Notes"},"content":{"rendered":"\n
\"\"\/
Photo by Kari Shea<\/a>.<\/figcaption><\/figure>\n\n\n\n

Visual Studio Code is the code editor<\/strong> we use this for the course. Simply put, a code editor is a program to write code easily and efficiently. <\/p>\n\n\n\n

Text Editor Tour<\/h2>\n\n\n\n

Activity Bar<\/h3>\n\n\n\n

The dark gray tool bar to the left of the VSC interface is the Activity Bar. The Activity Bar contains the main features of VSC.<\/p>\n\n\n\n

\"Activity<\/figure>
\n

The Activity Bar features:
1. Explorer
2. Search
3. Source Control
4. Debug and Run
5. Extensions<\/p>\n<\/div><\/div>\n\n\n\n

1. Explorer<\/h4>\n\n\n\n

Explorer, the option highlighted in the image above with the icon of two pages, is where you’ll spend the majority of your time. It’s how you navigate to all your projects.<\/p>\n\n\n\n

The best way <\/strong>to see all your files for this class is to select File > Open<\/strong>, and browse to whichever folder you’re working on (usually production, or project-one, project-two, and so on). Next to the Activity Bar, you’ll be able to see all you files that live in that folder. It’s a quick and easy way to jump between all your files and see how they’re stored in relation to each other.<\/p>\n\n\n\n

2. Search<\/h4>\n\n\n\n

The magnifying glass enables you to search and replace in your code.<\/p>\n\n\n\n

3. Source Control<\/h4>\n\n\n\n

Source control, also called version control, is used by teams to keep track of changes to code. This is a little bit beyond the scope of this course, but if you’re curious, you can read more about s<\/a>ource control.<\/a><\/p>\n\n\n\n

If you’d like to hide <\/strong>Source Control, right click on the icon and uncheck it. <\/p>\n\n\n\n

4. Debug and Run<\/h4>\n\n\n\n

The cute bug with the X<\/code> is the debugging tool. Debugging tools help you find errors (bugs) in advanced programming languages such as JavaScript. Squish all the bugs! <\/p>\n\n\n\n

5. Extensions<\/h4>\n\n\n\n

Last, but certainly not least, extensions are a way to add different tools and features to VSC. More on that later ?<\/p>\n\n\n\n

Editor<\/h2>\n\n\n\n
\"\"\/
Photo by Visual Studio Code<\/a>.<\/figcaption><\/figure>\n\n\n\n

The editor refers to everything to the right of the explorer. It\u2019s the workspace where you edit your code. Some might even call it, the visual studio <\/em>we use to examine our code. <\/em><\/p>\n\n\n\n

In the image above, you’re seeing editor Inception\u2014editors on top of other editors! 1<\/a><\/p>\n\n\n\n

While it’s unlikely you’ll need that many tabs open in the editor, you may want to open a few at a time. If you take a peek to the right of the tabs, next to the ellipsis, you’ll see an icon that looks like two columns. This is the split editor, used to open multiple tabs next to each other. Or, you toggle split editor with the shortcut: \u2318\\<\/code> .<\/p>\n\n\n\n

\"The
The split editor icon is circled. Select this icon to toggle editor tabs.<\/figcaption><\/figure><\/div>\n\n\n\n

Zen Mode <\/h4>\n\n\n\n

Need some zen in your code? Want to focus on what matters?<\/p>\n\n\n\n

Zen Mode hides the entire interface of VSC except <\/strong>the editor. Toggle it by the shortcut, \u2318K Z<\/code>, or selecting View > Appearance > Zen Mode. Goodbye, distractions, hello, productivity! <\/p>\n\n\n\n

Minimap<\/h4>\n\n\n\n
\"Visual
Photo by Visual Studio Code<\/a>.<\/figcaption><\/figure>\n\n\n\n

The minimap (the teeny, tiny map on the right) is a bird’s eye view of your file. When your file gets lengthy, the minimap can be helpful to jump to sections of your file. If it annoys you, you can uncheck the minimap box in settings. Speaking of settings… <\/p>\n\n\n\n

Settings<\/h2>\n\n\n\n

If there’s a feature in VSC, there’s a setting for it as well. <\/p>\n\n\n\n

1. Line wrapping<\/h4>\n\n\n\n

If you’ve ever tried to copy and paste say, a paragraph of dummy text into VSC (Visual Studio Code) 2<\/a> you may have noticed that by default, VSC does not <\/strong>wrap words. Meaning, you have to scroll over and over and over to the side. This is where word wrapping comes in.<\/p>\n\n\n\n

\"\"<\/figure>
\n

Paragraph without <\/strong>word wrapping.<\/p>\n<\/div><\/div>\n\n\n\n

\"\"<\/figure>
\n

Paragraph with<\/strong> word wrapping.<\/p>\n<\/div><\/div>\n\n\n\n

Let’s add that beautiful word wrapping. In the menu bar of VSC, select Code > Preferences > Settings<\/strong>. <\/p>\n\n\n\n

\"In
Navigate to Visual Studio Code Settings<\/figcaption><\/figure>\n\n\n\n

Scroll down on “Commonly Used” settings until you come to Editor: Word Wrap. By default, this setting is turned off. Turn it on<\/strong>, as shown below. <\/p>\n\n\n\n

There’s no need to save\u2014Visual Studio Code will save your new setting automatically.<\/p>\n\n\n\n

\"Editor:<\/figure>\n\n\n\n

Note: <\/strong>This setting is specific to VSC. It only applies to what you see in VSC. It will not <\/strong>appear like this in the browser. To format your code as the user will see it, refer to CSS. <\/p>\n\n\n\n

2. Appearance <\/h4>\n\n\n\n

VSC has a variety of options to change the appearance of the editor. You can adjust colors, fonts, and type size as you prefer. <\/p>\n\n\n\n

In the example below, under Settings, the Color Theme has been changed to Default Light+. Feel free to change the appearance to whatever color choice is easiest on your eyes.<\/p>\n\n\n\n

\"In<\/figure>\n\n\n\n

3. Image preview<\/h4>\n\n\n\n

This setting is already turned on for you, but it’s worth expressing gratitude towards it. When you hover over an image source’s file path, a preview of the image will be displayed. This is a good way to check <\/strong>your image file paths. <\/p>\n\n\n\n

If you hover over an image file path, and do not <\/strong>see a small preview of your image appear, you may have taken the file path less travelled. Double-check your image name and file path, and fix your file path.<\/p>\n\n\n\n

\"In
When you hover over an image file, you’ll be able to see a preview of that image.<\/figcaption><\/figure>\n\n\n\n

4. File path autocomplete<\/h4>\n\n\n\n
\"\"\/
Gif by Path Intellisense<\/a>. <\/figcaption><\/figure><\/div>\n\n\n\n

When you start to type in a link to a file, or start to insert an image, Visual Studio Code will autocomplete your file paths if you have a folder open.<\/p>\n\n\n\n

Once you have opened a folder (most likely your production folder) type in <img src=\"<\/code> or <a href=\"<\/code>, and then hit control and space bar<\/strong> to be greeted by a list of all of your files and folders. You’ll be able to select the files of your choice. <\/p>\n\n\n\n

Extensions<\/h2>\n\n\n\n

The extension marketplace<\/strong> can take VSC to infinity and beyond. <\/p>\n\n\n\n

1. File icons<\/h4>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

Material Icon Theme<\/a><\/strong> is one of many free extensions you can use to change the default shapes of your files. With this extension, your explorer will change your files and folders to look like intuitive icons.<\/p>\n\n\n\n

Once you’ve installed Material Icon Theme, navigate to Settings. Type in >file icon<\/code> in the search bar. You’ll see this option:<\/p>\n\n\n\n

\u2699\ufe0e Workbench: Icon Theme<\/strong>
Specifies the icon theme used in the workbench or ‘null’ to not show any file icons. <\/p>\n\n\n\n

Change the option in the dropdown to material-icon-theme<\/code>.<\/p>\n\n\n\n

Collaboration makes the dream work<\/h3>\n\n\n\n

Come across a cool trick, keyboard shortcut, or another tip you want to share? Post them in your class channel on Slack and you might see them appear on this page. <\/p>\n

  1. If you’re going to perform inception, you need imagination. If you\u2019re going to perform edit-ception, you’ll need split editor. ↩<\/a><\/p><\/li>

  2. Lorem ipsum dolor sit amet , anyone? ↩<\/a><\/p><\/li><\/ol><\/div>","protected":false},"excerpt":{"rendered":"

    Visual Studio Code is the code editor we use this for the course. Simply put, a code editor is a program to write code easily and efficiently. Text Editor Tour Activity Bar The dark gray tool bar to the left of the VSC interface is the Activity Bar. The Activity Bar contains the main features … Continue reading Visual Studio Code Field Notes<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1196","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/1196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/comments?post=1196"}],"version-history":[{"count":3,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/1196\/revisions"}],"predecessor-version":[{"id":3420,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/1196\/revisions\/3420"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/media?parent=1196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}