Bagikan melalui


Gambaran umum Visual Studio IDE untuk JavaScript

Dalam pengenalan 5-10 menit ini ke lingkungan pengembangan terintegrasi Visual Studio (IDE), kami mengikuti tur beberapa jendela, menu, dan fitur UI lainnya.

Jika Anda belum menginstal Visual Studio, buka halaman unduhan Visual Studio untuk menginstalnya secara gratis.

Jendela Mulai

Hal pertama yang Anda lihat setelah meluncurkan Visual Studio adalah jendela mulai. Jendela mulai dirancang untuk membantu Anda lebih cepat "memulai coding." Ini memiliki opsi untuk menutup atau memeriksa kode, membuka proyek atau solusi yang ada, membuat proyek baru, atau hanya membuka folder yang berisi beberapa file kode. Jika jendela mulai tidak terbuka, pilih File > Jendela Mulai untuk membukanya.

Cuplikan layar jendela mulai di Visual Studio 2022.

Cuplikan layar jendela mulai di Visual Studio 2019.

Jika ini pertama kalinya Anda menggunakan Visual Studio, daftar proyek terbaru Anda akan kosong.

Jika Anda bekerja dengan basis kode berbasis non-MSBuild, gunakan opsi Buka folder lokal untuk membuka kode Anda di Visual Studio. Untuk informasi selengkapnya, lihat Mengembangkan kode di Visual Studio tanpa proyek atau solusi. Jika tidak, Anda dapat membuat proyek baru atau mengkloning proyek dari penyedia sumber seperti GitHub atau Azure DevOps.

Opsi Lanjutkan tanpa kode hanya membuka lingkungan pengembangan Visual Studio tanpa proyek atau kode tertentu yang dimuat. Anda dapat memilih opsi ini untuk bergabung dengan sesi Berbagi Langsung atau menghubungkan dengan proses untuk pemecahan masalah. Anda juga dapat menekan Esc untuk menutup jendela mulai dan membuka IDE.

Membuat proyek

Untuk terus menjelajahi fitur Visual Studio, mari kita buat proyek baru.

  1. Pada jendela mulai, pilih Buat proyek baru, kemudian ketik javascript atau typescript di kotak pencarian untuk memfilter daftar jenis proyek ke yang berisi "javascript" atau "typescript" dalam nama atau jenis bahasanya.

    Visual Studio menyediakan berbagai jenis templat proyek yang membantu Anda memulai pengkodan dengan cepat.

    Cuplikan layar pencarian templat proyek di jendela mulai Visual Studio.

    Cuplikan layar pencarian templat proyek di jendela mulai Visual Studio.

  1. Pilih templat proyek Aplikasi JavaScript Express dan klik Berikutnya.
  1. Pilih templat proyek Aplikasi Web Node.js Kosong dan klik Berikutnya.
  1. Dalam kotak dialog Konfigurasikan proyek baru Anda yang muncul, terima nama proyek default dan pilih Buat.

    Proyek telah dibuat. Di panel kanan, pilih app.js untuk membuka file di jendela Editor . Editor menampilkan konten file, dan merupakan tempat Anda melakukan sebagian besar pekerjaan pengkodan di Visual Studio.

    Cuplikan layar editor di Visual Studio.

    Proyek dibuat dan file bernama server.js terbuka di jendela Editor . Editor menampilkan konten file, dan merupakan tempat Anda melakukan sebagian besar pekerjaan pengkodan di Visual Studio.

    Cuplikan layar editor di Visual Studio.

Penjelajah Solusi

Penjelajah Solusi, yang biasanya berada di sisi kanan Visual Studio, menunjukkan representasi grafis dari hierarki file dan folder di folder proyek, solusi, atau kode Anda. Anda dapat menelusuri hierarki dan menavigasi ke file di Penjelajah Solusi.

Cuplikan layar Penjelajah Solusi di Visual Studio.

Cuplikan layar Penjelajah Solusi di Visual Studio.

Bilah menu di bagian atas Visual Studio mengelompokkan perintah ke dalam kategori. Misalnya, menu Proyek berisi perintah yang terkait dengan proyek tempat Anda bekerja. Pada menu Alat , Anda dapat menyesuaikan perilaku Visual Studio dengan memilih Opsi, atau menambahkan fitur ke penginstalan Anda dengan memilih Dapatkan Alat dan Fitur.

