10 Plugin Yang Saya Gunakan Di Visual Studio Code

Assalamu’alaikum Warahmatullahi Wabarakaatuh.
   Pada kesempatan kali ini, saya akan berbagi pengalaman saya kepada kalian semua mengenai "10 Plugin Yang Saya Gunakan Di Visual Studio Code".  
     Visual Studio Code (VSCode) merupakan editor teks cross-platform yang tersedia bagi sistem operasi Windows, Linux, maupun OS X. Editor ini dikembangkan oleh Microsoft dan dengan cepat mengambil hati para developer yang menggunakan Sublime Text untuk pindah menggunakan VSCode.

     Seperti Sublime Text, VSCode memiliki sebuah fitur plugin bernama extentions. Extension bisa kita tambahkan langsung dari dalam VSCode itu sendiri. Extension yang tersedia di Marketplace juga bisa langsung dicari dari menu Extension.

1.Open-In-Browser

     Visual Studi Code tidak bisa memiliki antarmuka yang langsung membawa kita untuk membuat file HTML ke browser default, berbeda dengan Sublime Text 3 Yang secara default sudah terinstal. Tapi tenang kita bisa menginstal plugin ini dengan mudah di Visual Studi Code. Extension ini akan menambahkan menu Open with Default Browser saat dipasang yang akan langsung memuat file HTML tertentu ke Firefox, Chrome, atau IE.


2.CSS Peek


 Pada Visual Studio Code ada plugin yang bernama CSS Peek. Extension ini membuat kita bisa langsung mengakses definisi kelas CSS dari file HTML.
Yang dapat membantu anda saat ngoding agar lebih cepat.

3. Minify

    Extension ini berguna untuk melakukan minifying kode JavaScript, CSS, maupun HTML dengan memanfaatkan uglify-js, clean-css, dan html-minifier. Atau dengan kata lain, ektensi ini dapat mempercantik script anda dengan singkat cukup dengan klik CTRL + S, script anda sudah tertata rapi. Simple sekali bukan hehehe...


4 .Color Info


    Plugin ini memberikan informasi seputar kode warna yang kita tulis di CSS. Dengan mengarahkan kursor ke kode hexa warna tertentu, kita akan diberikan preview warnanya beserta nilai-nilainya di berbagai format lain seperti rgb, hsl, cmyk, juga nilai alpha-nya. Yang tentunya sangat membantu kita dalam mendesign web agar lebih cantik dan enak untuk di lihat.

5.TODO Highlight

    Plugin ini saat diaktifkan akan menyeleksi komentar TODO di kode kita sehingga bagian-bagian mana yang harus dikerjakan berikutnya bisa terlihat dengan jelas. Saat dipasang ia akan bisa mendeteksi keyword TODO dan FIXME tapi kita juga bisa menambah keyword sendiri.

6. Faker
Dengan memasang plugin ini kita bisa membuat fake data untuk alamat, nama perusahaan, tanggal, nama orang, nomor telepon, atau sekedar lorem ipsum. Daripada memasukkan "adsfasdfksdfj" lebih baik pasang Extension ini dan buat data yang lebih "nyata".




    Pernah kan copy paste kode baru yang ternyata tidak terindentasi dengan sempurna? Sering kita atur indentasi kode manual dengan tombol TAB atau SHIFT+TAB. Prettier akan memformat kode kita secara otomatis sehingga kita tidak perlu membuat waktu yang untuk memformat dokumen. Tak hanya mengatur indentasi, ia juga bisa mengatur urutan import, memaksa penggunaan "untuk menggantikan ', mengatur spasi, penulisan parameter, dsb.


8.Change Case

Change Case membantu kita dalam memodifikasi strings, menjadi camelCase, kebab-case, snake_case, CONST_CASE, dll.

9.Quokka
    Quokka merupakan Extension untuk membantu melakukan live debugging. Saat menulis kode, Quokka akan langsung memberikan umpan balik berupa hasil dari kode yang dieksekusi.



