Melinting JavaScript di Visual Studio

Linting JavaScript dan TypeScript di Visual Studio didukung oleh ESLint. Jika Anda baru menggunakan ESLint, Anda dapat memulai dengan memeriksa dokumentasi .

Mengaktifkan dukungan linting

Untuk mengaktifkan dukungan linting di Visual Studio 2022 atau versi yang lebih baru, aktifkan setelan Enable ESLint di Alat > Opsi > Editor Teks > JavaScript/TypeScript > Linting.

Di halaman opsi, Anda juga dapat memodifikasi kumpulan file yang ingin Anda lint. Secara default, semua ekstensi file yang dapat dilintir (.js, .jsx, .ts, .tsx, .vue, .html) akan dilintir. Editor berbasis HTML LSP harus diaktifkan untuk menautkan file Vue dan HTML. Pengaturan yang sesuai dapat ditemukan di Alat > Opsi > Lingkungan > Fitur Pratinjau>editor berbasis HTML LSP.

Anda dapat mengambil alih opsi ini dalam beberapa jenis proyek, seperti templat proyek React mandiri . Dalam proyek-proyek ini, Anda dapat menggantikan pengaturan dari halaman Alat > Opsi dengan menggunakan properti proyek:

Menginstal dependensi ESLint

Setelah linting diaktifkan, dependensi yang diperlukan perlu diinstal. Dependensi termasuk paket npm ESLint dan plugin lain yang berlaku untuk proyek Anda. Paket ini dapat diinstal secara lokal di setiap proyek tempat Anda ingin mengaktifkan linting, atau Anda dapat menginstalnya secara global menggunakan npm install -g eslint. Namun, penginstalan global tidak disarankan karena plugin dan konfigurasi yang dapat dibagikan selalu perlu diinstal secara lokal.

Mulai dari Visual Studio 2022 versi 17.7 Pratinjau 2, Anda juga dapat menggunakan pengaturan Jalur ESLint di Alat > Opsi > Editor Teks > JavaScript/TypeScript > Linting untuk menentukan direktori tempat memuat ESLint. Pengaturan ini berguna ketika ESLint diinstal secara global, di mana Anda dapat mengatur jalur yang sesuai ke C:\Program Files\nodejs\node_modules.

Bergantung pada file yang ingin Anda lint, plugin ESLint lainnya mungkin diperlukan. Misalnya, Anda mungkin memerlukan TypeScript ESLint, yang memungkinkan ESLint untuk berjalan pada kode TypeScript dan menyertakan aturan yang khusus untuk informasi jenis tambahan.

Saat ESLint diaktifkan tetapi paket npm ESLint tidak ditemukan, bilah emas ditampilkan. Pesan ini memungkinkan Anda menginstal ESLint sebagai dependensi pengembangan npm lokal.

Demikian pula, ketika file .eslintrc tidak ditemukan, bilah emas ditampilkan. Pesan ini memungkinkan Anda menjalankan wizard konfigurasi yang menginstal plugin yang berlaku untuk proyek saat ini.

Menonaktifkan aturan linting dan perbaikan otomatis

Anda dapat menonaktifkan kesalahan linting pada baris atau file tertentu . Anda dapat menonaktifkan kesalahan dengan menggunakan menu bola lampu Tindakan Cepat:

Ilustrasi berikut menunjukkan hasilnya jika Anda menonaktifkan kesalahan linting untuk baris kode yang dipilih.

Selain itu, tindakan perbaikan kode otomatis memungkinkan Anda menerapkan perbaikan otomatis untuk mengatasi kesalahan linting yang bersangkutan.

Pemecahan masalah

Anda dapat membuka panel Ekstensi Bahasa ESLint di jendela Output untuk melihat pesan kesalahan atau log lain yang mungkin menjelaskan masalahnya.