Aracılığıyla paylaş

Visual Studio'da JavaScript Linting

  • Makale

Visual Studio'da JavaScript ve TypeScript linting ESLint tarafından desteklenir. ESLint'i kullanmaya yeni başladıysanız, belgelerine göz atarak başlayabilirsiniz.

Lint desteğini etkinleştirme

Visual Studio 2022 veya sonraki sürümlerinde lint desteğini etkinleştirmek için Araçlar Seçenekleri Metin Düzenleyicisi > JavaScript/TypeScript > Linting'de ESLint'i Etkinleştir ayarını etkinleştirin.>>

Screenshot of linting Tools Options page.

Seçenekler sayfasında, lint etmek istediğiniz dosya kümesini de değiştirebilirsiniz. Varsayılan olarak, linted (.js, .jsx, .ts, .tsx, .vue, .html) tüm dosya uzantıları linted olur. 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'nde bulunabilir.

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:

Screenshot of linting project properties.

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 paketini 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 kullanarak npm install -g eslintgenel 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 Önizleme 2'den başlayarak, ESLint'in yüklendiği dizini belirtmek için Araçlar Seçenekler Metin Düzenleyicisi > JavaScript/TypeScript > Linting'deki ESLint Yolu ayarını da kullanabilirsiniz.>> Bu, ESLint genel olarak yüklendiğinde yararlıdır; burada ilgili yolu C:\Program Files\nodejs\node_modules olarak ayarlayabilirsiniz.

Lint yapmak 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 ESLint'e ihtiyacınız olabilir.

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

Screenshot of Install ESLint gold bar.

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

Screenshot of Run ESLint wizard gold bar.

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

Belirli bir satır veya dosyada lint hatalarını devre dışı bırakabilirsiniz. Hızlı eylemler ampul menüsünü kullanarak hataları devre dışı bırakabilirsiniz:

Screenshot of linting Quick Actions.

Aşağıdaki çizimde, seçilen kod satırı için lint hatasını devre dışı bırakırsanız sonuç gösterilir.

Screenshot of disabled linting rule.

Ayrıca, otomatik düzeltme kodu eylemleri, ilgili lint hatasını gidermek için 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.