SoftwareTeknologiTutorialWindows

10 Extension Visual Studio Code untuk Pemula

10 Extension Visual Studio Code populer untuk Pemula

10 Extension Visual Studio Code Populer untuk Pemula – Halo Programmer, Salam sejahtera untuk kita semua. Postingan kali ini ane akan membahas 10 extension yang populer di dalam Visual Studio Code untuk pemula. kamu pasti bertanya, apakah kita perlu menggunakan extension untuk programmer pemula ? ya tentu saja perlu, karena itu dapat memudahkan para programmer pemula dalam membuat suatu pengkodingan atau sintaks menjadi lebih cepat dan lebih efektif.

Sebelum kita bahas kita harus persiapkan terlebih dahulu Software Visual Studio Code nya, atau bisa mendownload nya disini. Kalau belum tau cara menginstal VSCode dan extension nya ane sudah memposting Cara Menginstall Visual Studio Code di Windows kalau pakai linux atau Mac bisa langsung download didalam website nya dan download sesuai dengan sistem operasi nya disini. Oke jika sudah di download dan di install langsung saja kita bahas 10 extension yang populer di dalam Visual Studio Code untuk pemula.

Note : Pastikan sebelum mendownload extension nya harus terkoneksi internet terlebih dahulu.

1. Live Server

  Extension Live Server adalah extension  yang tidak hanya menampilkan website kamu menjadi lebih mudah tetapi kalau misalkan kamu biasanya melakukan edit itu website nya harus kamu Alt + tab untuk berpindah dari text editor dengan web tampilan kamu jadi dengan adanya extension ini kamu tidak perlu untuk me-reload lagi. extension ini mempunyai server lokal sendiri dari Visual Studio Code. jadi, kamu bisa menampilkan nya langsung  secara live  begitu kamu save project website nya akan berubah atau ter-reload otomatis. berikut cara  review extension nya.

  • Tampilan instal extension nya
tampilan instal liver server nya
review instal liver server nya
  • cara menggunakan nya dengan membuat file html hello.html copy kode html nya untuk mencoba agar sama.
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Hello</title>
    </head>
    <body>
        <h1>Coba Tampilkan Live Servernya </h1>
    </body>
    </html>
  • kemudian klik kanan di dalam kode html nya lalu pilih “Open with live server”. seperti di gambar:
Klik Kanan -> Open with live server
  • lalu pilih “Allow Access” jika muncul serperti ini.
pilih Allow Access jika muncul serperti ini
pilih Allow Access jika muncul serperti ini
  • Maka akan tampil pada browser default nya kalau saya pake chrome. gambar nya seperti ini.
tampilan live server pada browser
tampilan live server pada browser

 

2. Sublime Text Keymap and Settings Importer 

extension sublime text keymap  Extension Sublime Text Keymap and Settings Importer adalah extension untuk kamu yang sebelumnya pengguna sublime text , extension ini sangat bermanfaat sekali karena Shortcut nya sama seperti yang ada di sublime text. misal nya seperti kita ingin menampilkan dan menghilangkan sidebar seperti yang ada di sublime text tinggal kita ketik perintah di keyboard dengan menekan ( Ctrl + K + B ). dan masih banyak lagi tinggal anda lihat di deskripsi nya di gambar berikut ini.

extension sublime text keymap
review extension sublime text keymap

3. Open in Browser 

  Extension open in browser ini adalah extension yang juga merupakan salah satu fitur yang ada di  sublime text. kalau kita membuat sebuah halaman html di sublime text untuk menampilkan nya di browser kita cukup klik kanan open in browser. Jadi di dalam  Visual Studio code ini belum ada fitur seperti itu jadi ini extension cocok untuk kamu yang dulu nya main sublime text dan ingin mencoba Visual Studio Code. dengan mendownload extension ini kamu bisa menggunakan fitur yang ada di dalam sublime text kedalam Kedalam Sudio Code nya. ini lah gambar riview nya.

extension open in browser
review extension open in browser

4. Auto rename tag

]  Extension Auto rename tag ini sangat membantu ketika kamu ingin mengganti sebuah tag, misalkan ada tag <h1>Heading</h1> kamu mau ganti tag <h1></h1> nya menjadi <h2></h2> kamu hanya cukup ganti tag <h1> yang di depan nya saja dan penutup tag nya akan otomatis terganti tag nya sesuai dengan yang kamu ganti. ini lah gambar riview nya.

