Bir site geliştirmeye başladığınız anda kullanacağınız ilk araç, not defteri kadar basit veya gelişmiş bir IDE gibi bir metin düzenleyici olacaktır.
Bu bölümde Addy & Matt Sublime Text için kullandıkları eklenti koleksiyonuna bakıyor ve her birinin iş akışlarına nasıl yardımcı olduğunu tartışıyorlar.
Paket Kontrolü
Bölümde referans verilen paketleri (veya eklentileri) almak için Package Control'ü yüklemeniz gerekir. Yüklemesi kolay ve kolaydır. Bununla ilgili talimatları burada bulabilirsiniz.
JSHint
JSHint, JavaScript'inizi inceleyip kodunuzdaki olası hataları veya kötü uygulamaları vurgulayan bir JavaScript linter aracıdır.
Örneğin, yanlışlıkla aşağıdaki gibi bir değişken adını yanlış yazdıysanız JSHint, fo öğesinin hiçbir zaman tanımlanmadığını ve hataya neden olacağını belirtir.
var foo = { bar: 'Hello, World.' };
var msg = fo.bar;
JSHint eklentisi, ilgili metnin etrafında sarı bir kutu görüntüleyerek sorunları belirtir. İmlecinizi bu kod parçasının içine yerleştirmeniz, Sublime'ın sol alt kısmında bir hata mesajının gösterilmesine neden olur.
Yakaladığı diğer sorunlar şunlardır:
- Tanımlanmış ancak hiç kullanılmayan değişkenler
- Döngülerin içinde işlev oluşturmaktan kaçınma
- Doğru karşılaştırma yöntemlerini kullanma
SublimeLinter-JSHint Paketi'ni yüklemek için SublimeLinter paketini de yüklemeniz ve SublimeLinter-JSHint Paket sayfasındaki kurulum talimatlarını uygulamanız gerekir.
Bazı geliştiriciler JSHint Gutter eklentisini de eklemeyi faydalı bulabilir. JSHint sorunu olan herhangi bir satırın çukuruna küçük bir nokta yerleştirir.
JSCS
JSCS, JavaScript'inizin belirli bir kodlama stilini izlemediği yerleri vurgular.
Örneğin JSCS, anahtar kelimelerden sonra boşluk kullanılıp kullanılmayacağını (ör. "if") tanımlamak veya parantezlerin bir yöntemin aynı satırında mı yoksa yeni satırında mı olması gerektiğini tanımlamak için kullanılabilir.
SublimeLinter-JSCS paketi, tüm sorunları JSHint'e benzer bir tarzda satır içinde vurgulayarak sorunların düzeltilmesini kolaylaştırır.
Bu, ekip çalışması söz konusu olduğunda son derece faydalıdır çünkü herkes aynı stil kılavuzunu takip edebilir ve kodunuzun tutarlı olmasını sağlayabilir.
En iyisi de JSCS-Formatter paketi ile sayfadaki tüm sorunları ctrl + shift + p tuşuna basıp "JSCS Biçimlendirici: Bu dosyayı biçimlendir" yazıp Enter tuşuna basarak otomatik olarak düzeltebilirsiniz. Daha fazla bilgiyi Addy'nin blog yayınında bulabilirsiniz.
Renk Vurgulayıcı
Renk vurgulayıcı, CSS veya Sass'ınızdaki renk tanımlarının arka planına renk ekler.
Fareyle üzerine geldiğinizde alt çizginin alt çizgi olarak gösterilip gösterilmeyeceğini veya tanım arka planında her zaman renk görüntülenip görüntülenmeyeceğini belirleyebilirsiniz. Bunun için "Paket Ayarları" > "Renk İşaretleyici" > "Ayarlar - Varsayılan"a giderek başlangıç ayarlarınızı görebilir ve "Ayarlar - Kullanıcı"dan ayarlarınızı değiştirebilirsiniz.
Arka planın tam olarak vurgulanması için aşağıdakileri "Ayarlar - Kullanıcı" dosyasına ekleyin:
{
"ha_style": "filled"
}
Çatı Oluğu Rengi
Kulak Rengi, renk vurgulayıcının alternatifidir. Rengi renk değişkeninin üzerinde göstermek yerine rengi bu çizginin karosuna yerleştirir.
Renk Seçici
Ekranınızdan renk seçmek için hızlı ve kolay bir yönteme ihtiyacınız varsa Renk Seçici Paketi tam size göre olabilir.
ctrl + shift + c tuşuna bastığınızda renk seçici elde edersiniz.
AutoFileName
AutoFileName, yazdığınız sırada olası dosyaların listesini sunan basit bir küçük eklentidir. Bir resim adı yazmaya veya CSS ya da JS dosyası eklemeye çalışıyorsanız bu yöntem, size zaman kazandıracağı ve daha da önemlisi yazım hatası riskini azaltacağı için çok kullanışlıdır.
Otomatik önek
Hepimiz ön ekli bir CSS özelliği eklemeyi unuttuğumuzu fark etmişizdir. Autoprefixer sayesinde ihtiyacınız olan tüm ön ekleri CSS'nizde kolayca çalıştırabilirsiniz.
Demek ki artık bu yolu izliyoruz.
.container-thingy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
..ekleyin. Bunun için ctrl + shift + p tuşuna basıp "CSS'yi otomatik ön ekle" yazıp Enter tuşuna basmanız yeterlidir.
.container-thingy {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
Ayrıca, paket ayarlarında desteklemek istediğiniz tarayıcıları ve tarayıcı sürümlerini de tanımlayabilirsiniz. Daha fazla bilgi için Paket Kontrolü sayfasına göz atın.
Diğer işlemler
Sublime Text için mevcut olan bir sürü başka eklenti vardır. Bu nedenle Package Control'ü keşfetmeyi unutmayın.
Daha fazla öneri ve ipucu için WesBos'un klavye kısayolları ve Sublime Text için diğer eklentiler hakkındaki harika slayt sunumunu inceleyin.
WesBos da "Sublime Text for the Power User" başlıklı bir kitap yazdı. Bu kitap, sizin gibi değerli kullanıcıların da ilgisini çekebilir :)