10. Git Lens

    Git Lens akan menunjukkan siapa saja anggota tim yang menuliskan bagian-bagian kode yang sedang kita buka. Dengan plugin ini kita bisa tahu siapa menulis kode yang mana.



   Sekian yang bisa saya sampaikan, semoga bisa membantu anda semua untuk lebih bersemangat ngoding. Bila ada tutur kata yang kurang berkenan di hati para pembaca, saya dengan hati yang terdalam minta maaf yang sebesar-besarnya. Tiada niatan lain selain berbagi ilmu kepada anda semua


Assalamu’alaikum Warahmatullahi Wabarakaatuh

Komentar

Posting Komentar

Postingan populer dari blog ini

Menampilkan Data Dari Form ke Tabel Secara Dinamis

Gambar
Assalamualaikum Wr. Wb      Pada kesempatan kali ini saya akan berbagi tentang "Menampilkan data Dari Form Ke Tabel Secara Dinamis". Materi kali ini adalah JavaScript, dengan JavaScript kita bisa membuat atau menampilkan data dari kita mulai input sampai tampil pada tabel dan datanya bersifat dinamis atau bisa di rubah-rubah.    Komponen yang kita butuhkan 1. Buat file ber ekstensi HTML 2 Link Bootstrap online (Bootstrap.cdn). 3. Link Jquery online     (cdnjs). Langsung saja kita praktekan !!! 1. Buat file dengan nama sesuai kebutuhan  (kali ini saya membuat file bernama jqtabel).     2. Deklarasikan Html dan tulis script berikut ini untuk membuat Form Input Data       3. Jika sudah, di bawah tag tutup  Form kita buat Tabel untuk tempat tampil data. contoh script nya seperti dibawah     4. Jika anda sudah membuat Form Input dan Tabel, secara tampilan anda sudah berhas...
Baca selengkapnya

Cara Menampilkan Data Dari Database ke Tabel Dengan Javascript

Gambar
Assalamualaikum Wr. Wb. Pada kesempata kali ini saya akan membagi ilmu yang saya dapat, yaitu tentang bagaimana cara menampilkan data dari database (mysql) ke dalam sebuah tabel dengan framework JavaScript. Dengan Framework ini kita di mudahkan karena tidak perlu menulis banyak script tetatpi hasilnya lebih bagus dari pada kita menulis script secara manual. Persiapan yang kita perlukan       1. Link Bootstrap online atau bisa  link bootstrap online  untuk mendapatkan link       2. Link Jquery online atau bisa  klik di sini untuk mendapatkan linknya Sekian dulu dari intro pada kali ini, langsung kita praktekkan !!. 1. Buat file yang ber ektensi php pada percobaan kali ini saya membuat file bernama (jqload.php).     seperti biasa kita deklarasikan dulu PHP atau kita buat Tag PHP. Contoh script seperti berikut ini.     a. Kita tuliskan php Cors. PHP CORS secara singkat adalah   anda bisa transf...
Baca selengkapnya

Cara Menampilkan Data Dengan JavaScript

Gambar
Assalamualaikum Wr. Wb.     Selamat malam,pagi,siang,sore apalah itu yang itinya saya mengucapkan selamat datang hehe.       Pada kesempatan kali ini saya akan share ilmu yang barusan saya dapat dari guru pembimbing saya, dan kebetulan saya sedang menjalani Praktek Kerja Industri atau Prakerin . Yaitu tentang, Bagaimana Menampilkan Data Dari Mysql Melalui JavaScript. Yang pertama tentu kita harus menyiapkan apa-apa saja yang nanti kita perlukan untuk praktek agar bisa fokus dalam percobaan. 1.  Text Editor 2.  Sample Data dari Mysql 3.  Dokumentasi JavaScript (bila perlu). 4.  Minum dan kacang untuk penghibur di kala eror. hehehe Langkah Awal : 1.  Buat Folder sesuai keinginan anda, pada kesempatan kali ini saya memberi nama Folder atau Project saya dengan nama JavaPHP.       a. Lalu buat Folder bernama " database ", folder database ini kita gunakan untuk membuat koneksi ke database yang kita puny...
Baca selengkapnya