Geliştiriciler için SublimeLinter Kullanma Kılavuzu
Linter modern web gelişiminde vazgeçilmez bir araçtır. Kodları yazarken hataları kontrol altında tutmamıza ve en iyi uygulamaları uygulamamıza yardımcı olur. SublimeText kullanıyorsanız, SublimeLinters'ı kurmanızı şiddetle tavsiye ederim. Yıllar boyunca, SublimeLinters, SublimeText'te bir elektrikli el aleti takımı haline geldi ve çeşitli programlama dillerinin işaretçilerine bağlanan resmi paketleri getirdi..
Bu eğitimde, SublimeLinter'ın nasıl kurulacağını ve ayarlanacağını göreceğiz. Hadi başlayalım.
Başlamak
SublimeLinter 4'ü kurmanın en kolay yolu SublimeText Paket Kontrolüdür. O zamandan beri SublimeLinter 3, her linter ayrı olarak kurulmalıdır. Bu, SublimeLinter’in yalnızca çalıştırarak daha verimli çalışmasını sağlar. linter kurduğumuz.
Projelerimde çoğunlukla HTML, CSS, JS ve PHP kullandığım için bu diller için linters kurmak istiyorum. İçinde Paket kontrolü, SublimeLinter'i aşağıdaki eklentilerle birlikte kurarım:
- SublimeLinter-html-düzenli
- SublimeLinter-stylelint
- SublimeLinter-eslint
- SublimeLinter-php
Ardından, bu eklentilerin çalışması için, linter
HTML Tidy, CSSLint, JSHint ve PHP CLI dilleri için.
OSX kullananlar için, Tidy ve PHP sisteme önceden yüklenmiştir. Doğrulamak için, aşağıdaki iki komutu arka arkaya çalıştırın..
derli toplu - version php --version
Bu komutlar size Tidy ve PHP versiyonlarını gösterir. Bunları Sublime Text'de kullanmaya devam edebilirsiniz..
Windows veya Linux kullanıyorsanız veya yüklü değilse, aşağıdaki talimatları uygulayabilirsiniz..
HTML Tidy'i Yükleme
HTML Tidy'i yüklemek için:
- OSX’te, bu komutu Terminal'de çalıştır
demlemek kurulum homebrew / dupes / düzenli
- Linux'ta, bu komutu kullan
sudo apt-get tidy kurulum
. - Windows'ta, EXE yükleyicisini TidyBatchFiles yazılımından alabilirsiniz.
PHP CLI'yı yükleme
- OSX kullanıcıları PHP'yi sisteme kurabilirler.
curl -s http://php-osx.liip.ch/install.sh | bash -s 5.5
Komut. Bu, yazma sırasında en son sürüm olan PHP 5.5'i yükleyecektir.. - Linux kullanıcılar bu kapsamlı öğreticiyi DigitalOcean'dan takip edebilir.
- Windows kullanıcıları için, Yükleyiciyi buradan indirebilirsiniz..
Styleint Kurulumu
Daha sonra, CSS dosyalarımızdaki en iyi uygulamaları kontrol etmemize ve uygulamamıza izin verecek olan Stylelint adlı CSS linter'i yükleyeceğiz. Aşağıdaki talimat üç platformda da takip edilebilir: OSX, Windows ve Linux. Node.js’i NPM’ye zaten yüklediğinizi farz ediyorum.
Stylelint'i yüklemek için aşağıdakileri çalıştırın:
npm install -g stylelint
Ayrıca proje dizininize bir Stylelint konfigürasyon dosyası eklemeniz gerekecek, ayrıca stylelint-config-standard gibi önceden tanımlanmış bir konfigürasyon kurun. Bunlar yapılandırıldıktan sonra, aşağıdaki gibi vurgulanmış hataları bulmalısınız..
ESLint'i yükleme
Ayrıca, JavaScript için modern ve yapılandırılabilir bir linter olan ESLint'i yükleyeceğiz. Bu, JavaScript yazarken olası hataları yakalamanın yanı sıra en iyi uygulamaları uygulamamıza yardımcı olacaktır. ESLint'i yüklemek ayrıca NPM ile birlikte Node.js gerektirir..
Yüklemek için.
npm yüklemek -g eslint
Benzer şekilde, projenize ESLint yapılandırmasını eklemeniz veya eslint-config-recommended gibi önceden tanımlanmış yapılandırmaları kullanmanız gerekir..
Biz tamamıyla hazırız. Başlayabiliriz pamuklanan SublimeLinter 4 kullanarak SublimeText'te HTML, CSS, JS ve PHP.
SublimeLinter 4'teki Yeni Özellikler
SublimeLinter 4 birkaç yeni özellik sunar ve kolayca farkedilebilecek olan şey, açılan dosyaların tüm hatalarını gösteren paneldir. Mac’te iseniz, Command + Ctrl + A tuşlarına basın. Windows ve Linux'ta Ctrl + K, Ctrl + A tuşlarına basabilirsiniz..
Kısayol tuşu, aşağıdaki ekran görüntüsünde gösterildiği gibi bir hata listesi gösterecektir..
Kullan ↑ ve ↓ Listede gezinmek için, sayfa, hatanın oluştuğu tam satıra ilerleyecektir..
Daha iyi görsel
Artık editördeki olukların üzerine veya sadece hata mesajını görüntülemek için hatanın olduğu satırın üzerine gelebiliriz. Bu önceki sürümde mümkün değildi.
Son derece yapılandırılabilir
SublimeLinter 4 şimdi her zamankinden daha yapılandırılabilir. Örneğin, şimdi özel yapabiliriz “stilleri” linter konfigürasyonunun her birine. Bu, her linter için simgeler, renk, tüy bırakma modu, yol ve ortam değişkenlerini ayrı ayrı ayarlamamızı sağlar.
Ek Referans
Umarım bu kısa tanıtım SublimeLinter ile çalışmaya başlamanıza yardımcı olabilir. Daha fazla gelişmiş malzeme istiyorsanız referansa da başvurabilirsiniz..
- SublimeLinter Resmi Doküman
- Yazılım ve Programlamada Lint - WikiPedia
- SublimeLinter Depoları