{"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:\/\/beta.binus.ac.id\/bekasi\/2024\/03\/15\/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\" \/><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\" srcset=\"https:\/\/beta.binus.ac.id\/bekasi\/wp-content\/uploads\/sites\/90\/2024\/03\/2.png 379w, https:\/\/beta.binus.ac.id\/bekasi\/wp-content\/uploads\/sites\/90\/2024\/03\/2-300x108.png 300w\" sizes=\"(max-width: 379px) 100vw, 379px\" \/><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\" srcset=\"https:\/\/beta.binus.ac.id\/bekasi\/wp-content\/uploads\/sites\/90\/2024\/03\/3.png 412w, https:\/\/beta.binus.ac.id\/bekasi\/wp-content\/uploads\/sites\/90\/2024\/03\/3-300x203.png 300w\" sizes=\"(max-width: 412px) 100vw, 412px\" \/><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\" srcset=\"https:\/\/beta.binus.ac.id\/bekasi\/wp-content\/uploads\/sites\/90\/2024\/03\/4.png 400w, https:\/\/beta.binus.ac.id\/bekasi\/wp-content\/uploads\/sites\/90\/2024\/03\/4-300x300.png 300w, https:\/\/beta.binus.ac.id\/bekasi\/wp-content\/uploads\/sites\/90\/2024\/03\/4-150x150.png 150w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><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\" srcset=\"https:\/\/beta.binus.ac.id\/bekasi\/wp-content\/uploads\/sites\/90\/2024\/03\/5.png 200w, https:\/\/beta.binus.ac.id\/bekasi\/wp-content\/uploads\/sites\/90\/2024\/03\/5-150x150.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><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\" srcset=\"https:\/\/beta.binus.ac.id\/bekasi\/wp-content\/uploads\/sites\/90\/2024\/03\/6.png 200w, https:\/\/beta.binus.ac.id\/bekasi\/wp-content\/uploads\/sites\/90\/2024\/03\/6-150x150.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><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\" srcset=\"https:\/\/beta.binus.ac.id\/bekasi\/wp-content\/uploads\/sites\/90\/2024\/03\/7.png 400w, https:\/\/beta.binus.ac.id\/bekasi\/wp-content\/uploads\/sites\/90\/2024\/03\/7-300x300.png 300w, https:\/\/beta.binus.ac.id\/bekasi\/wp-content\/uploads\/sites\/90\/2024\/03\/7-150x150.png 150w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><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":1,"featured_media":4652,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-4651","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-computer-science-software-engineering"],"_links":{"self":[{"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/posts\/4651"}],"collection":[{"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/comments?post=4651"}],"version-history":[{"count":0,"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/posts\/4651\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/media\/4652"}],"wp:attachment":[{"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/media?parent=4651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/categories?post=4651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/tags?post=4651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}