{"id":6129,"date":"2020-04-11T11:03:30","date_gmt":"2020-04-11T11:03:30","guid":{"rendered":"https:\/\/max-drake.cc\/?p=6129"},"modified":"2020-04-11T11:03:34","modified_gmt":"2020-04-11T11:03:34","slug":"visual-studio-code-live-server-extension-web-page-building","status":"publish","type":"post","link":"https:\/\/max-drake.cc\/?p=6129","title":{"rendered":"Visual Studio CODE, Live Server Extension &#038; web page building"},"content":{"rendered":"\n<p>This is definitely worth my time. Up until now I&#8217;ve been using Notepad++ to do my code editing, and after adding code, I have to save file, go across to browser and refresh page to see the updates, so I&#8217;m constantly jumping between programmes. Quite distracting. <\/p>\n\n\n\n<p>The video below shows you how the Live Server extension works within VS Code:<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Live Server Extension in Visual Studio Code - Automatically Reload Your Site on Save!\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/WzE0yqwbdgU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>I was finding it buggy at the beginning so rebooted after installing VS Code, it seems to work fine. After you have code on the page you right clickin the code area and choose &#8220;Open with Live Server&#8221; which then opens a tab in the browser running a local server instance. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"663\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-11-13_39_24-Mozilla-Firefox-1024x663.jpg\" alt=\"\" class=\"wp-image-6131 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-11-13_39_24-Mozilla-Firefox-1024x663.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-11-13_39_24-Mozilla-Firefox-300x194.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-11-13_39_24-Mozilla-Firefox-768x497.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-11-13_39_24-Mozilla-Firefox-1536x994.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-11-13_39_24-Mozilla-Firefox-2048x1325.jpg 2048w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-11-13_39_24-Mozilla-Firefox-50x32.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-11-13_39_24-Mozilla-Firefox-77x50.jpg 77w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-11-13_39_24-Mozilla-Firefox-100x65.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-11-13_39_24-Mozilla-Firefox-155x100.jpg 155w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-11-13_39_24-Mozilla-Firefox-989x640.jpg 989w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-11-13_39_24-Mozilla-Firefox-640x414.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-11-13_39_24-Mozilla-Firefox-1187x768.jpg 1187w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-11-13_39_24-Mozilla-Firefox-1669x1080.jpg 1669w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-11-13_39_24-Mozilla-Firefox-1920x1243.jpg 1920w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/663;\" \/><\/figure>\n\n\n\n<p>So a good way to quickly see updates rendered, especially when you have screen split between code and browser as per image above.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">End comment<\/h3>\n\n\n\n<p>I&#8217;m still getting the hang of VS Code. One thing I do like is the <strong><span style=\"color:#cf2e2e\" class=\"color\">emmet <\/span><\/strong>code that does an autocomplete if you are using HTML tags, so if you write<strong> &lt;p&gt;<\/strong> it will automaticlly create the closing tag <strong>&lt;\/p&gt; <\/strong>for you. That speeds things up.  For some code editors you need to add emmet on as an add-in but its inbuilt inside VS Code. <\/p>\n\n\n\n<p>It doesn&#8217;t make my code writing any better, but quicker to follow errors. <\/p>\n\n\n\n<p>I did a video on my map development and using VS Code here:<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Covid charts from API data, Postman, JS fetch, JS Template literals &amp; VS Code with Live Server extn\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/vXhL9iIw2z4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This is definitely worth my time. Up until now I&#8217;ve been using Notepad++ to do my code editing, and after adding code, I have to save file, go across to browser and refresh page to see the updates, so I&#8217;m constantly jumping between programmes. Quite distracting. The video below shows you how the Live Server [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6131,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-6129","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web"],"featured_image_src":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-11-13_39_24-Mozilla-Firefox.jpg","featured_image_src_square":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-11-13_39_24-Mozilla-Firefox.jpg","author_info":{"display_name":"Max Drake","author_link":"https:\/\/max-drake.cc\/?author=1"},"_links":{"self":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6129"}],"version-history":[{"count":0,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6129\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/media\/6131"}],"wp:attachment":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}