Özgür Özer

Junior full stack developer

Front-end Developer'lar İçin Sublime Text Paketleri

Faydalı olduğunu düşündüğüm paketlerden bir liste hazırladım. Şimdi hep beraber neler olduklarına bakalım.

Package Control kuruluysa ve daha önce paket kurduysak aşağıdaki adımı atlayabiliriz.

Package Control Kurulumu

Package Control, Sublime’ın paket yöneticisidir. Sublime ile beraber otomatik olarak kurulmadığı için manuel kurmamız gerekir. Buraya tıkladıktan sonra açılan sayfadan versiyonumuza (2/3) uygun olan bölümdeki python kodlarını kopyalıyoruz. Sublime içerisinden View / Show Console diyoruz. Kopyaladığımız kodları altta açılan bölüme yapıştırıp ENTER tuşuna bastıktan sonra kurulum işlemini tamamlamış oluyoruz.

Paket Kurulumu

Paket kurulumu için Sublime’dan Tools / Command Palette dedikten sonra install yazıp Package Control: Install Package bölümüne giriyoruz. Artık kurmak istediğimiz paketin ismini yazıp ENTER tuşuna basmamız yeterli olacaktır.

1. Emmet

Emmet; daha hızlı HTML, XML, CSS kodları yazmamıza olanak sağlayan bir dildir. Dil diyorum çünkü daha hızlı kod yazabilmek için Emmet’çe öğrenmemiz gerekiyor. Neyden bahsettiğimi daha iyi anlayabilmek için şunu yan sekmede açalım.

Beyaz ve gri renklerde kodlar görüyoruz. Sublime’a beyaz renkli kodları girip TAB tuşuna bastığımızda Emmet otomatik olarak gri renkteki kodları üretir. CSS ve jQuery’den aşina olduğumuz selector yapısında olduğu için öğrenimi oldukça kolaydır.

Emmet bugün bir çok platformda kullanabileceğimiz bir araç haline dönüşmüştür. Sublime haricinde Atom, Brackets, Edit Plus, Notepad++, Dreamweaver gibi programlarda; CodeAnywhere, CodePen, CSSDeck, JSBin, JSFiddle gibi online servislerde de kullanabiliriz.

Emmet - GitHub
Emmet - Package Control

2. SideBarEnhancements

Side bar’daki dosya ve klasörlerin sağ tık menüsüne kes, kopyala, yapıştır, çoğalt, taşı, birlikte aç ve daha bir çok ekstra özellik ekleyip side bar’ı bir nevi dosya yöneticine çeviren oldukça kullanışlı bir pakettir. Dosya yöneticiliği dışında içerisinde çok hoş bir özelliği daha var.

Yerel bilgisayarımızda PHP gibi sunucu tabanlı bir dille çalışıyorsak dosyalarımızı tarayıcıda çalıştırmak için adres satırının başına localhost koyarak http://localhost/project1.com/test.php şeklinde yazıp gireriz. Adresi manuel girmek çok sevdiğimiz bir şey değildir. İşte tam da bu noktada işimizi kolaylaştıracak bir özellikten bahsediyorum.

Bu özelliği kullanabilmek için öncelikle side bar’da ekli olan projemiz içerisinden herhangi bir dosyaya sağ tıklayıp Project / Edit Preview URLs dedikten sonra projemizin localhost ve sunucu adreslerinin yollarını giriyoruz. Daha sonra Sublime’da o projeyle alakalı herhangi bir dosya üzerinde çalışıyorken F12 tuşuna bastığımızda tarayıcıda otomatik olarak http://localhost/project1.com/test.php adresi, ALT + F12 tuşlarına bastığımızda ise http://project1.com/test.php şeklinde internet üzerindeki hali açılır.

SideBarEnhancements - GitHub
SideBarEnhancements - Package Control

3. BracketHighlighter