Cuplikan layar bilah menu di Visual Studio.

Cuplikan layar bilah menu di Visual Studio.

Mari kita buka jendela Daftar Kesalahan dengan memilih menu Tampilan , lalu Daftar Kesalahan.

Daftar Kesalahan

Daftar Kesalahan memperlihatkan kepada Anda kesalahan, peringatan, dan pesan mengenai status kode Anda saat ini. Jika ada kesalahan (seperti tanda kurung kurawal atau titik koma) yang hilang dalam file Anda, atau di mana saja dalam proyek Anda, kesalahan tersebut tercantum di sini.

Cuplikan layar Daftar Kesalahan di Visual Studio.

Cuplikan layar Daftar Kesalahan di Visual Studio.

Jendela keluaran

Jendela Output menunjukkan kepada Anda pesan output dari membangun proyek Anda dan dari penyedia kontrol sumber Anda.

Mari kita buat proyek untuk melihat beberapa hasil pembangunan. Dari menu Build , pilih Build Solution. Jendela Output secara otomatis mendapatkan fokus dan menampilkan pesan build yang berhasil.

Cuplikan layar jendela Output di Visual Studio.

Cuplikan layar jendela Output di Visual Studio.

Kotak Pencarian adalah cara cepat dan mudah untuk melakukan banyak hal di Visual Studio. Anda dapat memasukkan beberapa teks yang terkait dengan apa yang ingin Anda lakukan, dan akan menampilkan daftar opsi yang berkaitan dengan teks. Misalnya, bayangkan Anda ingin meningkatkan verbositas output build untuk menampilkan detail tambahan tentang apa yang sebenarnya dilakukan build. Berikut adalah cara Anda dapat melakukannya:

  1. Jika Anda tidak melihat kotak Pencarian, tekan Ctrl+Q untuk membukanya, lalu ketik verbositas ke dalam kotak.
  1. Dari hasil yang ditampilkan, klik dua kali entri verbositas output build proyek MSBuild (projectsAndSolutions.buildAndRun.outputVerbosity).

    Cuplikan layar yang memperlihatkan cara menggunakan kotak Pencarian di Visual Studio.

    Panel Opsi terbuka ke bagian Semua Pengaturan>Proyek dan Solusi>Build dan Jalankan.

  2. Gunakan menu dropdown dan atur opsi verbositas output build proyek MSBuild ke Normal.

  1. Dari hasil yang ditampilkan, klik dua kali entri Ubah verbositas MSBuild (Projects and Solutions > Build and Run).

    Cuplikan layar kotak Pencarian di Visual Studio.

    Dialog Opsi terbuka ke bagian Proyek dan Solusi>Build and Run .

  1. Dari hasil yang ditampilkan, klik dua kali entri Ubah verbositas MSBuild (Projects and Solutions > Build and Run).

    Cuplikan layar kotak Pencarian di Visual Studio.

    Dialog Pilihan terbuka pada halaman Proyek dan Solusi>Bangun dan Jalankan Opsi.

  1. Gunakan menu dropdown dan atur opsi verbositas output build proyek MSBuild ke Normal, lalu pilih OK.
  1. Bangun proyek lagi dengan mengklik kanan proyek di Penjelajah Solusi dan memilih Bangun kembali dari menu konteks.

    Kali ini, jendela Output menunjukkan lebih banyak log detail dari proses pembangunan.

    Cuplikan layar output build verbose di Visual Studio.

    Cuplikan layar output build verbose di Visual Studio.

Menu Kirim Umpan Balik

Jika Anda mengalami masalah saat menggunakan Visual Studio, atau jika Anda memiliki saran tentang cara meningkatkan produk, Anda dapat menggunakan menu Kirim Umpan Balik di bagian atas jendela Visual Studio.

Cuplikan layar menu Kirim Umpan Balik di Visual Studio.

Cuplikan layar menu Kirim Umpan Balik di Visual Studio.

Langkah selanjutnya

Kami hanya melihat beberapa fitur Visual Studio untuk berkenalan dengan antarmuka pengguna. Untuk menjelajahi lebih lanjut:

Lihat juga