{"id":217,"date":"2026-04-16T04:03:44","date_gmt":"2026-04-16T04:03:44","guid":{"rendered":"https:\/\/sites.tntech.edu\/acrockett\/?p=217"},"modified":"2026-04-27T17:56:13","modified_gmt":"2026-04-27T17:56:13","slug":"vs-code-features-you-may-like","status":"publish","type":"post","link":"https:\/\/sites.tntech.edu\/acrockett\/2026\/04\/16\/vs-code-features-you-may-like\/","title":{"rendered":"VS Code Features You May Like"},"content":{"rendered":"\n<p>This list of features was compiled by the following people: April Crockett, Taseen Iqtider, Kelsey Rainey, and Caroline Dixon.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Color Themes<\/h1>\n\n\n\n<p>You can select a color theme for VS Code by opening the Color Theme picker with <strong>File<\/strong> &gt; <strong>Preferences<\/strong> &gt; <strong>Color Theme<\/strong>.<\/p>\n\n\n\n<p>You can also use the keyboard shortcut <strong><code><mark>Ctrl+T<\/mark><\/code><\/strong> to display the picker. <\/p>\n\n\n\n<p>Read more about Color Themes and download many more from the Extension Marketplace by visiting the Visual Studio Code website Themes page: <strong>&nbsp;<\/strong><a href=\"https:\/\/code.visualstudio.com\/docs\/getstarted\/themes\"><strong>https:\/\/code.visualstudio.com\/docs\/getstarted\/themes<\/strong><\/a><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">In Windows &#8211; Open VS Code in a Particular Directory<\/h1>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Open VS Code from File Directory\" width=\"1140\" height=\"855\" src=\"https:\/\/www.youtube.com\/embed\/zXzFiCnJwQs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\">Tab &amp; Reverse Tab a Chunk of Code<\/h1>\n\n\n\n<p>Highlighting more than one line of code at once then pressing the tab key indents the highlighted lines.<\/p>\n\n\n\n<p>To <strong>reverse-tab<\/strong> (or undo the indent), highlight the lines wanted to move and press <code><mark><strong>Shift + Tab<\/strong><\/mark><\/code>.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Comment Out (or Un-Comment Out) a Chunk of Code<\/h1>\n\n\n\n<p>Highlight all the code you want to comment out and press <strong><code><mark>Ctrl + \/<\/mark><\/code><\/strong>. This will comment it out.<\/p>\n\n\n\n<p>Want to un-comment it out? Then just press <strong><mark><code>Ctrl + \/ <\/code><\/mark><\/strong>again!<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Renaming Variables<\/h1>\n\n\n\n<p>If you need to change a certain variable name you can <strong>right click the variable name<\/strong> and in the menu that pops up, click &#8220;<strong><mark>rename symbol<\/mark><\/strong>&#8221; (or clicking <strong><mark>F2<\/mark><\/strong>). This will rename it, also anywhere its called in the code, and replace it with the new name.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Format Code into Pretty Code<\/h1>\n\n\n\n<p>It&#8217;s easy! To format your entire document with perfect indentions try the following:<br><br><strong>Windows:<\/strong>&nbsp;<code><mark><strong>Shift&nbsp;+&nbsp;Alt&nbsp;+&nbsp;F<\/strong><\/mark><\/code><br><strong>Mac:<\/strong> <code><mark><strong>Shift&nbsp;+&nbsp;Option&nbsp;+&nbsp;F<\/strong><\/mark><\/code><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Adding a Pop-Up Description to Variables, Functions, &amp; Classes<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Pop-Up Description for Variables<\/h2>\n\n\n\n<p>Adding a comment right after initializing a variable gets put as that variable&#8217;s description, which will appear whenever you hover over that variable. <br> <img decoding=\"async\" width=\"70%\" src=\"https:\/\/sites.tntech.edu\/acrockett\/wp-content\/uploads\/sites\/108\/2026\/04\/Screenshot-2026-04-27-121630-1024x573.png\" alt=\"hover over comment\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pop-Up Description for Functions<\/h2>\n\n\n\n<p>You can do the same thing for functions &#8211; add a comment above the function header or on the same line as the function header and that comment will appear whenever hovering over the function name in the function call statement. This even carries into other files you use the function in.<br><img loading=\"lazy\" decoding=\"async\" width=\"1194\" height=\"868\" class=\"wp-image-279\" style=\"width: 70%\" src=\"http:\/\/sites.tntech.edu\/acrockett\/wp-content\/uploads\/sites\/108\/2026\/04\/Screenshot-2026-04-27-123612.png\" alt=\"function popup description\" srcset=\"https:\/\/sites.tntech.edu\/acrockett\/wp-content\/uploads\/sites\/108\/2026\/04\/Screenshot-2026-04-27-123612.png 1194w, https:\/\/sites.tntech.edu\/acrockett\/wp-content\/uploads\/sites\/108\/2026\/04\/Screenshot-2026-04-27-123612-300x218.png 300w, https:\/\/sites.tntech.edu\/acrockett\/wp-content\/uploads\/sites\/108\/2026\/04\/Screenshot-2026-04-27-123612-1024x744.png 1024w, https:\/\/sites.tntech.edu\/acrockett\/wp-content\/uploads\/sites\/108\/2026\/04\/Screenshot-2026-04-27-123612-768x558.png 768w\" sizes=\"auto, (max-width: 1194px) 100vw, 1194px\" \/><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pop-Up Description for Classes<\/h2>\n\n\n\n<p>You can do the same thing for a class. All you have to do is add a comment above the class or on the same line as where you define the class.<br><img loading=\"lazy\" decoding=\"async\" width=\"1906\" height=\"480\" class=\"wp-image-280\" style=\"width: 90%\" src=\"http:\/\/sites.tntech.edu\/acrockett\/wp-content\/uploads\/sites\/108\/2026\/04\/Screenshot-2026-04-27-124043.png\" alt=\"popup description for a class\" srcset=\"https:\/\/sites.tntech.edu\/acrockett\/wp-content\/uploads\/sites\/108\/2026\/04\/Screenshot-2026-04-27-124043.png 1906w, https:\/\/sites.tntech.edu\/acrockett\/wp-content\/uploads\/sites\/108\/2026\/04\/Screenshot-2026-04-27-124043-300x76.png 300w, https:\/\/sites.tntech.edu\/acrockett\/wp-content\/uploads\/sites\/108\/2026\/04\/Screenshot-2026-04-27-124043-1024x258.png 1024w, https:\/\/sites.tntech.edu\/acrockett\/wp-content\/uploads\/sites\/108\/2026\/04\/Screenshot-2026-04-27-124043-768x193.png 768w, https:\/\/sites.tntech.edu\/acrockett\/wp-content\/uploads\/sites\/108\/2026\/04\/Screenshot-2026-04-27-124043-1536x387.png 1536w\" sizes=\"auto, (max-width: 1906px) 100vw, 1906px\" \/><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Extensions &#8211; Have Fun Debugging Your Code<\/h1>\n\n\n\n<p>Try out the extension <strong>FAAH error alert<\/strong> or <strong>Incredibly&nbsp;In&nbsp;Your Face<\/strong>.<br><img decoding=\"async\" src=\"http:\/\/sites.tntech.edu\/acrockett\/wp-content\/uploads\/sites\/108\/2026\/04\/faah-error-alerts.png\" alt=\"faah error alerts\"><br><br><img decoding=\"async\" src=\"http:\/\/sites.tntech.edu\/acrockett\/wp-content\/uploads\/sites\/108\/2026\/04\/incredibly-in-your-face.png\" alt=\"incredibly in your face\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This list of features was compiled by the following people: April Crockett, Taseen Iqtider, Kelsey Rainey, and Caroline Dixon. Color Themes You can select a color theme for VS Code by opening the Color Theme picker with File &gt; Preferences &gt; Color Theme. You can also use the keyboard shortcut Ctrl+T to display the picker. [&hellip;]<\/p>\n","protected":false},"author":119,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[24,25,18,27,28,23],"class_list":{"0":"post-217","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-c","7":"tag-24","8":"tag-25","9":"tag-c","10":"tag-color-themes","11":"tag-formatting-code","12":"tag-setting-up-computer","13":"czr-hentry"},"_links":{"self":[{"href":"https:\/\/sites.tntech.edu\/acrockett\/wp-json\/wp\/v2\/posts\/217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.tntech.edu\/acrockett\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.tntech.edu\/acrockett\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.tntech.edu\/acrockett\/wp-json\/wp\/v2\/users\/119"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.tntech.edu\/acrockett\/wp-json\/wp\/v2\/comments?post=217"}],"version-history":[{"count":7,"href":"https:\/\/sites.tntech.edu\/acrockett\/wp-json\/wp\/v2\/posts\/217\/revisions"}],"predecessor-version":[{"id":290,"href":"https:\/\/sites.tntech.edu\/acrockett\/wp-json\/wp\/v2\/posts\/217\/revisions\/290"}],"wp:attachment":[{"href":"https:\/\/sites.tntech.edu\/acrockett\/wp-json\/wp\/v2\/media?parent=217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.tntech.edu\/acrockett\/wp-json\/wp\/v2\/categories?post=217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.tntech.edu\/acrockett\/wp-json\/wp\/v2\/tags?post=217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}