İsminden de anlaşılabileceği üzere bu paket seçili etiketlerimizin vurgulayıcı bir şekilde görünmesini sağlar. Karmaşık kodlarla çalışırken etiketlerimizin başlangıç ve bitiş yerlerini rahatlıkla görebilir, klavye kısayollarıyla başa/sona gidip gelebilir, etiket başlangıç ve bitişi arasındaki kod öbeğini seçtirebilir ve seçili etiketi silip içeriğini bir tab sola taşıyabilir ve etiketlerle ilgili daha bir çok işi kolay yoldan yapabiliriz.

BracketHighlighter - GitHub
BracketHighlighter - Package Control

4. SublimeLinter

SublimeLinter da yine isminden anlaşılacağı üzere bir kod linting paketidir. Kodlarımızın daha temiz ve hatasız olması için yazılım esnasında bize oldukça yardımcı olur. Hata yaptığımız anlarda satır başlarında kırmızı veya sarı renkli noktalarla bize anlık uyarı verir. Bu sayede kodlarımızın doğruluğunu yazılım esnasında debug edebiliriz.

SublimeLinter’ı kurduktan sonra lint işleminin çalışmasını istediğimiz programla dillerini sırayla SublimeLinter-jshint, SublimeLinter-php vs. şeklindeki paketleri kurarak yapıyoruz.

SublimeLinter - GitHub
SublimeLinter - Package Control

5. FTPSync

Dosyalarımızı düzenli bir şekilde FTP’ye yüklememiz gerekiyorsa bazı durumlarda klasik FTP programları işlerimizi oldukça yavaşlatır. FTPSync paketi ekstra bir FTP programına gerek kalmadan tüm işleri Sublime içerisinden çok pratik şekillerde yapabilmemizi sağlar. Paket içerisinden gerekli ayarları yaptıktan sonra, çalıştığımız dosya içerisinden CTRL + S veya CMD + S tuşlarına basmamız dosyamızın kaydolduktan sonra otomatik olarak FTP’ye yüklenmesini sağlar.

FTPSync - GitHub
FTPSync - Package Control

6. Color Highlighter

