{"id":455,"date":"2022-10-29T07:11:39","date_gmt":"2022-10-29T07:11:39","guid":{"rendered":"http:\/\/kelaskosong.site\/?p=455"},"modified":"2022-10-29T07:18:39","modified_gmt":"2022-10-29T07:18:39","slug":"gak-perlu-repot-instal-15-extension-vs-code-ini-agar-kamu-menjadi-frontend-developer-yang-lebih-baik","status":"publish","type":"post","link":"https:\/\/kelaskosong.my.id\/?p=455","title":{"rendered":"Gak Perlu Repot, Instal 15 Extension VS Code Ini Agar  Kamu Menjadi Frontend Developer yang Lebih Baik"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Hallo Teman Sekelas!<\/strong>\u00a0Kali ini kita akan membahas 15 ekstensi pada VS Code yang sangat berguna untuk para Frontend Developer. Oke, langsung saja kita bahas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Seperti yang kita ketahui bahwa VS Code memiliki marketplacenya sendiri dan berisi kumpulan plugin yang dapat diinstal ke text editor untuk membuatnya menjadi lebih powerfull. Kita dapat membuka marketplace dengan memilih&nbsp;<code>Pengaturan Ekstensi di dalam menu<\/code>&nbsp;atau dengan menekan shortcut&nbsp;<code>shift + cmd + X<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Berikut merupakan beberapa ekstensi yang akan kita bahas, di antaranya:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-live-server\">1. Live Server<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ekstensi satu ini memungkinkan kita untuk melakukan live reload aplikasi pada saat pengembangan. Ketika kita melakukan perubahan pada IDE maka secara otomatis kita bisa melihat perubahannya tanpa perlu melakukan reload manual.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Setelah Live Server diinstal, kita dapat mengklik kanan pada file html dan kita dapat melihat opsi&nbsp;<code>Buka dengan Live Server [Alt + L + Q]<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*CfYU3dAoc-39eAJf2hgb3A.gif\" alt=\"Live Server\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Link :&nbsp;<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ritwickdey.LiveServer\">Live Server<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2--quokkajs\">2. Quokka.js<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Quokka.js akan secara otomatis melakukan komputasi pada hasil yang kita ketikkan dan mencetaknya langsung di IDE.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*dkNlYDjAqjnHVrZSWqG1kA.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Link :&nbsp;<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=WallabyJs.quokka-vscode\">Quokka.js<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-code-spell-checker\">3. Code Spell Checker<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ekstensi spell cheker ini akan memberitahu kita beberapa spelling error yang umum terjadi dan ini juga sudah mendukung kode camelCase<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*3tgHzDUWembdB022yWutug.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Link :&nbsp;<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=streetsidesoftware.code-spell-checker\">Code Spell Checker<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4-gitlens\">4. GitLens<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">GitLens meningkatkan kemampuan Git yang dibangun ke dalam Visual Studio Code. Ekstensi ini membantu kita untuk memvisualisasikan penulisan kode secara sekilas melalui anotasi kesalahan Git. Ini juga bisa dengan mulus menavigasi dan menjelajahi repositori Git, mendapatkan valuable insights lewat powerful comparison commands, dan masih banyak lagi.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*DS2aWPI70ydDx4WHkkiJVQ.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Link :&nbsp;<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=eamodio.gitlens\">GitLens<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5-prettier-code-formatter\">5. Prettier (Code Formatter)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Prettier adalah sebuah code formatter yang dapat dengan mudah merapihkan source code yang kita tulis dengan aturan-aturan yang terdapat pada setting defaultnya. Kita juga dapat menyesuaikannya sendiri menurut style guide kita masing-masing.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*MMZW_gj10FYM_5LjllbYUQ.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Link :&nbsp;<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=esbenp.prettier-vscode\">Prettier<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6-eslint\">6. ESLint<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">ESLint adalah alat analisis kode statis untuk mengidentifikasi pola bermasalah yang ditemukan dalam kode JavaScript. Aturan di ESLint dapat dikonfigurasi dan aturan yang disesuaikan juga dapat ditentukan dan dimuat. ESLint mencakup masalah kualitas kode dan gaya penulisan kode.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*QlHjt8KztbbbjyIfyh2gAQ.jpeg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Link :&nbsp;<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dbaeumer.vscode-eslint\">ESLint<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"7-vscode-icons-vscode-icons\">7. VSCode Icons (vscode-icons)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ekstensi ini akan memberikan view berupa ikon di sebelah folder\/file struktur folder kita. Hal ini memudahkan kita dalam mengidentifikasi folder\/file tersebut.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*69vby7KoGBO5D6XDs2vdIg.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Link :&nbsp;<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=vscode-icons-team.vscode-icons\">vscode-icons<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"8-live-saas-compiler\">8. Live Saas Compiler<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Live Saas Compiler adalah ekstensi VS Code yang membantu kita untuk mengkompilasi \/ mentranspilasi file SASS \/ SCSS ke file CSS secara real time dengan reload browser secara langsung.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*lRRBKj3quCgoZvg_h05jwg.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Link :&nbsp;<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ritwickdey.live-sass\">Live Saas Compiler<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"9-javascript-es6-code-snippets\">9. JavaScript (ES6) Code Snippets<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ekstensi ini berisi snippets kode untuk JavaScript dalam sintaks ES6 untuk editor VS Code (mendukung JavaScript dan TypeScript).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Link :&nbsp;<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=xabikos.JavaScriptSnippets\">JavaScript (ES6) code snippets<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"10-browser-preview\">10. Browser Preview<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ekstensi Preview Browser untuk VS Code memungkinkan kita membuka pratinjau browser di dalam editor yang dapat kita debug.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*GLJ4V2RQCj3vIHxWToNWtA.gif\" alt=\"enter image description here\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Link :&nbsp;<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=auchenberg.vscode-browser-preview\">Browser Preview<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"11-path-intellisense\">11. Path Intellisense<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ekstensi ini akan menyelesaikan path dan nama file secara otomatis tanpa perlu mengetik sampai akhir.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/720\/1*fQ_NTKdmjF9tIHuVwhPHqA.gif\" alt=\"enter image description here\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Link :&nbsp;<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=christian-kohler.path-intellisense\">Path Intellisense<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"12-bracket-pair-colorizer\">12. Bracket Pair Colorizer<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ekstensi ini memungkinkan tanda kurung yang cocok diidentifikasi dengan warna. Pengguna dapat menentukan karakter mana yang cocok dan warna mana yang akan digunakan.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/938\/1*Mc7P11ekmFL7irjflGkMIg.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Link :&nbsp;<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=CoenraadS.bracket-pair-colorizer\">Bracket Pair Colorizer<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"13-vim\">13. Vim<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">VSCode Vim adalah sebuah emulator Vim untuk Visual Studio Code dan menghadirkan kekuatan Vim ke dalam text editor kita.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*ogSFrJtV4oTvo2xVYbHPCw.png\" alt=\"enter image description here\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Link :&nbsp;<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=vscodevim.vim\">Vim<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"14-todo-highlight\">14. TODO Highlight<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Kita dapat meng-highlight&nbsp;<code>TODO<\/code>,&nbsp;<code>FIXME<\/code>, dan anotasi lainnya dalam kode kita menggunakan ekstensi satu ini.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*6RH4xO1sLCBmpTHMwNEYEA.png\" alt=\"enter image description here\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Link :&nbsp;<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=wayou.vscode-todo-highlight\">Todo Highlight<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"15-color-highlight\">15. Color Highlight<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ekstensi ini memberi gaya css\/ warna web yang ada di dalam dokumen sehingga kita dapat melihat warna tanpa perlu membuka halamannya.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Link :&nbsp;<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=naumovs.color-highlight\">Color Highlight<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mungkin seperti itu pembahasan pada artikel kita kali ini, semoga bermanfaat. Happy Coding \ud83d\ude42<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sumber <a href=\"https:\/\/codepolitan.com\/blog\/15-vs-code-extension-untuk-menghemat-waktu-dan-membuatmu-menjadi-frontend-developer-yang-lebih-baik\">CodePolitan<a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hallo Teman Sekelas!\u00a0Kali ini kita akan membahas 15 ekstensi pada VS Code yang sangat berguna untuk para Frontend Developer. Oke, langsung saja kita bahas. Seperti yang kita ketahui bahwa VS Code memiliki marketplacenya sendiri dan berisi kumpulan plugin yang dapat diinstal ke text editor untuk membuatnya menjadi lebih powerfull. Kita dapat membuka marketplace dengan memilih&nbsp;Pengaturan &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/kelaskosong.my.id\/?p=455\"> <span class=\"screen-reader-text\">Gak Perlu Repot, Instal 15 Extension VS Code Ini Agar  Kamu Menjadi Frontend Developer yang Lebih Baik<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":460,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[9,11],"tags":[17,13,15,16,18,12,14],"class_list":["post-455","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artikel","category-tutorial","tag-belajarcoding","tag-coding","tag-enem","tag-kelaskosong","tag-source-code","tag-vscode","tag-web-developer"],"_links":{"self":[{"href":"https:\/\/kelaskosong.my.id\/index.php?rest_route=\/wp\/v2\/posts\/455","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kelaskosong.my.id\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kelaskosong.my.id\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kelaskosong.my.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kelaskosong.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=455"}],"version-history":[{"count":1,"href":"https:\/\/kelaskosong.my.id\/index.php?rest_route=\/wp\/v2\/posts\/455\/revisions"}],"predecessor-version":[{"id":456,"href":"https:\/\/kelaskosong.my.id\/index.php?rest_route=\/wp\/v2\/posts\/455\/revisions\/456"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kelaskosong.my.id\/index.php?rest_route=\/wp\/v2\/media\/460"}],"wp:attachment":[{"href":"https:\/\/kelaskosong.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kelaskosong.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kelaskosong.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}