Tutorial Visual Studio Code (VSCode) #3 Extension
Tags: vscode, webdev, extensionvscode, beginners
Published: 2023-02-25 07:24:43

Extension pada VSCode adalah sebuah fitur yang memungkinkan pengembang untuk menambahkan fungsionalitas baru pada editor teks. Extension ini dikembangkan oleh pengguna atau pihak ketiga, dan dapat diinstal pada VSCode melalui Marketplace atau secara manual. Ada ribuan extension yang tersedia di Marketplace, yang dapat membantu pengembang dalam mengembangkan aplikasi, seperti extension untuk bahasa pemrograman tertentu, debugging, testing, formatting, dan banyak lagi.

## Manfaat dari menginstall extension pada VSCode
Manfaat dari extension pada VSCode sangatlah beragam, beberapa di antaranya adalah:

1. Memudahkan dalam mengembangkan aplikasi: Dengan extension, pengembang dapat menambahkan fitur baru pada editor yang memudahkan dalam mengembangkan aplikasi.

2. Meningkatkan produktivitas: Extension dapat membantu meningkatkan produktivitas dengan memberikan fitur seperti auto-complete, snippet, dan fitur lainnya yang mempercepat proses pengembangan.

3. Menyesuaikan dengan kebutuhan: Extension memungkinkan pengguna untuk menyesuaikan editor teks dengan kebutuhan mereka. Pengguna dapat memilih dan menginstal extension yang sesuai dengan bahasa pemrograman yang mereka gunakan, atau fitur lain yang dibutuhkan dalam pengembangan aplikasi.

4. Meningkatkan kualitas kode: Extension seperti linter dan formatter dapat membantu pengembang dalam menulis kode yang lebih bersih dan terstruktur, sehingga meningkatkan kualitas kode yang dihasilkan.

5. Mendukung kerja tim: Extension dapat membantu tim pengembang dalam melakukan kolaborasi dengan fitur seperti Git integration dan live share, sehingga memudahkan dalam bekerja secara bersama-sama dalam mengembangkan aplikasi.
Meningkatkan kemampuan debugging: Extension seperti debugger dan profiler dapat membantu pengembang dalam mengidentifikasi masalah pada aplikasi dan memperbaikinya dengan lebih mudah.

6. Meningkatkan pengalaman pengguna: Extension dapat memberikan fitur tambahan pada editor, seperti tema yang menarik, efek animasi, dan lain sebagainya, yang dapat meningkatkan pengalaman pengguna dalam menggunakan editor.

7. Mendukung pengembangan cross-platform: Karena VSCode dapat digunakan pada berbagai sistem operasi, extension juga dapat dikembangkan untuk mendukung pengembangan aplikasi cross-platform.

Sekarang mimin akan berikan beberapa extension yang cocok untuk anda sebagai pemula yang masuk kedalam programing terkhusus di sini untuk web developer yang dimana sangat perlu untuk mendukung dalam proses coding mengkoding nantinya.

## Auto Close Tag ([Link Download](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag))

![Auto Close Tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15m44yoawxo9gegduv31.png)

Extension ini berguna sekali untuk anda terlebih seorang front end developer karena pada saat membuat tag tag html untuk tampilan atau User Interface (UI) anda akan sangat terbantuk karena pada saat membuat suatu tag html akan langsung di bantu untuk membentuk tag html dengan pembuka tag maupun penutup tag html.


## Auto Rename Tag ([Link Download](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag))

![Auto Rename Tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqdh456v1uqjkks6y7cw.png)
Sama seperti extension sebelumnya, extension ini berguna sekali untuk anda terlebih seorang front end developer karena pada saat membuat tag tag html untuk tampilan atau User Interface (UI) anda akan sangat terbantuk karena pada saat anda mengubah tag HTML yang salah pada pembuka tag Html tersebut maka pada penutup tag HTML yang anda ubah akan mengikuti perubahan yang anda lakukan pada pembuka tag tersebut. Extension ini sangat berguna jika pada saat code yang sudah terlalu banyak akan sulit untuk jika kita mengubah satu persatu dari pembuka sampai penutup tagnya.


## Auto-Save on Window Change ([Link Download](https://marketplace.visualstudio.com/items?itemName=mcright.auto-save))

![Auto-Save on Window Change](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkb280rqoajmucipzg44.png)
Extension ini menurut mimin cukup bagus bagi anda yang sering lupa untuk menyimpan codingan yang telah anda tulis sebelumnnya, karena jika anda keluar dari window pekerjaan anda pada VSCode lalu ke Window lainnya untuk melihat hasil codingannya, maka secara otomatis VSCode akan menyimpan hasil codingan anda harus menyimpannya secara manual yakni biasanya menekan tombol `CTRL + S` pada keyboard


## CSS Flexbox Cheatsheet ([Link Download](https://marketplace.visualstudio.com/items?itemName=dzhavat.css-flexbox-cheatsheet))

![CSS Flexbox Cheatsheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dehprx2ljuupe60pu475.png)
Sama seperti extension sebelumnya, extension ini berguna sekali untuk anda terlebih seorang front end developer karena pada saat membuat tampilan dan menghiasnya dengan css maka, dengan extension ini anda dapat terbantu untuk bagaimana cara membuat tampilan Flexbox dengan css.


