Pelajari cara menggunakan editor kode untuk JavaScript

Dalam pengenalan singkat ke editor kode di Visual Studio, kita akan melihat beberapa cara yang mana Visual Studio membuat penulisan, navigasi, dan pemahaman kode lebih mudah.

Tip

Jika Anda belum menginstal Visual Studio, buka halaman pengunduhan Visual Studio untuk menginstalnya secara gratis. Untuk informasi selengkapnya dalam mendapatkan layanan bahasa untuk TypeScript, lihat dukungan TypeScript.

Artikel ini mengasumsikan Anda sudah terbiasa dengan pengembangan JavaScript. Jika tidak, kami sarankan Anda melihat tutorial seperti Membuat aplikasi Node.js dan Express terlebih dahulu.

Menambahkan file proyek baru

Anda dapat menggunakan IDE untuk menambahkan file baru ke proyek Anda.

1. Dengan proyek Anda terbuka di Visual Studio, klik kanan folder atau node proyek Anda di Penjelajah Solusi (panel kanan), dan pilih Tambahkan>Item Baru.

   Jika Anda tidak melihat semua templat item, pilih Perlihatkan Semua Templat, lalu pilih templat item.

2. Dalam kotak dialog File Baru, pada kategori Umum, pilih jenis file yang ingin Anda tambahkan, seperti File JavaScript, lalu pilih Buka.

   File baru ditambahkan ke proyek Anda dan terbuka di editor.

Gunakan IntelliSense untuk menyelesaikan kata-kata

IntelliSense adalah sumber daya yang sangat berharga saat Anda mengodekan. Sumber daya ini dapat menunjukkan informasi tentang anggota jenis yang tersedia, atau detail parameter untuk kelebihan beban yang berbeda dari suatu metode. Dalam kode berikut, saat Anda mengetik Router(), Anda akan melihat jenis argumen yang bisa Anda lewati. Ini disebut bantuan tanda tangan.

Anda juga dapat menggunakan IntelliSense untuk menyelesaikan kata setelah mengetikkan cukup banyak karakter untuk memperjelasnya. Jika Anda meletakkan kursor setelah data string dalam kode dan jenis getberikut, IntelliSense akan menampilkan fungsi yang ditentukan sebelumnya dalam kode atau ditentukan dalam pustaka pihak ketiga yang telah Anda tambahkan ke proyek Anda.

IntelliSense juga dapat menampilkan informasi tentang jenis saat Anda mengarahkan mouse ke atas elemen pemrograman.

Untuk memberikan informasi IntelliSense, layanan bahasa dapat menggunakan file TypeScript d.ts dan komentar JSDoc. Untuk pustaka JavaScript yang paling umum, file d.ts diperoleh secara otomatis. Untuk detail selengkapnya tentang bagaimana informasi IntelliSense diperoleh, lihat IntelliSense JavaScript.

Memeriksa sintaksis

Layanan bahasa menggunakan ESLint untuk memberikan pemeriksaan sintaks dan linting. Jika Anda perlu mengatur opsi untuk pemeriksaan sintaks di editor, pilihOpsi>Alat>JavaScript/TypeScript>Linting. Opsi linting mengarahkan Anda ke file konfigurasi ESLint global.

Dalam kode berikut, Anda akan melihat penyorotan sintaks hijau (berlekuk-lekuk hijau) pada ekspresi. Arahkan mouse ke atas penyorotan sintaks.

Baris terakhir pesan ini memberi tahu Anda bahwa layanan bahasa mengharapkan koma (,). Berlekuk hijau menunjukkan peringatan. Berlekuk merah menunjukkan kesalahan.

Di panel bawah, Anda bisa mengklik tab Daftar Kesalahan untuk melihat peringatan dan deskripsi bersama dengan nama file dan nomor baris.

Anda dapat memperbaiki kode ini dengan menambahkan koma (,) sebelum "data".

Untuk informasi tambahan tentang linting, lihat Linting.

Mengomentari kode

Toolbar, yang merupakan baris tombol di bawah bilah menu di Visual Studio, dapat membantu membuat Anda lebih produktif saat Anda membuat kode. Misalnya, Anda dapat beralih IntelliSense mode penyelesaian (IntelliSense adalah bantuan pengodean yang menampilkan daftar metode yang cocok, di antara hal-hal lain), menambah atau mengurangi inden baris, atau mengomentari kode yang tidak ingin Anda kompilasi. Di bagian ini, kami akan mengomentari beberapa kode.

Pilih satu atau beberapa baris kode di editor lalu pilih tombol Komentari baris yang dipilih pada toolbar. Jika Anda lebih suka menggunakan keyboard, tekan Ctrl+K, Ctrl+C.

Karakter // komentar JavaScript ditambahkan ke awal setiap baris yang dipilih untuk mengomentari kode.

Menciutkan blok kode

Jika Anda perlu menghapus tampilan beberapa wilayah kode, Anda dapat menciutkannya. Pilih kotak abu-abu kecil dengan tanda minus di dalamnya di margin baris pertama fungsi. Atau, jika Anda pengguna keyboard, letakkan kursor di mana saja dalam kode konstruktor dan tekan Ctrl+M, Ctrl+M.

Blok kode diciutkan hanya menjadi hanya baris pertama, diikuti oleh elipsis (...). Untuk memperluas blok kode lagi, pilih kotak abu-abu yang sama yang sekarang memiliki tanda plus di dalamnya, atau tekan Ctrl+M, Ctrl+M lagi. Fitur ini disebut Kerangka dan sangat berguna ketika Anda menciutkan metode panjang atau seluruh kelas.

Melihat definisi

Editor Visual Studio memudahkan untuk memeriksa definisi jenis, metode, dll. Salah satu caranya adalah dengan menavigasi ke file yang berisi definisi, misalnya dengan memilih Buka Definisi di mana saja elemen pemrograman direferensikan. Cara yang lebih cepat yang tidak mengalihkan fokus Anda dari file yang sedang Anda kerjakan adalah dengan menggunakan Definisi Intip. Mari kita intip definisi render metode dalam contoh di bawah ini.

Klik kanan pada kata render dan pilih Intip Definisi dari menu konten. Atau, tekan Alt+F12.

Sebuah jendela pop-up muncul dengan definisi metode render. Anda dapat menggulir di dalam jendela pop-up, atau bahkan mengintip definisi jenis lain dari kode yang diintip.

Tutup jendela definisi yang diintip dengan memilih kotak kecil dengan "x" di kanan atas jendela pop-up.

Menggunakan cuplikan kode

Visual Studio menyediakan cuplikan kode yang berguna yang dapat Anda gunakan untuk menghasilkan blok kode yang umum digunakan dengan cepat dan mudah. Cuplikan kode tersedia untuk berbagai bahasa pemrograman termasuk JavaScript. Mari kita tambahkan perulangan for ke file kode Anda.

Letakkan kursor Anda di tempat Anda ingin menyisipkan cuplikan, klik kanan dan pilih>Cuplikan Sisipkan Cuplikan.

Kotak Sisipkan Cuplikan muncul di editor. Pilih Umum lalu klik dua kali untuk item dalam daftar.

Ini menambahkan cuplikan perulangan for ke kode Anda:

for (var i = 0; i < length; i++) {

}

Anda dapat melihat cuplikan kode yang tersedia untuk bahasa Anda dengan memilih Edit>IntelliSense>Sisipkan Snippet, lalu memilih folder bahasa Anda.

Konten terkait

• Cuplikan kode
• Menavigasi kode
• Menguraikan
• Membuka Definisi dan Definisi Intip
• Refactoring
• Menggunakan IntelliSense