{"id":11246,"date":"2019-12-06T00:00:00","date_gmt":"2019-12-06T00:00:00","guid":{"rendered":"https:\/\/binus.ac.id\/binus-digital\/2019\/12\/06\/7-visual-studio-code-extension-yang-berguna-untuk-para-frontend-developer\/"},"modified":"2024-09-24T02:20:24","modified_gmt":"2024-09-24T02:20:24","slug":"7-visual-studio-code-extension-yang-berguna-untuk-para-frontend-developer","status":"publish","type":"post","link":"https:\/\/binus.ac.id\/binus-digital\/2019\/12\/06\/7-visual-studio-code-extension-yang-berguna-untuk-para-frontend-developer\/","title":{"rendered":"7 Visual Studio Code Extension Yang Berguna Untuk Para Frontend Developer"},"content":{"rendered":"<p><span class=\"tlid-translation translation\" lang=\"id\"><span class=\"\" title=\"\">VS Code memiliki marketplace, dan berisi kumpulan plugin yang dapat diinstal ke teks editor untuk membuatnya lebih powerfull.<\/span> <span class=\"\" title=\"\">Kita dapat membuka marketplace dengan memilih opsi Ekstensi di menu Tampilan atau cukup tekan <strong>shift + cmd + X.<\/strong><\/span><\/span><\/p>\n<p>Berikut 7 ekstensi yang dapat membantu kamu para Frontend Developer.<\/p>\n<p><strong>01. Live Server<\/strong><br \/>\n<span class=\"tlid-translation translation\" lang=\"id\"><span class=\"\" title=\"\">Ini memungkinkan kamu untuk memuat ulang halaman web secara otomatis ketika kamu mengubah kode di VS Code.<br \/>\n<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ritwickdey.LiveServer\">https:\/\/marketplace.visualstudio.com\/items?itemName=ritwickdey.LiveServer<\/a><br \/>\n<\/span><\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-5956\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2019\/12\/1CfYU3dAoc-39eAJf2hgb3A-768x411.gif\" alt=\"\" width=\"768\" height=\"411\" \/><\/p>\n<p><span class=\"tlid-translation translation\" lang=\"id\"><span title=\"\">Setelah Live Server diinstal, kamu dapat mengklik kanan pada file html dan kamu dapat melihat opsi Buka dengan <strong>Live Server [Alt + L + Q].<\/strong><\/span><\/span><\/p>\n<p><strong>02. Quokka.js<br \/>\n<\/strong><span class=\"tlid-translation translation\" lang=\"id\"><span class=\"\" title=\"\">Quokka.js akan secara otomatis menghitung hasil yang kamu ketikkan dan mencetak hasilnya di IDE itu sendiri.<br \/>\n<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=WallabyJs.quokka-vscode\">https:\/\/marketplace.visualstudio.com\/items?itemName=WallabyJs.quokka-vscode<\/a><\/span><\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-5957\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2019\/12\/1dkNlYDjAqjnHVrZSWqG1kA-768x480.gif\" alt=\"\" width=\"768\" height=\"480\" \/><\/p>\n<p><strong>03. Code Spell Checker<\/strong><br \/>\n<span class=\"tlid-translation translation\" lang=\"id\"><span class=\"\" title=\"\">Pemeriksa ejaan ini akan melaporkan beberapa kesalahan ejaan umum.<\/span> <span class=\"\" title=\"\">Ini berfungsi baik dengan kode camelCase.<br \/>\n<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=streetsidesoftware.code-spell-checker\">https:\/\/marketplace.visualstudio.com\/items?itemName=streetsidesoftware.code-spell-checker<\/a><\/span><\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5963\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2019\/12\/13tgHzDUWembdB022yWutug.gif\" alt=\"\" width=\"745\" height=\"539\" \/><\/p>\n<p><strong>04. GitLens<\/strong><br \/>\n<span class=\"tlid-translation translation\" lang=\"id\"><span class=\"\" title=\"\">GitLens menambah kemampuan Git dibangun ke dalam Visual Studio Code.<\/span> <span class=\"\" title=\"\">Ini membantu Anda untuk memvisualisasikan kepengarangan kode sekilas melalui anotasi menyalahkan Git.<\/span> Tanpa hambatan untuk<span class=\"\" title=\"\"> menavigasi dan mengeksplorasi repositori Git, mendapatkan wawasan berharga melalui perintah perbandingan yang kuat, dan banyak lagi.<br \/>\n<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=eamodio.gitlens\">https:\/\/marketplace.visualstudio.com\/items?itemName=eamodio.gitlens<\/a><\/span><\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium\" src=\"https:\/\/miro.medium.com\/max\/727\/1*DS2aWPI70ydDx4WHkkiJVQ.gif\" width=\"727\" height=\"600\" \/><\/p>\n<p><strong>05. Prettier (Code Formatter)<\/strong><br \/>\n<span class=\"tlid-translation translation\" lang=\"id\"><span class=\"\" title=\"\">Prettier adalah penata format kode.<\/span> Prettier mendorong<span class=\"\" title=\"\"> gaya penulisan kode yang konsisten dengan mem-parsing kode kamu dan mencetaknya kembali dengan aturannya sendiri.<\/span> <span class=\"\" title=\"\">Ini adalah alat penting yang memungkinkan kamu untuk mencapai kode yang diformat dengan benar tanpa upaya dari pengembang.<\/span> <span class=\"\" title=\"\">Prettier hadir dengan default yang masuk akal, tetapi Anda juga dapat memberikan file konfigurasi di root proyek untuk menetapkan standar kamu sendiri, seperti panjang garis, jumlah tab \/ spasi, dan banyak lagi.<br \/>\n<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=esbenp.prettier-vscode\">https:\/\/marketplace.visualstudio.com\/items?itemName=esbenp.prettier-vscode<\/a><br \/>\n<\/span><\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-5969\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2019\/12\/1MMZW_gj10FYM_5LjllbYUQ-768x325.png\" alt=\"\" width=\"768\" height=\"325\" \/><\/p>\n<p><strong>06. ESLint<\/strong><br \/>\n<span class=\"tlid-translation translation\" lang=\"id\"><span class=\"\" title=\"\">ESLint adalah alat analisis kode statis untuk mengidentifikasi pola bermasalah yang ditemukan dalam kode JavaScript.<\/span> <span class=\"\" title=\"\">Aturan dalam ESLint dapat dikonfigurasi, dan aturan khusus dapat ditentukan dan dimuat.<\/span> <span class=\"\" title=\"\">ESLint mencakup kualitas kode dan masalah gaya pengkodean.<br \/>\n<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dbaeumer.vscode-eslint\">https:\/\/marketplace.visualstudio.com\/items?itemName=dbaeumer.vscode-eslint<\/a><br \/>\n<\/span><\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-5972\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2019\/12\/1QlHjt8KztbbbjyIfyh2gAQ-768x432.jpeg\" alt=\"\" width=\"768\" height=\"432\" \/><\/p>\n<p><strong>07. VSCode Icons<\/strong><br \/>\n<span class=\"tlid-translation translation\" lang=\"id\"><span title=\"\">Ini akan memberikan ikon di sebelah nama file dalam tampilan hierarki berdasarkan ekstensi file.<\/span> <span class=\"\" title=\"\">Ini membuatnya lebih mudah untuk mengidentifikasi file Anda secara sekilas.<br \/>\n<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=vscode-icons-team.vscode-icons\">https:\/\/marketplace.visualstudio.com\/items?itemName=vscode-icons-team.vscode-icons<\/a><\/span><\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium\" src=\"https:\/\/miro.medium.com\/max\/800\/1*69vby7KoGBO5D6XDs2vdIg.gif\" width=\"800\" height=\"600\" \/><\/p>\n<p>Translate dari:<br \/>\n<a href=\"https:\/\/levelup.gitconnected.com\/15-vs-code-extension-to-save-your-time-and-make-you-a-better-developer-506f79baec53\">https:\/\/levelup.gitconnected.com\/15-vs-code-extension-to-save-your-time-and-make-you-a-better-developer-506f79baec53<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>VS Code memiliki marketplace, dan berisi kumpulan plugin yang dapat diinstal ke teks editor untuk membuatnya lebih powerfull. Kita dapat membuka marketplace dengan memilih opsi Ekstensi di menu Tampilan atau cukup tekan shift + cmd + X. Berikut 7 ekstensi yang dapat membantu kamu para Frontend Developer. 01. Live Server Ini memungkinkan kamu untuk memuat [&hellip;]<\/p>\n","protected":false},"author":20,"featured_media":11247,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77],"tags":[],"class_list":["post-11246","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/comments?post=11246"}],"version-history":[{"count":1,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11246\/revisions"}],"predecessor-version":[{"id":11923,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11246\/revisions\/11923"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media\/11247"}],"wp:attachment":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media?parent=11246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/categories?post=11246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/tags?post=11246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}