JavaScript Linting'i Visual Studio'da Yapmak

Visual Studio'da JavaScript ve TypeScript linting, ESLinttarafından desteklenir. ESLint'i kullanmaya yeni başladıysanız, belgelerinebakarak başlayabilirsiniz.

Lint desteğini etkinleştirme

Visual Studio 2022 veya sonraki sürümlerde lint desteğini etkinleştirmek için, bölümünde > Etkinleştir ayarını etkinleştirin.

Seçenekler sayfasında, lint etmek istediğiniz dosya kümesini de değiştirebilirsiniz. Varsayılan olarak, lint edilebilen (.js, .jsx, .ts, .tsx, .vue, .html) tüm dosya uzantıları lintlenir. Vue ve HTML dosyalarının lint edilmesi için HTML LSP tabanlı düzenleyici etkinleştirilmelidir. İlgili ayar Araçları > Seçenekleri > Ortam > Önizleme Özellikleri>HTML LSP tabanlı düzenleyicibulunabilir.

tek başına React proje şablonları gibi bazı proje türlerinde bu seçenekleri geçersiz kılabilirsiniz. Bu projelerde, proje özelliklerini kullanarak Araçları > Seçenekleri sayfasından ayarları geçersiz kılabilirsiniz:

ESLint bağımlılıklarını yükleme

Lint etkinleştirildikten sonra gerekli bağımlılıkların yüklenmesi gerekir. Bağımlılıklar, ESLint npm paketi ve projeniz için geçerli olan diğer eklentileri içerir. Bu paket, lint özelliğini etkinleştirmek istediğiniz her projeye yerel olarak yüklenebilir veya npm install -g eslintkullanarak genel olarak yükleyebilirsiniz. Ancak, eklentilerin ve paylaşılabilir yapılandırmaların her zaman yerel olarak yüklenmesi gerektiğinden genel yükleme önerilmez.

Visual Studio 2022 sürüm 17.7 Preview 2'den başlayarak, ESLint'in yüklendiği dizini belirtmek için JavaScript/TypeScript Linting > Araçları > Seçenekleri > Metin Düzenleyicisi'ndeki > ayarını da kullanabilirsiniz. Bu ayar, ESLint genel olarak yüklendiğinde yararlıdır; burada ilgili yolu C:\Program Files\nodejs\node_modulesolarak ayarlayabilirsiniz.

Lint etmek istediğiniz dosyalara bağlı olarak, diğer ESLint eklentileri gerekebilir. Örneğin, ESLint'in TypeScript kodunda çalışmasını sağlayan ve ek tür bilgilerine özgü kurallar içeren TypeScript ESLintgerekebilir.

ESLint etkinleştirildiğinde ancak ESLint npm paketi bulunamadığında altın renkli bir çubuk görüntülenir. Bu ileti, ESLint'i yerel npm geliştirme bağımlılığı olarak yüklemenize olanak tanır.

Benzer şekilde, .eslintrc dosyası bulunamadığında altın renkli bir çubuk görüntülenir. Bu ileti, geçerli proje için geçerli eklentileri yükleyen bir yapılandırma sihirbazı çalıştırmanızı sağlar.

Lint kurallarını ve otomatik düzeltmeleri devre dışı bırak

belirli bir satırda veya dosyadalint hatalarını devre dışı bırakabilirsiniz. Hızlı eylemler ampul menüsünü kullanarak hataları devre dışı bırakabilirsiniz:

Aşağıdaki çizim, seçilen kod satırında bir lint hatasını devre dışı bıraktığınızda elde edilen sonucu göstermektedir.

Ayrıca, otomatik düzeltme kodu eylemleri, ilgili lint hatasını düzeltmek için bir otomatik düzeltme uygulamanıza olanak sağlar.

Sorun giderme

Sorunu açıklayacak hata iletilerini veya diğer günlükleri görmek için Çıkış penceresinde ESLint Dil Uzantısı bölmesini açabilirsiniz.