Kullanıcı Kılavuzu İptal

Lint kodu

Ara

Son güncelleme: 21 May 2021

Adobe Dreamweaver'da HTML, CSS, DW şablonları ve JS dosyalarına Linting özelliğini uygulamayı öğrenin. Çıktı panelinde hata ve uyarıları görüntüleyin ve tek bir tıklamayla hatalı kod satırlarına atlayın.

İster acemi ister deneyimli bir kodlayıcı olun, yanlışlıkla veya bilgi eksikliği nedeniyle kodunuzda hatalar olması mümkündür. Web sayfası veya sayfanın bir bölümü beklediğiniz gibi görünmediğinde sözdizimi veya mantık hatalarını bulmak için kodda hata ayıklamak zorunda kalırsınız. Hata ayıklama son derece zorlu ve özellikle karmaşık uygulamalarda zaman alan bir işlem olabilir.

Dreamweaver sık karşılaşılan hatalarda Linting özelliği yardımıyla hata ayıklamayı basit ve kolay hale getirir. Linting kodu analiz ederek olası hataları veya şüpheli kod kullanımını işaretleme işlemidir. Dreamweaver'da Linting yoluyla işaretlenen bazı hatalara örnek olarak HTML sözdizimi hataları, CSS'de ayrıştırma hataları veya JavaScript dosyalarındaki uyarılar gösterilebilir.

Bulunan hatalar ve uyarılar çalışma alanının alt kısmına sabitlenmiş ayrı bir panelde (Çıktı paneli) listelenir. Bu paneldeki her satır hatanın oluştuğu kod bölümüne giderek kodun bulunmasını ve düzeltilmesini kolaylaştırır. Ayrıca, hatalı kodun satır numaraları kırmızı ile ve uyarılar da sarı ile vurgulanır. Fareyi vurgulanan satır numaralarının üzerine getirdiğinizde hatanın veya uyarının önizlemesi görüntülenir.

Linting düzenlendiğinde özelliğiyle, kodları düzenlerken hatalar ve uyarılar eşzamanlı olarak çıkış panelinde görüntülenir.

Dreamweaver HTML (.htm ve .html), CSS, DW Şablonları ve JavaScript dosyalarına Linting özelliğini uygulamanıza olanak tanır.

Bu dosyalarda kodunuza Linting özelliğini uygulamak için şu adımları gerçekleştirin:

HTML, CSS, DW Şablonları ve JS yapılandırma dosyalarını düzenleyerek Linting kurallarını belirtin. Daha fazla bilgi için bkz. Linting kurallarını belirtme.
Linting seçeneğini etkinleştirin veya devre dışı bırakın. Dosyalar düzenlenirken, yüklenirken veya kaydedilirken Linting özelliğini uygulayabilirsiniz.
- Linting düzenlendiğinde özelliğini etkinleştirmek veya devre dışı bırakmak için Tercihler > Linting seçeneğini kullanın. Daha fazla bilgi için bkz. Linting özelliğini etkinleştirme ve tercihleri ayarlama.

Dosyalarda bulunan hatalar ve uyarılar çıktı panelinde görüntülenir. Daha fazla bilgi için bkz. Linting sonuçları ve Çıktı paneli.

Linting'i etkinleştir, Linting düzenlendiğinde ve Linting kurallarını belirtme

Düzenle > Tercihler (Win) veya Dreamweaver > Tercihler (Mac) seçeneğini tıklatın. Kategori listesinde Linting'i tıklatın, Linting'i etkinleştir'i seçin ve Uygula'yı tıklatın.

Linting düzenlendiğinde

Dreamweaver'da, Linting düzenlendiğinde özelliği varsayılan olarak etkindir. Devre dışı bırakmak için Düzenle > Tercihler (Win) veya Dreamweaver > Tercihler (Mac) seçeneğini tıklatın. Kategori listesinde Linting'i tıklatın,Linting düzenlendiğinde'yı seçin ve Uygula'yı tıklatın.

Linting kurallarını belirtme

Karşılık gelen yapılandırma dosyalarında Linting kurallarını düzenleyerek HTML, CSS ve JS dosyalarına Linting özelliğini uygulayabilirsiniz:

HTML: DW.htmlhintrc
CSS: DW.csslintrc
JS: .eslintrc

Bu dosyalara erişmek ve dosyaları düzenlemek için şu adımları gerçekleştirin:

Düzen > Tercihler (Win) veya Dreamweaver > Tercihler (Mac) öğesini tıklatın.
Kategori listesinde Linting'i seçin.
Kural Kümesini Düzenle bölümünde, gerekli dosya türünü ve sonra da Düzenle ve Değişiklikleri Uygula'yı tıklatın.