Bu paketle renk kodlarımızı (color: #999;) salt metin yerine renkli görebilir, seçili renk kodunu işletim sisteminin kendi color picker’ında görüp değiştirebilir ve renk kodlarımızı farklı formatlar (hex, rgb, hsl, hsv) arasında çevirme işlemi yapabiliriz. Less, Sass, Scss, Stylus gibi CSS preprocessor’lardaki değişkenleri de renkli gösteriyor olması paketi güzel kılan özelliklerinden bir tanesi.

Color Highlighter - GitHub
Color Highlighter - Package Control

7. AlignTab

Kodlarımızın okunabilirliğini artırmak için kullanabileceğimiz güzel bir kod-hizalama paketi. Hizalanacak kodları seçtikten sonra sağ click menüsünden veya command prompt’tan gerekli aksiyonları gerçekleştirebiliriz. İçerisindeki regex özelliği ile daha kapsamlı hizalamalar yapabiliriz. Paket sayfasındaki resimlere ve gif’lere bakarsak nasıl çalıştığını daha iyi anlayabiliriz.

AlignTab - GitHub
AlignTab - Package Control

8. FileDiffs

Birbirine çok benzer iki dosya var ve aralarındaki ufak farkın ne olduğunu merak mı ediyoruz? Veya elimizde bir plugin’in 2 farklı versiyonunun dosyaları var ve yeni versiyonda hangi kodların eklendiğini öğrenmek istiyoruz. FileDiffs sayesinde seçilen dosyalar arasındaki eklenilip çıkarılan kodları rahatlıkla görebiliriz.

FileDiffs - GitHub
FileDiffs - Package Control

9. Text Pastry

Text Pastry için Multiple Selection modunun extend edilmiş hali diyebiliriz. Yaptığımız çoklu seçimlere sıralı sayılar (1, 2, 3, 4), tekrar eden sayılar (1, 2, 1, 2), kelime dizileri (x, y, x, y), tarih aralıkları, rastgele UUID’ler ve çok daha fazlasını belirlediğimiz kurallarla rahatlıkla oluşturabiliriz.

Text Pastry - GitHub
Text Pastry - Package Control

10. SublimeHttpRequester

Sublime içerisinden seçili URL’e GET/POST istekleri oluşturmamızı sağlayan faydalı bir pakettir. Gerekli komutları kullanarak HTTP isteklerinde ekstra parametler gönderip hızlı bir şekilde Sublime içerisinden response alabiliriz.

SublimeHttpRequester - GitHub
SublimeHttpRequester - Package Control

11. AutoFileName

Sublime’ın en büyük eksikliklerinden biri de href="", src="" veya background-image: url() gibi dosya yolu belirteceğimiz durumlarda bize otomatik olarak dosyalarımızın yollarını sunmaması. AutoFileName bu duruma çözüm getiren güzel paketlerden birisi.

AutoFileName - GitHub
AutoFileName - Package Control

12. Gist

GitHub’ın Gist servisini Sublime içerisinde kullanmamızı sağlayan bir paket. Gist’lerimizi görüp düzenleyebilmemiz için tek yapmamız gereken GitHub ayarlar sayfamızdan yeni bir token oluşturup Sublime’daki Gist ayarlarına girmek.

Gist - GitHub
Gist - Package Control

13. HTML-CSS-JS Prettify

Karmaşık HTML, CSS ve JS kodlarını tek tuşla okunabilir bir hale getirebilmemiz sağlayan oldukça kullanışlı bir paket. Çalışabilmesi için sistemimizde NodeJS kurulu olması gerekiyor.

HTML-CSS-JS Prettify - GitHub
HTML-CSS-JS Prettify - Package Control

14. PackageResourceViewer

Kurulu olan tüm paketlerimizin kaynak dosyalarını görüntüleyip düzenleyebilmemizi sağlayan bir paket. Bu sayede kurulu paketleri geliştirebiliriz.

PackageResourceViewer - GitHub
PackageResourceViewer - Package Control

15. DocBlockr

DocBlocr ile kodlarımıza çok daha hızlı açıklama satırları yazabiliriz. Plugin veya framework geliştiren biriysek mutlaka kullanmamız gereken paketlerden birisi.

DocBlockr - GitHub
DocBlockr - Package Control

Preprocessor, Framework

Kullandığımız preprocessor veya framework’ler için syntax highlighter, snippet, kod tamamlama gibi destekleyici özellikler sunan yardımcı paketleri kurup çok daha hızlı ve efektif kod yazabiliriz.

Preprocessor’lar

HAML: GitHub - Package Control
Markdown: GitHub - Package Control
LESS: GitHub - Package Control
SASS: GitHub - Package Control
SCSS: GitHub - Package Control
Stylus: GitHub - Package Control
LiveScript: GitHub - Package Control
TypeScript: GitHub - Package Control
CofeeScript: GitHub - Package Control

Framework’ler

Jeet: GitHub - Package Control
Susy: GitHub - Package Control
UIKit: GitHub - Package Control
YAML: GitHub - Package Control
PureCSS: GitHub - Package Control
Bootstrap: GitHub - Package Control
Foundation: GitHub - Package Control
Semantic UI: GitHub - Package Control
Bourbon Neat: GitHub - Package Control
MaterializeCSS: GitHub - Package Control
Ext JS: GitHub - Package Control
jQuery: GitHub - Package Control
Ember.js: GitHub - Package Control
MooTools: GitHub - Package Control
AngularJS: GitHub - Package Control
Backbone: GitHub - Package Control
jQuery Mobile: GitHub - Package Control

Şimdilik bu kadar. Yeni paketler denedikçe bu sayfayı güncellemeye devam edeceğim…