review auto rename tag
review auto rename tag

5. Intellisense for css classnames 

  Extension Intellisense for css classnames ini sangat membantu untuk para web designer apalagi untuk kamu yang menggunakan framework bootstrap jadi kita bisa melihat ada kelas apa saja yang ada dialam file css yang sudah kita panggil atau kita bisa melihat file yang ada di class tersebut. ini lah gambar riview nya.

riview Intellisense for css classnames
review Intellisense for css classnames

6. Indent rainbow

  Extension Indent rainbow ini sangat membantu pada saat kita membuat sebuah halaman dimana terdapat banyak <div></div>, terkadang kita bingung div yang ini tutupnya dimana mana, misalkan kita mau menggunakan bootstrap mau membuat NAVBAR kan kita copy ke dalam body, nah pas di paste tab nya ngacak pasti bingung kan meskipun udah ada bantuan visual berupa garis garis vertikal. Dengan menggunakan indent rainbow ini sekarang ada warna nya jadi kalian bisa lihat tutupnya ada dimana. berikut  gambar riview nya.

extension indent rainbow
review extension indent rainbow

7. Bracket Pair Colorizer

  Extension Bracket pair colorizer ini sama kaya indent rainbow tetapi ini menggunakan kurung kurawal (). misalkan kita ngoding menggunakan PHP atau JS kadang – kadang banyak kurung kurawal yang kita lupa buka nya dimana tutup nya dimana, dengan  menggunakan extention ini jadi akan mewarnai kurung kurawal-nya dan keren-nya lagi jika di klik salah satu kurung kurawalnya dia akan memperlihatkan garis ke arah penutup kurung kurawal tersebut. berikut gambar riview nya.

extension Bracket pair colorizer
review extension Bracket pair colorizer

8. Beautify

  Extension Beautify ini cukup keren untuk membantu formating codingan kita seperti tadi kita copy script bootstrap ke coding kita pas kita liat indentasinya pasti berantakan jadi harus di format manual biasanya. nah dengan menggunakan ekstension ini jadi nanti akan di otomatis formatkan atau formatnya bisa bikin sendiri atau bisa juga menggunakan format yg sudah ada didalam ekstensionnya.
(Extension ini sangat membantu pada saat bekerja dalam TIM jadi kodenya di gabungkan menjadi satu dan menggunakan format yg sama). berikut gambar riview nya.

Extension beautify
review extension beautify

9. PHP IntelliSense

extension php intellisense  Extension PHP IntelliSense adalah extension yang dikhususkan untuk PHP ketika kamu mengetik sesuatu sintaks php akan keluar auto complete nya, tetapi sebenarnya didalam Visual Studio Code ini sudah ada intelliSense-nya tetapi untuk PHP kurang lengkap jadi kalau mau lengkap lebih baik install ekstension ini. berikut gambar riview nya.

extsension php intellisense
review extsension php intellisense

10. One Dark Pro

tema one dark pro  Terakhir yaitu  One dark Pro ini sebenarnya adalah tema yang paling populer digunakan, seperti atom yang skema warnanya itu banyak banget yg suka bukan extension  jadi kita bisa install tema atom itu kedalam Visual Studio Code, tema ini sudah banyak yang pakai sudah sekitar 7 juta yang menginstall tema ini nah menurut saya warnanya sangat enak dilihat . jadi kalo kalian mau ganti temanya ini adalah salah satu tema yang paling populer. berikut gambar riview nya.

tema one dark pro
review tema one dark pro

Demikian 10 Extension Visual Studio Code populer untuk Pemula yang sudah ane buat semoga artikel ini bermanfaat. Jangan sungkan – sungkan untuk bertanya dan jangan lupa tinggalkan komentar untuk kita bisa Sharing ilmu bareng – bareng. Sekian dan terima kasih.:)

Tags

Nabil

I am a person who likes to learn a lot of new things, always trying to solve new things in a more efficient way and what I like most is Error, because in that error we can overcome the problem and can learn from the experience of the error. :)

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close