{"id":4651,"date":"2024-03-15T13:52:04","date_gmt":"2024-03-15T06:52:04","guid":{"rendered":"https:\/\/binus.ac.id\/bekasi\/?p=4651"},"modified":"2024-03-15T13:52:04","modified_gmt":"2024-03-15T06:52:04","slug":"beberapa-vscode-extension-untuk-software-developer","status":"publish","type":"post","link":"https:\/\/binus.ac.id\/bekasi\/2024\/03\/beberapa-vscode-extension-untuk-software-developer\/","title":{"rendered":"Beberapa VSCode Extension Untuk Software Developer"},"content":{"rendered":"<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4652 aligncenter\" src=\"http:\/\/binus.ac.id\/bekasi\/wp-content\/uploads\/2024\/03\/1-640x426.png\" alt=\"\" width=\"582\" height=\"387\" srcset=\"https:\/\/binus.ac.id\/bekasi\/wp-content\/uploads\/2024\/03\/1-640x426.png 640w, https:\/\/binus.ac.id\/bekasi\/wp-content\/uploads\/2024\/03\/1-480x319.png 480w, https:\/\/binus.ac.id\/bekasi\/wp-content\/uploads\/2024\/03\/1-768x511.png 768w, https:\/\/binus.ac.id\/bekasi\/wp-content\/uploads\/2024\/03\/1.png 939w\" sizes=\"auto, (max-width: 582px) 100vw, 582px\" \/><span style=\"font-size: 10pt\">Figure 1. Close Up Photo of Programming of Codes (https:\/\/www.pexels.com\/)<\/span><\/p>\n<p>VSCode merupakan salah satu code editor yang paling banyak digunakan di dunia. VSCode memiliki beberapa keunggulan seperti ringan, update yang rutin dari Microsoft dan berbagai macam extension yang dapat digunakan. Dengan bantuan extension dapat meningkatkan efisiensi dan kecepetan developer dalam mengembangkan sebuah program. Berikut beberapa extension yang dapat digunakan dalam sebuah project yang dapat membantu:<\/p>\n<ol>\n<li>Auto Close Tag<\/li>\n<\/ol>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4653 aligncenter\" src=\"http:\/\/binus.ac.id\/bekasi\/wp-content\/uploads\/2024\/03\/2.png\" alt=\"\" width=\"379\" height=\"137\" \/><span style=\"font-size: 10pt\">Figure 2. Auto Close Tag (https:\/\/marketplace.visualstudio.com\/)<\/span><\/p>\n<p>Auto Close Tag dapat secara otomatis menutup semua macam tag yang ada dalam kodingan. Ekstensi ini terlihat simple tetapi dapat membantu dalam mengurangi bug karena kurangnya tag penutup. Ekstensi ini dapat digunakan pada HTML, XML, React dan <em>framework <\/em>lainnya.<\/p>\n<ol start=\"2\">\n<li>Auto Rename Tag<\/li>\n<\/ol>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4654 aligncenter\" src=\"http:\/\/binus.ac.id\/bekasi\/wp-content\/uploads\/2024\/03\/3.png\" alt=\"\" width=\"412\" height=\"279\" \/><span style=\"font-size: 10pt\">Figure 3. Auto rename tag (https:\/\/marketplace.visualstudio.com\/)<\/span><\/p>\n<p>Hampir mirip dengan ekstensi sebelumnya, ekstensi ini dapat secara otomatis mengganti nama tag sesuai dengan yang diketikkan.<\/p>\n<ol start=\"3\">\n<li>Github Copilot<\/li>\n<\/ol>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4655 aligncenter\" src=\"http:\/\/binus.ac.id\/bekasi\/wp-content\/uploads\/2024\/03\/4.png\" alt=\"\" width=\"400\" height=\"400\" \/><span style=\"font-size: 10pt\">Figure 4. Github Copilot (https:\/\/marketplace.visualstudio.com\/)<\/span><\/p>\n<p>Github Copilot adalah salah satu ekstensi VSCode yang sedang tren tahun ini. Ekstensi ini membuat saran kode dan fungsi secara realtime langsung di code editor dengan menggunakan OpenAI Codex. GitHub Copilot menghasilkan saran pengkodean dalam berbagai bahasa program hanya dengan menuliskan komentar atau nama metode pada baris kode. Github Copilot telah dilatih pada miliaran baris kode pada repository public github.<\/p>\n<ol start=\"4\">\n<li>GitLens<\/li>\n<\/ol>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4656 aligncenter\" src=\"http:\/\/binus.ac.id\/bekasi\/wp-content\/uploads\/2024\/03\/5.png\" alt=\"\" width=\"200\" height=\"200\" \/><span style=\"font-size: 10pt\">Figure 5. GitLens (https:\/\/marketplace.visualstudio.com\/)<\/span><\/p>\n<p>GitLens merupakan sebuah ekstensi untuk melacak dan memantau perubahan pada repository. Ekstensi ini memberikan informasi detail seperti:<\/p>\n<ul>\n<li>Bagian kode mana yang berubah dengan memberikan highlight<\/li>\n<li>Memberikan informasi kapan sebuah perubahan di <em>push<\/em><\/li>\n<li>Siapa yang melakukan <em>push <\/em>dan pesannya<\/li>\n<\/ul>\n<p>Hal ini dapat membantu <em>programmer <\/em>melacak perubahan yang dilakukan karena berbasis GUI.<\/p>\n<ol start=\"5\">\n<li>Prettier<\/li>\n<\/ol>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4657 aligncenter\" src=\"http:\/\/binus.ac.id\/bekasi\/wp-content\/uploads\/2024\/03\/6.png\" alt=\"\" width=\"200\" height=\"200\" \/><span style=\"font-size: 10pt\">Figure 6. Prettier (https:\/\/marketplace.visualstudio.com\/)<\/span><\/p>\n<p>Ekstensi yang membantu merapikan baris kode yang ditulis sehingga lebih mudah untuk dibaca. Prettier dapat digunakan pada berbagai macam bahasa pemrograman seperti HTML, CSS, JS dan masih banyak lainnya. Seperti namanya, Prettier merapikan kodingan dengan cara memberikan indentasi pada blok kode.<\/p>\n<ol start=\"6\">\n<li>Live Server<\/li>\n<\/ol>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4658 aligncenter\" src=\"http:\/\/binus.ac.id\/bekasi\/wp-content\/uploads\/2024\/03\/7.png\" alt=\"\" width=\"400\" height=\"400\" \/><span style=\"font-size: 10pt\">Figure 7. Live Server (https:\/\/marketplace.visualstudio.com\/)<\/span><\/p>\n<p>Ekstensi ini membuka project pada browser web default menggunakan port. Live Server akan otomatis memperbarui halaman browser pada saat kita menyimpan perubahan. Hal ini dapat melihat perubahan secara realtime sehingga dapat meningkatkan produktivitas. Di atas, adalah beberapa ekstensi yang dapat membantu seorang <em>software developer<\/em> dalam mengembangkan project. Dengan alat yang tepat, produktivitas dapat dicapai dalam pengembangan sebuah project sehingga dapat mempercepat waktu pengerjaan.<\/p>\n<p>&nbsp;<\/p>\n<p>Referensi:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.syncfusion.com\/blogs\/post\/15-best-visual-studio-code-extensions-for-web-developers-in-2021.aspx\">https:\/\/www.syncfusion.com\/blogs\/post\/15-best-visual-studio-code-extensions-for-web-developers-in-2021.aspx<\/a><\/li>\n<li><a href=\"https:\/\/blog.bitsrc.io\/top-10-visual-studio-code-extensions-for-web-developers-5bd6a76bdf5f\">https:\/\/blog.bitsrc.io\/top-10-visual-studio-code-extensions-for-web-developers-5bd6a76bdf5f<\/a><\/li>\n<li><a href=\"https:\/\/blog.openreplay.com\/top-visual-studio-code-extensions-for-developers-in-2022\">https:\/\/blog.openreplay.com\/top-visual-studio-code-extensions-for-developers-in-2022<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Figure 1. Close Up Photo of Programming of Codes (https:\/\/www.pexels.com\/) VSCode merupakan salah satu code editor yang paling banyak digunakan di dunia. VSCode memiliki beberapa keunggulan seperti ringan, update yang rutin dari Microsoft dan berbagai macam extension yang dapat digunakan. Dengan bantuan extension dapat meningkatkan efisiensi dan kecepetan developer dalam mengembangkan sebuah program. Berikut beberapa [&hellip;]<\/p>\n","protected":false},"author":19,"featured_media":4652,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[345],"tags":[],"class_list":["post-4651","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-computer-science-software-engineering"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v14.4.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Beberapa VSCode Extension Untuk Software Developer - BINUS @Bekasi - Kampus Beken Asyik | Business Service and Technology<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/binus.ac.id\/bekasi\/2024\/03\/beberapa-vscode-extension-untuk-software-developer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Beberapa VSCode Extension Untuk Software Developer - BINUS @Bekasi - Kampus Beken Asyik | Business Service and Technology\" \/>\n<meta property=\"og:description\" content=\"Figure 1. Close Up Photo of Programming of Codes (https:\/\/www.pexels.com\/) VSCode merupakan salah satu code editor yang paling banyak digunakan di dunia. VSCode memiliki beberapa keunggulan seperti ringan, update yang rutin dari Microsoft dan berbagai macam extension yang dapat digunakan. Dengan bantuan extension dapat meningkatkan efisiensi dan kecepetan developer dalam mengembangkan sebuah program. Berikut beberapa [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/binus.ac.id\/bekasi\/2024\/03\/beberapa-vscode-extension-untuk-software-developer\/\" \/>\n<meta property=\"og:site_name\" content=\"BINUS @Bekasi - Kampus Beken Asyik | Business Service and Technology\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T06:52:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/binus.ac.id\/bekasi\/wp-content\/uploads\/2024\/03\/1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"939\" \/>\n\t<meta property=\"og:image:height\" content=\"625\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/binus.ac.id\/bekasi\/#website\",\"url\":\"https:\/\/binus.ac.id\/bekasi\/\",\"name\":\"BINUS @Bekasi - Kampus Beken Asyik | Business Service and Technology\",\"description\":\"Binus kampus komunitas kreatif Bekasi dengan visi membangun universitas yang berkelas dunia di tahun 2020 mendatang, sebagai langkah menuju visi tersebut, BINA NUSANTARA kampus komunitas kreatif mengambil suatu langkah mantap untuk membuka jaringan pendidikan di Kota Bekasi.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/binus.ac.id\/bekasi\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/binus.ac.id\/bekasi\/2024\/03\/beberapa-vscode-extension-untuk-software-developer\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/binus.ac.id\/bekasi\/wp-content\/uploads\/2024\/03\/1.png\",\"width\":939,\"height\":625},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/binus.ac.id\/bekasi\/2024\/03\/beberapa-vscode-extension-untuk-software-developer\/#webpage\",\"url\":\"https:\/\/binus.ac.id\/bekasi\/2024\/03\/beberapa-vscode-extension-untuk-software-developer\/\",\"name\":\"Beberapa VSCode Extension Untuk Software Developer - BINUS @Bekasi - Kampus Beken Asyik | Business Service and Technology\",\"isPartOf\":{\"@id\":\"https:\/\/binus.ac.id\/bekasi\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/binus.ac.id\/bekasi\/2024\/03\/beberapa-vscode-extension-untuk-software-developer\/#primaryimage\"},\"datePublished\":\"2024-03-15T06:52:04+00:00\",\"dateModified\":\"2024-03-15T06:52:04+00:00\",\"author\":{\"@id\":\"https:\/\/binus.ac.id\/bekasi\/#\/schema\/person\/0093f9a535f53c255093cb9273f60a88\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/binus.ac.id\/bekasi\/2024\/03\/beberapa-vscode-extension-untuk-software-developer\/\"]}]},{\"@type\":[\"Person\"],\"@id\":\"https:\/\/binus.ac.id\/bekasi\/#\/schema\/person\/0093f9a535f53c255093cb9273f60a88\",\"name\":\"editorarticle\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/binus.ac.id\/bekasi\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cd7fa27148001ad24ed966c031d91645eee771a6f7fe3b565b46a75ad24f4df6?s=96&d=mm&r=g\",\"caption\":\"editorarticle\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/binus.ac.id\/bekasi\/wp-json\/wp\/v2\/posts\/4651","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/binus.ac.id\/bekasi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/binus.ac.id\/bekasi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/bekasi\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/bekasi\/wp-json\/wp\/v2\/comments?post=4651"}],"version-history":[{"count":1,"href":"https:\/\/binus.ac.id\/bekasi\/wp-json\/wp\/v2\/posts\/4651\/revisions"}],"predecessor-version":[{"id":4659,"href":"https:\/\/binus.ac.id\/bekasi\/wp-json\/wp\/v2\/posts\/4651\/revisions\/4659"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/bekasi\/wp-json\/wp\/v2\/media\/4652"}],"wp:attachment":[{"href":"https:\/\/binus.ac.id\/bekasi\/wp-json\/wp\/v2\/media?parent=4651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/binus.ac.id\/bekasi\/wp-json\/wp\/v2\/categories?post=4651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/binus.ac.id\/bekasi\/wp-json\/wp\/v2\/tags?post=4651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}