() translation by (you can also view the original English article)
Dalam video ini saya akan memperkenalkan code editor favorit saya yang baru: Visual Studio Code. Visual Studio adalah produk Microsoft, yang mungkin mengejutkan bagi banyak di antara kamu, namun singkirkan dulu prasangkamu sesaat dan bergabung dengan saya dimana saya akan menunjukkanmu.
Visual Studio Code
Selama bertahun-tahun saya menggunakan berbagai code editor; TextMate, Coda, Sublime Text, Atom, dan masing-masing memiliki pro dan kontra. Visual Studio Code, bagaimana pun juga, tentu saja favorit saya sejauh ini, jadi mari kita lihat beberapa fiturnya.
Mulai dengan mendownload versi untuk sistemmu (Windows, Mac OS, Linux) di code.visualstudio.com (itu juga gratis).
UI
Salah satu alasan saya begitu menyukai Visual Studio Code adalah tampilannya; itu benar-benar sederhana.
Itu memiliki beberapa sidebar, yang dapat diposisikan di kiri atau kanan tergantung kriteriamu. Yang pertama memberikan beberapa icon untuk berganti antar panel. Pilih dari Explorer, Search, Git, Debug, dan Extensions. Pergi ke View untuk mengubah jenis display (full screen, zen mode dll).
Dengan mengarahkan pada folder dalam Explorer memberikan beberapa pilihan: New File, New Folder, Refresh, dan Collapse All. Klik kanan akan membawa menu konteks.
Command Palette
Tekan Shift-Command-P untuk menampilkan Command Palette.
Di dalam panel ini kamu dapat mencari apapun yang kamu inginkan untuk tindakan cepat dan mudah; perintah Git, mengubah theme, menginstal extension–itu semua dapat dilakukan via Command Palette.
Dalam hal yang serupa, Command-P akan menampilkan palette Go to file...
Terminal
Menahan Command- akan membuka terminal bawaan, dimana saya menyukai ini.
Ini membuka terminal secara langsung dalam root projectmu, menghematmu dari keharusan mencari. Dengan mengklik icon + membuka lebih banyak jendela terminal yang dapat dipindah-pindah dengan menggunakan drop-down. Ini semua memberi nilai tambah fitur yang berguna, khususnya jika kamu menggunakan compiler ketika melakukan coding.
Git
Fitur lainnya yang saya kagumi adalah integrasi Git. Perubahan yang kamu buat dalam file disorotin dalam berbagai tempat sehingga kamu tahu dengan tepat apa yang sedang terjadi:
Dalam gambar di atas kamu dapat melihat pemberitahuan sidebar yang memberi tahu saya perubahan yang belum disetujui, perubahan yang didaftarkan dalam panel Git, dan sebuah sorotan garis untuk menunjukkan saya dimana perubahan dalam file itu sendiri.
VSC juga akan menunjukkan perbandingan versi antar sisi, hanya untuk kejelasan ekstra.
Perintah Git standar lainnya seperti sync, pull, dan sebagainya, tersedia dari panel Git.
Emmet (Zen Coding)
Kabar bagus: Emmet telah dibangun ke dalam VSC. Tidak diperlukan pengaturan atau konfigurasi, kamu bisa hanya mulai menggunakan itu (dengan Tab menjadi hotkey untuk memicu snippet) segera setelah kamu membuka editor untuk pertama kalinya.
Multi Kursor
Ketika kamu menyoroti bagian kode dalam file, VSC akan secara otomatis menyoroti semua keadaan lainnya akan string tersebut. Kamu kemudian dapat menekan Command-D untuk menambahkan kursor lainnya pada contoh berikutnya, atau Shift-Command-L untuk menambahkan kursor pada semua contoh. Editing massal dengan mudah.
Pengaturan
Halaman pengaturan dalam VSC sangat intuitif. Seperti Sublime Text, pengaturan disimpan dalam sebuah file (JSON dalam kasus ini) yang mengijinkanmu untuk menjelajah semua default. Dengan menekan icon edit di sebelah tiap pengaturan, kamu akan menyalin itu pada sebuah file custom dimana kamu dapat membuat perubahan:
Tekan Save dan lihat efek perubahanmu secara langsung.
IntelliSense
IntelliSense adalah fitur dalam VSC yang cenderung saya coba segera setelah saya membuka editor. Itu adalah auto-completion super, syntax-highlighting assistant dan melangkah sedikit lebih jauh daripada yang dapat kamu harapkan dari fitur seperti ini.
Dengan mengarahkan pada CSS selector akan memberikanmu contoh bagaimana kamu menggunakan HTML terkait (sangat berguna bagi pemula):
Dengan mengarahkan pada properties menampilkan dokumentasi tentang apa yang mereka lakukan, dan nilai warna yang ditambahkan dari awal dengan contoh kecil untuk menunjukkan bagaimana mereka tampil dalam layar. Saran kode ketika kamu sedang mengetik juga menyeluruh.
Extensions
Code > Preferences > Color Theme akan membuka (sesuai tebakanmu) palette color theme. Telusuri melalui contoh-contoh dan kamu akan melihat UI berubah sesuai dengan itu. Tekan Enter untuk membuat perubahan yang permanen.
Di atas theme default, ada juga marketplace berisi contoh lainnya (saat ini masih gratis), ditambah extension semua jenis yang dapat dimainkan.
Kesimpulan
Itu baru bagian bungkus dari beberapa fitur favorit saya dalam Visual Studio Code, cukupkan itu dulu untuk mengatakan ada lebih banyak lagi fitur yang tersedia untuk diskusi. Dalam pengalaman saya menggunakan VSC sejauh ini, saya hanya dapat mengatakan bahwa itu positif. Sebelumnya saya menggunakan Atom, dan saya tidak menyesal membuat sedikit perpindahan. Tentu saja, kamu mungkin tidak setuju dengan saya, namun dalam pendapat pribadi saya, kamu tidak akan salah dalam mendownload dan mencoba code editor ini.
Tautan Berguna