## CSS Peek ([Link Download](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek))

![css peak](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rqa8j5s0jjjegnksis8.png)
Dari namanya sudah terlihat jika extension ini berguna untuk programmer dalam hal melihat css secara langsung dari html yang digunakan sehingga kita dapat melihat langsung attribute css apa saja yang di gunakan.


## Prettier Formatter for Visual Studio Code ([Link Download](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode))

![Prettier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m67reot4w13lb7f7f6dh.png)
Extension ini sangat berguna jika kita sedang melakukan coding mengkoding dan tata letak dari code yang kita susun masih berantakan, sehingga pada saat kita menyimpan atau melakukan formatter atau merapikan code yang kita tulis akan menjadi lebih enak di lihat dan di baca oleh kita sebagai programmer maupun orang lainnya dari bagian lain seperti back end untuk melihat code view dalam menampilkan data yang di olahnya.


## Sublime Importer for VS Code ([Link Download](https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings))

![Sublime ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ja63u0yqt5pjdka9fjwn.png)
Siapa nih yang disini gak bisa move on dari aplikasi code editor Sublime Text, sama dong seperti mimin yang gak bisa move on dari aplikasi tersebut,dan di VSCode ini ternyata ada lo extension yang membuat VSCode kita secara fungsi hampir sama dengan aplikasi Sublime Text. Kita bisa atur lo setingan VSCode kita seperti setingan yang ada di Sublime Text dengan Extension ini.


## Image preview ([Link Download](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview))

![Image preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqip5supi8j9qzqn6kfw.png)
Kemudian ada extension yang namanya Image Preview. Sesuai dengan namanya extension ini membantu kita untuk melihat gambar yang kita gunakan di dalam codingan kita, gambar tersebut dapat kita lihat secara langsung di sebelah kiri dari baris code yang kita gunakan untuk memanggil resource gambar maupun media yang lainnya tanpa harus bolak balik untuk melihat gambar tersebut sudah benar atau belum. Gambar yang kita gunakan akan muncul ketika kita memanggil path atau resouce dari gambar tersebut benar ya ges.


## Live Server ([Link Download](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer))

![Live Server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mys18bs8wipwvjn6qm9k.png)
Kemudian ada extension Live Server, sama seperti namanya fungsi dari extension ini membantu kita jika kita membutuhkan server lokal atau kita harus melihat perubahan secara real time ketika kita mengubah code yang kita tulis, biasanya live server ini di gunakan ketika programmer memerlukan server lokal tanpa harus menginstall aplikasi apapun atau menginstal framework apapun.


## Open in Browser ([Link Download](https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser))

![Open in Browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a29l3837to84e9n9e5u3.png)
Extension ini berguna ketika kita membuat suatu code atau program dan ketika kita ingin melihat hasil nya biasanya kita harus membuka direktori guna membuka file yang telah kita tulis program tersebut, sehingga akan memerlukan waktu yang cukup lama untuk melihat hasil nya, dan dengan extension ini kita sebagai programmer akan sangat terbantu untuk bisa langsung melihat hasil nya di browser hanya dengan beberapa klik saja tanpa harus membuka direktori file yang ingin kita buka.


## IntelliSense for CSS class names in HTML ([Link Download](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion))

![IntelliSense for CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wa6mj3x0w5nih4y2anqn.png)
Extension ini berguna pada saat kita membuat tampilan terlebih lagi bagi anda seorang front end yang sedikit lupa dengan attribute class css yang digunakan pada tag html, sehingga dengan menggunakan extension ini anda akan di bantu dengan cara VSCode akan memberikan saran saran untuk beberapa attribute class yang digunakan pada tag html.


## Laravel Blade formatter ([Link Download](https://marketplace.visualstudio.com/items?itemName=shufo.vscode-blade-formatter))

![Laravel Blade formatter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qg7ob5ro1i1724fnmff.png)
Sama seperti prettier extension ini juga berfungsi untuk merapihkan code yang kita buat atau code yang kita paste yang sebelum nya berantakan dan sulit di baca, dengan menggunakan extension ini terlebih bagi anda yang menggunakan framework Laravel extension ini sangat berguna sekali dalam pekerjaan anda sebagai web developer yang menggunakan teknologi Laravel.


## Laravel Blade Snippets ([Link Download](https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade))

![Laravel Blade Snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0l6sqeokebffxj18bxvx.png)
Sama dengan extension yang sebelum nya, yang dimana akan memberikan saran mengenai tag ataupun attribute html yang bisa digunakan akan tetapi pada saat menggunakan framework seperti laravel ini, sangat sulit karena dari extension file yang sudah berbeda sehingga dengan adanya extension ini dapat membantu anda dalam membuat tag tag html di dalam file yang ber-extensikan blade.php.

Jika ada bagian yang membuat anda bingung silahkan tanya di kolom komentar.

Sekian dari mimin, jika ada kesalahan baik kata atau informasi yang mimin sampaikan, mimin minta maaf dan semoga berguna dan membantu anda dalam coding mengcoding. Salam Titik Koma (;)

Support Me :

[![Trakteer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gt7j2h08ve3987qhkf08.png)](https://trakteer.id/yudhasdev/link)

[![Saweria](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sx7lzyl946962g7hd2sm.png)](https://saweria.co/yudhasDev)