Karşılık gelen yapılandırma dosyası Dreamweaver'da açılır.
Yapılandırma dosyalarındaki Linting kurallarını düzenleyin veya yeni kural ekleyin. Linting kuralları hakkında daha fazla bilgi için aşağıdaki belgelere başvurun:
- HTML Linter: https://github.com/yaniswang/HTMLHint/wiki/Rules
- CSS Linter: https://github.com/CSSLint/csslint/wiki/Rules
- JS Linter: https://eslint.org/docs/rules
Bu yapılandırma dosyalarında, görüntülenecek hata ve uyarı türlerini de ayarlayabilirsiniz.

Not:

Dreamweaver 19.0'dan önceki sürümler için Linting kuralları yapılandırma dosyası JS: DW.jshintrc dosyasıdır. http://jshint.com/docs/options/ bağlantısına başvurabilirsiniz

ECMAScript 6 linting seçeneği

Dreamweaver, ECMAScript 6 sözdizimini destekler. Dreamweaver ayrıca JavaScript lint aracı olarak ESLint varsayılanıyla ECMAScript kodunun lint işlemini de destekler.

Site > Siteleri Yönet'i tıklatın.

Siteleri Yönet iletişim kutusundan web sitesini seçme
Site Yapısı iletişim kutusunun sol bölmesinden Gelişmiş Ayarlar'ı seçin.
Sol bölmedeki Gelişmiş Ayarlar altından JS Linting seçeneğini belirleyin.

ECMAScript Sürümü'nün bitişiğindeki açılır listeyi tıklatıp 3, 5 veya 6 seçeneğini belirleyebilirsiniz. Dreamweaver, seçtiğiniz sürüm için varsayılan kural kümesini kullanır.

ECMAScript sürümünü seçme
Kural kümesini özelleştirmek için açılır listeden Yapılandırma Dosyası'nı seçip Yapılandırma Dosyasını Düzenle'yi tıklatabilirsiniz.

JS Linting Yapılandırması dosyasını düzenleme

Site Yapısı'nda yaptığınız değişiklikler kaydedilir ve site kökünde yoksa yeni bir .eslintrc.js dosyası oluşturulur.

.eslintrc.js dosyası düzenlenmek üzere site kökünde açılır. Daha fazla bilgi için bkz. ESLint kuralları.

.eslintrc.js yapılandırma dosyası
Not:
Site Yapısı iletişim kutusunda tanımlanan ECMAScript Sürüm ayarları, site kökünde kullanılan .eslintrc.js dosyasına göre daha önceliklidir.

Sitede ESLint yapılandırma dosyalarınız yoksa Dreamweaver, kök dizini oluşturan tüm konumlarda yapılandırma dosyalarını arar.

Yapılandırma dosyasının basamaklı yapısı ve hiyerarşisi hakkında daha fazla bilgi için bkz. ESLint sitesi.

Linting sonuçları ve Çıktı paneli

Linting sonuçları (hatalar ve uyarılar) Çıktı panelinde listelenir. Çıktı paneli tüm varsayılan çalışma alanlarının alt kısmında, sabitlenmiş modda kullanılabilir. Çıktı paneli kapalıysa aşağıdaki işlemlerden birini gerçekleştirerek açabilirsiniz:

Belge penceresi durum çubuğunda linting durum simgesini tıklatarak
Shift+F6 klavye kısayolunu kullanarak
Pencere > Sonuçlar > Çıktı'yı kullanarak

Çıktı paneli ve linting simgesi — Çıktı paneli ve Linting simgesi

Durum çubuğundaki Linting simgesi Linting sonuçlarını gösterir:

Kırmızı: Geçerli belgede hatalar ve uyarılar var
Sarı: Geçerli belgede yalnızca uyarılar var
Yeşil: Geçerli belgede hiç hata yok

Not:

Durum çubuğundaki Linting simgesi kırmızı veya sarı ise (yeşil değilse) bu simgeyi kullanarak da Çıktı panelini açıp kapatabilirsiniz.

Hataları veya uyarıları içeren satırlar sırasıyla kırmızı ve sarı ile vurgulanır. Çıktı panelinde bir mesajı çift tıklatarak, hatanın oluştuğu satıra atlayabilirsiniz. Kod görünümünde, fareyi hatalı kodun bulunduğu satır numaralarının üzerine getirerek hatanın veya uyarının önizlemesini de görebilirsiniz.

Çıktı panelinde aynı anda 50 mesaj listelenir ve hatalar uyarılardan önce yer alır. Hatalar düzeltildikçe, paneldeki liste de kaydırılarak sonraki hata görüntülenir.

Daha hızlı ve daha kolay yardım alın

Yeni kullanıcı mısınız?