{"id":429,"date":"2023-08-16T13:42:36","date_gmt":"2023-08-16T12:42:36","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/?page_id=429"},"modified":"2023-08-16T15:09:28","modified_gmt":"2023-08-16T14:09:28","slug":"vscode","status":"publish","type":"page","link":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/vscode\/","title":{"rendered":"VSCode"},"content":{"rendered":"<p>VS Code is a great editor for developing programs and websites.\u00a0Changing some settings, and installing some extensions, makes it even better.<\/p>\n<h1>Opening Folders<\/h1>\n<p><em>Note: VS Code works best by opening folders rather than specific files.<\/em><\/p>\n<p>Either:<\/p>\n<ul>\n<li>Use Windows Explorer<\/li>\n<li>Right-Click on folder<\/li>\n<li>Select Open with Code<\/li>\n<\/ul>\n<p>or<\/p>\n<ul>\n<li>Open VS Code<\/li>\n<li>Open File Menu and select Open folder (ctrl+K then ctrl+O)<\/li>\n<\/ul>\n<h1>Colour Scheme<\/h1>\n<p>Prefer a dark background or light. Your choice:<\/p>\n<ul>\n<li><strong>ctrl + k<\/strong> then\u00a0<strong>ctrl + t<\/strong><\/li>\n<\/ul>\n<h1>AutoFormat on Save<\/h1>\n<p>Keep your code tidy by letting VSCode sort out all the indentation for you.<\/p>\n<ul>\n<li>Press <strong>ctrl + comma<\/strong><\/li>\n<li>Type &#8220;<strong>save<\/strong>&#8220;<\/li>\n<li>Tick the &#8220;<strong>Editor: Format on Save<\/strong>&#8221; option<\/li>\n<\/ul>\n<h1>Mouse Zoom<\/h1>\n<p>Many programs let you zoom in\/out by holding down the ctrl key and scrolling the mouse wheel. So can VSCode:<\/p>\n<ul>\n<li>Press <strong>ctrl + comma<\/strong><\/li>\n<li>Type &#8220;<strong>zoom<\/strong>&#8220;<\/li>\n<li>Tick the &#8220;<strong>Editor: Mouse Wheel Zoom<\/strong>&#8221; option<\/li>\n<\/ul>\n<h1><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-442 size-full\" src=\"https:\/\/blogs.glowscotland.org.uk\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2023\/08\/16150247\/vscode-extensions.png\" alt=\"\" width=\"46\" height=\"45\" \/>Extensions<\/h1>\n<h2>Material Icon Theme<\/h2>\n<p>Replaces the icons in the file explorer:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-440 size-full\" src=\"https:\/\/blogs.glowscotland.org.uk\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2023\/08\/16150241\/vscode-material-icon-theme-2.png\" alt=\"\" width=\"293\" height=\"308\" srcset=\"https:\/\/blogs.glowscotland.org.uk\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2023\/08\/16150241\/vscode-material-icon-theme-2.png 293w, https:\/\/blogs.glowscotland.org.uk\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2023\/08\/16150241\/vscode-material-icon-theme-2-285x300.png 285w, https:\/\/blogs.glowscotland.org.uk\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2023\/08\/16150241\/vscode-material-icon-theme-2-50x52.png 50w\" sizes=\"auto, (max-width: 293px) 100vw, 293px\" \/><\/p>\n<h2>Blockman<\/h2>\n<p>Draws an outline around the section of code that you are editing:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-441 size-full\" src=\"https:\/\/blogs.glowscotland.org.uk\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2023\/08\/16150244\/vscode-blockman.png\" alt=\"\" width=\"914\" height=\"123\" srcset=\"https:\/\/blogs.glowscotland.org.uk\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2023\/08\/16150244\/vscode-blockman.png 914w, https:\/\/blogs.glowscotland.org.uk\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2023\/08\/16150244\/vscode-blockman-300x40.png 300w, https:\/\/blogs.glowscotland.org.uk\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2023\/08\/16150244\/vscode-blockman-768x103.png 768w, https:\/\/blogs.glowscotland.org.uk\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2023\/08\/16150244\/vscode-blockman-800x108.png 800w\" sizes=\"auto, (max-width: 914px) 100vw, 914px\" \/><\/p>\n<h2>Live Preview<\/h2>\n<p>Instead of having to keep saving files and refreshing your browser, view your changes directly as you edit html and css.<\/p>\n<p>You can open a preview panel inside VSCode by using the magnifier button:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-437 size-full\" style=\"font-size: 1rem;margin-top: 0.857143rem;margin-bottom: 0.857143rem;margin-left: 1.71429rem\" src=\"https:\/\/blogs.glowscotland.org.uk\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2023\/08\/16150233\/vscode-live-preview-1.png\" alt=\"\" width=\"357\" height=\"97\" srcset=\"https:\/\/blogs.glowscotland.org.uk\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2023\/08\/16150233\/vscode-live-preview-1.png 357w, https:\/\/blogs.glowscotland.org.uk\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2023\/08\/16150233\/vscode-live-preview-1-300x82.png 300w\" sizes=\"auto, (max-width: 357px) 100vw, 357px\" \/><\/p>\n<p><em>Note that this is not a full browser (eg no external hyperlinks).<\/em><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-438 size-full\" src=\"https:\/\/blogs.glowscotland.org.uk\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2023\/08\/16150236\/vscode-live-preview-2.png\" alt=\"\" width=\"1260\" height=\"684\" srcset=\"https:\/\/blogs.glowscotland.org.uk\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2023\/08\/16150236\/vscode-live-preview-2.png 1260w, https:\/\/blogs.glowscotland.org.uk\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2023\/08\/16150236\/vscode-live-preview-2-300x163.png 300w, https:\/\/blogs.glowscotland.org.uk\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2023\/08\/16150236\/vscode-live-preview-2-1024x556.png 1024w, https:\/\/blogs.glowscotland.org.uk\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2023\/08\/16150236\/vscode-live-preview-2-768x417.png 768w, https:\/\/blogs.glowscotland.org.uk\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2023\/08\/16150236\/vscode-live-preview-2-800x434.png 800w\" sizes=\"auto, (max-width: 1260px) 100vw, 1260px\" \/><\/p>\n<p>Alternatively you can open a web browser (Edge) and go to <a href=\"http:\/\/127.0.0.1:3000\/\">http:\/\/127.0.0.1:3000\/<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>VS Code is a great editor for developing programs and websites.\u00a0Changing some settings, and installing some extensions, makes it even better. Opening Folders Note: VS Code works best by opening folders rather than specific files. Either: Use Windows Explorer Right-Click on folder Select Open with Code or Open VS Code Open File Menu and select Open folder (ctrl+K then ctrl+O) Colour Scheme Prefer a dark background or light. Your choice:<\/p>\n<p><a class=\"more-link\" href=\"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/vscode\/\">Read More<\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-429","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/comments?post=429"}],"version-history":[{"count":7,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/429\/revisions"}],"predecessor-version":[{"id":443,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/429\/revisions\/443"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/media?parent=429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}