Visual Studio Code menyertakan JavaScript IntelliSense bawaan, debugging, pemformatan, navigasi kode, pemfaktoran ulang, dan banyak fitur bahasa lanjutan lainnya Show
Sebagian besar fitur ini langsung berfungsi, sementara beberapa mungkin memerlukan konfigurasi dasar untuk mendapatkan pengalaman terbaik. Halaman ini merangkum fitur-fitur JavaScript yang disertakan dengan VS Code. Ekstensi dari VS Code Marketplace dapat menambah atau mengubah sebagian besar fitur bawaan ini. Untuk panduan yang lebih mendalam tentang cara kerja dan konfigurasi fitur ini, lihat Bekerja dengan JavaScript IntelliSenseIntelliSense menunjukkan kepada Anda penyelesaian kode yang cerdas, informasi arahkan, dan informasi tanda tangan sehingga Anda dapat menulis kode dengan lebih cepat dan benar Maaf, browser Anda tidak mendukung video HTML 5VS Code menyediakan IntelliSense dalam proyek JavaScript Anda; Lihat Bekerja dengan JavaScript untuk informasi tentang JavaScript IntelliSense VS Code, cara mengonfigurasinya, dan membantu memecahkan masalah umum IntelliSense Proyek JavaScript (jsconfig. json)Sebuah jsconfig. File json mendefinisikan proyek JavaScript di VS Code. Meskipun 0 file tidak diperlukan, Anda akan ingin membuatnya dalam kasus seperti
Untuk menentukan proyek JavaScript dasar, tambahkan 0 di akar ruang kerja Anda
Lihat Bekerja dengan JavaScript untuk konfigurasi 0 lebih lanjut
CuplikanVS Code menyertakan cuplikan JavaScript dasar yang disarankan saat Anda mengetik; Maaf, browser Anda tidak mendukung video HTML 5Ada banyak ekstensi yang menyediakan snippet tambahan, termasuk snippet untuk framework populer seperti Redux atau Angular. Anda bahkan dapat menentukan cuplikan Anda sendiri
dukungan JSDocVS Code memahami banyak anotasi JSDoc standar, dan menggunakan anotasi ini untuk memberikan kekayaan. Anda bahkan dapat menggunakan informasi jenis dari komentar JSDoc Maaf, browser Anda tidak mendukung video HTML 5Buat komentar JSDoc dengan cepat untuk fungsi dengan mengetik 5 sebelum deklarasi fungsi, dan pilih saran cuplikan komentar JSDocMaaf, browser Anda tidak mendukung video HTML 5Untuk menonaktifkan saran komentar JSDoc, setel 6Arahkan InformasiArahkan kursor ke simbol JavaScript untuk melihat informasi tipe dan dokumentasi yang relevan dengan cepat ⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) keyboard shortcut shows this hover information at the current cursor position. Bantuan Tanda TanganSaat Anda menulis panggilan fungsi JavaScript, VS Code menampilkan informasi tentang tanda tangan fungsi dan menyorot parameter yang sedang Anda selesaikan Bantuan tanda tangan ditampilkan secara otomatis saat Anda mengetik 7 atau 8 dalam panggilan fungsi. Tekan ⇧⌘Space (Windows, Linux Ctrl+Shift+Space ) . to manually trigger signature help.Impor otomatisImpor otomatis mempercepat pengkodean dengan menyarankan variabel yang tersedia di seluruh proyek Anda dan ketergantungannya. Saat Anda memilih salah satu saran ini, VS Code secara otomatis menambahkan impornya ke bagian atas file Mulailah mengetik untuk melihat semua simbol JavaScript yang tersedia di proyek Anda saat ini. Saran impor otomatis menunjukkan dari mana mereka akan diimpor Jika Anda memilih salah satu dari saran impor otomatis ini, VS Code akan menambahkan impor untuknya Dalam contoh ini, VS Code menambahkan impor untuk 9 dari material-ui ke bagian atas fileUntuk menonaktifkan impor otomatis, setel 0 ke 1
PemformatanPemformat JavaScript bawaan VS Code menyediakan pemformatan kode dasar dengan default yang masuk akal Pengaturan _4 mengonfigurasi pemformat internal. Atau, jika pemformat internal menghalangi, setel 5 ke 1 untuk menonaktifkannyaUntuk gaya pemformatan kode yang lebih terspesialisasi, coba pasang salah satu ekstensi pemformatan JavaScript dari Marketplace JSX dan tag penutup otomatisSemua fitur JavaScript VS Code juga bekerja dengan JSX Anda dapat menggunakan sintaks JSX di file 7 normal dan di file 8VS Code juga menyertakan fitur khusus JSX seperti penutupan otomatis tag JSX Maaf, browser Anda tidak mendukung video HTML 5Setel _9 ke 1 untuk menonaktifkan penutupan tag JSXnavigasi kodeNavigasi kode memungkinkan Anda menavigasi proyek JavaScript dengan cepat
Anda dapat menavigasi melalui pencarian simbol menggunakan perintah Buka Simbol dari Palet Perintah ( ⇧⌘P (Windows, Linux Ctrl+Shift+P)).
Ganti namaTekan F2 untuk mengganti nama simbol di bawah kursor di proyek JavaScript Anda. Pemfaktoran ulangVS Code menyertakan beberapa pemfaktoran ulang praktis untuk JavaScript seperti fungsi Ekstrak dan konstanta Ekstrak. Cukup pilih kode sumber yang ingin Anda ekstrak lalu klik bola lampu di selokan atau tekan ( ⌘. (Windows, Linux Ctrl+. ) ) untuk melihat pemfaktoran ulang yang tersedia. Refactoring yang tersedia termasuk
Lihat Pemfaktoran ulang untuk informasi selengkapnya tentang pemfaktoran ulang dan cara mengonfigurasi pintasan keyboard untuk pemfaktoran ulang individual Variabel yang tidak digunakan dan kode yang tidak dapat dijangkauKode JavaScript yang tidak terpakai, seperti blok else dari pernyataan 1 yang selalu benar atau impor tanpa referensi, memudar di editorAnda dapat dengan cepat menghapus kode yang tidak terpakai ini dengan menempatkan kursor di atasnya dan memicu perintah Perbaiki Cepat ( ⌘. (Windows, Linux Ctrl+. )) or clicking on the lightbulb. Untuk menonaktifkan pemudaran kode yang tidak digunakan, atur 2 ke 1. Anda juga dapat menonaktifkan pemudaran kode yang tidak digunakan hanya di JavaScript dengan pengaturan
Mengatur ImporTindakan Atur Impor Sumber mengurutkan impor dalam file JavaScript dan menghapus impor yang tidak terpakai Maaf, browser Anda tidak mendukung video HTML 5Anda dapat menjalankan Atur Impor dari menu konteks Tindakan Sumber atau dengan ⇧⌥O (Windows, Linux Shift+Alt+O) keyboard shortcut. Atur impor juga dapat dilakukan secara otomatis saat Anda menyimpan file JavaScript dengan pengaturan
Tindakan Kode saat SimpanPengaturan _4 memungkinkan Anda mengonfigurasi sekumpulan Tindakan Kode yang dijalankan saat file disimpan. Misalnya, Anda dapat mengaktifkan pengaturan impor pada penyimpanan dengan pengaturan
Anda juga dapat mengatur _4 ke array Tindakan Kode untuk dijalankan secara berurutanBerikut adalah beberapa tindakan sumber
Lihat Node. js/JavaScript untuk informasi lebih lanjut Saran kodeVS Code secara otomatis menyarankan beberapa penyederhanaan kode umum seperti mengonversi rantai 0 panggilan dengan janji untuk menggunakan 1 dan 2Maaf, browser Anda tidak mendukung video HTML 5Setel 3 ke 1 untuk menonaktifkan saranTingkatkan penyelesaian dengan AIGitHub Copilot adalah alat penyelesaian kode bertenaga AI yang membantu Anda menulis kode lebih cepat dan lebih cerdas. Anda dapat menggunakan ekstensi GitHub Copilot di VS Code untuk menghasilkan kode, atau untuk belajar dari kode yang dihasilkannya GitHub Copilot memberikan saran untuk banyak bahasa dan beragam kerangka kerja, dan bekerja dengan sangat baik terutama untuk Python, JavaScript, TypeScript, Ruby, Go, C# dan C++ Anda dapat mempelajari lebih lanjut tentang cara memulai dengan Copilot di dokumentasi Copilot Setelah Anda menginstal dan mengaktifkan ekstensi Copilot, Anda dapat mengujinya untuk proyek JavaScript Anda Buat file baru - Anda dapat menggunakan File. Perintah File Baru di Palet Perintah ( F1 ). Di file JavaScript, ketik header fungsi berikut
Kopilot akan memberikan saran seperti berikut - gunakan Tab untuk menerima saran. Petunjuk tatahanPetunjuk inlay menambahkan informasi sebaris tambahan ke kode sumber untuk membantu Anda memahami apa yang dilakukan kode tersebut Petunjuk inlay nama parameter menunjukkan nama parameter dalam panggilan fungsi Ini dapat membantu Anda memahami arti dari setiap argumen secara sekilas, yang sangat membantu untuk fungsi yang menggunakan bendera Boolean atau memiliki parameter yang mudah dibaurkan Untuk mengaktifkan petunjuk nama parameter, atur 5. Ada tiga kemungkinan nilai
Petunjuk inlay tipe variabel menunjukkan tipe variabel yang tidak memiliki anotasi tipe eksplisit Pengaturan. _9Petunjuk inlay tipe properti menampilkan tipe properti kelas yang tidak memiliki anotasi tipe eksplisit Pengaturan. Petunjuk tipe parameter menunjukkan tipe parameter yang diketik secara implisit Pengaturan. Petunjuk inlay tipe pengembalian memperlihatkan tipe pengembalian fungsi yang tidak memiliki anotasi tipe eksplisit Pengaturan. Referensi CodeLensReferensi JavaScript CodeLens menampilkan jumlah referensi sebaris untuk kelas, metode, properti, dan objek yang diekspor Untuk mengaktifkan CodeLens referensi, setel Klik jumlah referensi untuk menelusuri daftar referensi dengan cepat Perbarui impor saat memindahkan fileSaat Anda memindahkan atau mengganti nama file yang diimpor oleh file lain di proyek JavaScript Anda, VS Code dapat secara otomatis memperbarui semua jalur impor yang mereferensikan file yang dipindahkan Maaf, browser Anda tidak mendukung video HTML 5Pengaturan
LinterLinters memberikan peringatan untuk kode yang tampak mencurigakan. Meskipun VS Code tidak menyertakan linter JavaScript bawaan, banyak ekstensi linter JavaScript tersedia di pasar
Pengecekan tipeAnda juga dapat memanfaatkan beberapa fungsi pemeriksaan tipe lanjutan dan pelaporan kesalahan TypeScript dalam file JavaScript biasa. Ini adalah cara yang bagus untuk menangkap kesalahan pemrograman umum. Pemeriksaan jenis ini juga mengaktifkan beberapa Perbaikan Cepat yang menarik untuk JavaScript, termasuk Tambahkan impor yang hilang dan Tambahkan properti yang hilang TypeScript mencoba menyimpulkan jenis dalam Pengecekan jenis JavaScript bersifat opsional dan ikut serta. Alat validasi JavaScript yang sudah ada seperti ESLint dapat digunakan bersamaan dengan fungsi pemeriksaan tipe bawaan Men-debugVS Code hadir dengan dukungan debug yang bagus untuk JavaScript. Setel breakpoint, periksa objek, navigasikan tumpukan panggilan, dan jalankan kode di Konsol Debug. Lihat topik Debugging untuk mempelajari lebih lanjut Debug sisi klienAnda dapat men-debug kode sisi klien menggunakan debugger browser seperti debugger bawaan kami untuk Edge dan Chrome, atau Debugger untuk Firefox Debug sisi serverSimpul Debug. js di VS Code menggunakan debugger bawaan. Setup mudah dan ada untuk membantu Anda Ekstensi populerVS Code dikirimkan dengan dukungan luar biasa untuk JavaScript tetapi Anda juga dapat memasang debugger, cuplikan, linter, dan alat JavaScript lainnya melalui ekstensi
Langkah selanjutnyaBaca terus untuk mengetahui tentang
Pertanyaan umumApakah VS Code mendukung JSX dan React Native?VS Code mendukung JSX dan React Native. Anda akan mendapatkan IntelliSense untuk React/JSX dan React Native dari file deklarasi tipe (pengetikan) yang diunduh secara otomatis dari repositori file deklarasi tipe npmjs. Selain itu, Anda dapat menginstal ekstensi React Native yang populer dari Marketplace Untuk mengaktifkan pernyataan impor ES6 untuk React Native, Anda perlu menyetel opsi compiler Apakah VS Code mendukung bahasa pemrograman Dart dan framework Flutter?Ya, ada ekstensi VS Code untuk pengembangan Dart dan Flutter. Anda dapat mempelajari lebih lanjut di Flutter. dokumentasi pengembang IntelliSense tidak berfungsi untuk pustaka eksternal
Impor Gaya ES6 tidak berfungsi Ketika Anda ingin menggunakan impor gaya ES6 tetapi beberapa file deklarasi tipe (pengetikan) belum menggunakan ekspor gaya ES6, maka setel opsi kompiler TypeScript
Bisakah saya men-debug JavaScript yang diperkecil/di-uglifikasi?Ya kamu bisa. Anda dapat melihat ini berfungsi menggunakan peta sumber JavaScript di Node. Topik debug js Bagaimana cara menonaktifkan Validasi Sintaks saat menggunakan konstruksi non-ES6?Beberapa pengguna ingin menggunakan konstruksi sintaksis seperti operator pipeline ( Dengan Bisakah saya menggunakan alat JavaScript lain seperti Flow?Ya, tetapi beberapa fitur bahasa Flow seperti pemeriksaan jenis dan kesalahan dapat mengganggu dukungan JavaScript bawaan VS Code. Untuk mempelajari cara menonaktifkan dukungan JavaScript bawaan VS Code, lihat Bagaimana cara membuat. berkas JS?Cara membuat a. . Buka notepad Tempelkan fungsi Anda di dokumen baru. . Buka menu "file" dan "simpan sebagai" Bagaimana cara membuat file js di Notepad?Berikut adalah proses langkah demi langkah untuk menyimpan file js di notepad. . Buka Notepad dengan menekan Window+R dari PC Anda Tulis program javaScript Tekan ctrl+S untuk menyimpan file di sistem Anda Setelah menekan ctrl+S ia akan menanyakan nama file Anda Beri nama file dengan. ekstensi JS i. e. "Halo. js" Bagaimana cara membuat. JS di Visual Studio?Tambahkan file proyek baru . Dengan proyek Anda terbuka di Visual Studio, klik kanan pada folder atau node proyek Anda di Solution Explorer (panel kanan), dan pilih Add > New Item Di kotak dialog File Baru, di bawah kategori Umum, pilih jenis file yang ingin Anda tambahkan, seperti File JavaScript, lalu pilih Buka Bagaimana cara membuat file js di terminal?berkas js. . Pergilah ke Node. js, unduh, dan instal file paket node Buat folder proyek baru di direktori kerja Anda Arahkan ke lokasi proyek di terminal Anda dan jalankan npm init -y. Perintah di atas akan menghasilkan sebuah paket. json dengan kode di bawah di dalamnya |