Merhaba arkadaşlar! Yoğun talep üzerine, kod düzenleyici için hızlı kurulum kılavuzu güncellendi Yüce metin 3, düzen için gerekli eklentileri kurun ve yeni bir işyerinde hızlı bir başlangıç ​​için kendi ön ayarlarınızı oluşturun.

Sınıf

Artı

Zapin

Yeni bir işyerinde, yeni projeler üzerinde çalışmak için Sublime Text'i hızlı bir şekilde kurmanız ve yapılandırmanız gerektiğinde duruma muhtemelen aşinasınızdır. Kural olarak, Sublime Text'in ince ayarını yapmak uzun zaman alır ve bunu her seferinde gerçekleştirmek pratik ve zaman alıcı değildir.

Bugün, düzeni hızlandırmak ve en iyi ve en rahat editör temalarından birini kurmak için mizanpaj tasarımcıları arasında en popüler eklentiler olan Sublime Text'in mümkün olan en hızlı kurulumunu ele alacağız. Bir Karanlık Malzeme Teması.

Varsayılan olarak, Sublime Text oldukça üzgün görünüyor:

İlk önce yapılandırmanız gerekir Paket Kontrolü... Bunu yapmak için Ctrl + Shift + P kısayol tuşuna basın. Açılır pencerede Paket Denetimini Yükle yazın ve uygun öğeyi seçin. Birkaç saniye sonra Paket Kontrolü yüklenecek ve ilgili bir bildirim alacaksınız.

MacOS kullanıcısıysanız klavyenizde Cmd + Shift + P tuşlarına basmanız gerekir.

Paket deposundan Sublime Text 3'e eklentiler ve eklentiler yükleyebilmeniz için Paket Kontrolü gereklidir.

Sublime Text'e eklenti yükleme

Ardından, iş için gerekli eklentileri yüklemeniz gerekir. Geliştirmeyi büyük ölçüde kolaylaştıran mizanpaj tasarımcıları arasında en popüler eklentileri yüklemeyi düşüneceğiz. Ayrıca Paket Kontrolü'ndeki diğer eklentileri de deneyebilirsiniz, belki mevcut çok sayıda paketten diğerlerini beğenirsiniz.

Eklentileri Sublime Text'e Paket Kontrolü aracılığıyla yüklemek için, daha önce yaptığımız gibi menüyü çağırmanız gerekir: Ctrl + Shift + P. Ardından "Install Package" komutunu girip listeden gerekli paketi seçiyoruz.

Sublime Text için en popüler eklentiler:

• Emmet- HTML ve CSS kodlarını ışık hızında yazmayı hızlandırır. Emmet üzerine ders ;
• Otomatik DosyaAdı- mizanpajdaki dosyalara yollar yazarken kodu tamamlar;
• öz- Sublime Text'in GitHub Gist kod parçacığı hizmetini kullanmasını sağlar. Öz Üzerine Ders ;
• küstah- Sass ve Scss dosyalarında Sass sözdizimi vurgulama eklentisi. Sass dosyalarında Emmet'i genişletir.

Yüce Metin Görünümünü Ayarlama

temayı çok beğendim Bir Karanlık Malzeme Teması ve kodu uygun renkle vurgulayarak. Bunlar, editörde rahat çalışma için en dengeli, yeterince zıt, ancak çok sert olmayan renklerdir.

One Dark renk şemasını kurmak için Paket Kontrolü aracılığıyla aşağıdaki paketleri kurmamız gerekiyor:

• Tek Koyu Renk Şeması- kodu vurgulamak için renk şeması;
• Bir Karanlık Malzeme - Tema- UI Yüce Metin teması.

Eklentiyi manuel olarak yükleme

Bazı eklentiler artık Paket Denetiminde güncellenmez veya orada görünmez. Bu eklentilerden bazıları kodla çalışırken hayati önem taşır ve manuel olarak kurulmaları gerekir.

Böyle bir eklenti BufferScroll- belgeyi yeniden açtığınızda, imleci en son düzenlemeyi bitirdiğiniz yere getiren ve böylece çalışmaya devam etmek için istenen konumu bulma süresini azaltan harika bir eklenti.

BufferScroll'u manuel olarak kurmak için eklentinin GitHub sayfasına gidin, indirin ve diskinizdeki herhangi bir uygun konuma açın. Ardından, Sublime Text'de Tercihler> Paketlere Gözat menü öğesini seçin. Bu, sürücünüzdeki kullanıcı verileri klasörünü açacaktır. Buffer Scroll dosyalarını içeren klasörü buraya kopyalayın ve Sublime Text'i yeniden başlatın. Eklenti şimdi çalışıyor.

Ayarlarımın ön ayarı olan düzenleyicide ince ayar yapmak

Sublime Text ayarlarına geçiyoruz.

Github Gist, Sublime Text editörünü yeni bir işyerinde veya sistemi yeniden yükledikten sonra yapılandırmaya başlamak için her zaman kullandığım ayar ön ayarımı içerir. Bu ön ayarı düzenleyicinizde kullanabilir ve gerekirse özelleştirebilirsiniz.

Kullanıcı tercihleri ​​için ön ayar kodu (Preferences.sublime-settings | Preferences> Settings):

("show_definitions": false, "auto_complete": false, "bold_folder_labels": true, "color_scheme": "Paketler / Tek Karanlık Malzeme - Tema / şemalar / OneDark.tmTheme", "fold_buttons": false, "font_size": 13 , "highlight_line": true, "indent_guide_options": ["draw_normal", "draw_active"], "line_padding_bottom": 2, "line_padding_top": 2, "margin": 2, "material_theme_compact_sidebar": true, "material_theme_compact_pan" , "material_theme_small_statusbar": true, "material_theme_small_tab": true, "tab_size": 2, "theme": "OneDarkMaterial.sublime-theme", "word_wrap": "false",)

Özel klavye kısayolları için önceden ayarlanmış kod (Varsayılan (Windows) .sublime-keymap | Tercihler> Anahtar Bağlantıları):

[("tuşlar": ["alt + üst karakter + f"], "komut": "yeniden girinti"),]

Şimdi seçimde ve basıldığında Alt + Üst Karakter + F kodunuz, uygun yuvalama hiyerarşisiyle otomatik olarak girintilenir.

Bu parçacıkları uygun ayar dosyalarına yerleştirerek, tamamen kullanıma hazır, özelleştirilmiş bir Sublime Text alacaksınız veya düzenleyiciyi kendinize göre özelleştirebilirsiniz. Ayarlarda iki alan vardır - soldaki varsayılan ayarlarla ve sağdaki özel ayarlarla. Varsayılan ayarlarda, her özellik için ipuçlarını görebilir ve kendi değerinizi kopyalayıp ayarlayarak sağ tarafta uygulayabilirsiniz.

Oldukça basit olan şeyden hangi mülkün sorumlu olduğunu bulmak - tüm mülklerin İngilizce'de sezgisel adları vardır. Çok sayıda mevcut ayardan herhangi bir özellik, basitçe Rusça'ya çevrilebilir ve bunun ne anlama geldiği anlaşılabilir.

Tüm ayarlarınızın yedeğini almak ve Sublime Text'i başka bir iş yerine hızlı bir şekilde dağıtmak için klasörü kopyalamanız yeterlidir.
"C: \ Users \ (Kullanıcınız) \ AppData \ Roaming \ Sublime Text 3"
diskinizdeki veya bir USB flash sürücüdeki gizli bir yedekleme alanına ve ardından başka bir kullanıcıyla veya kullanıcının altındaki aynı dizindeki başka bir bilgisayara yerleştirin.

Ayrıca, ayrıca, kendi takdirinize bağlı olarak, sağdaki mini haritayı kapatabilir ve menüyü gizleyebilirsiniz. Bu, Görünüm> Mini Haritayı Gizle ve Görünüm> Menüyü Gizle'ye giderek yapılabilir. Klavyenizdeki Ctrl tuşuna basarak menüyü gösterebilirsiniz.

Bu yazıda, Sublime Text 2 için günlük işlerinizde çok faydalı olabilecek faydalı eklentilere küçük bir genel bakış sunacağım.

Aynı eklenti seti Sublime Text 3 için de geçerlidir.

Aynı yazımda kendi çalışmalarımda kullandığım ve kullanmanızı tavsiye ettiğim Sublime Text 2 için bazı faydalı eklentilere ufak bir genel bakış yapacağım. Doğal olarak, burada tartışılan eklentiler okyanusta sadece bir damla, bu makalede bahsedilmeyen birçok faydalı eklenti var. Ek olarak, kendimi bir programcı olarak görmüyorum ve zorlu kodlayıcılara yönelik eklentileri düşünmüyorum, ancak konuya bir düzen tasarımcısı bakış açısıyla yaklaşıyorum. Ancak, söz konusu eklentilerin çoğu hem programcılar hem de düzen tasarımcıları için eşit derecede faydalı olabilir.

Yukarıdakilere dayanarak, sizi teşvik ediyorum: Birdenbire Sublime'da bazı yararlı işlevler bulamadıysanız, mevcut eklentilere baktığınızdan emin olun, ihtiyacınız olan işlevselliğin onların yardımıyla uygulanmış olması muhtemeldir.

Eh, şimdi doğrudan incelemelere dönüyorum.

Sublime Text 2 için Zen Kodlama ve Emmet eklentileri

Ve en popüler eklentilerden biriyle başlayacağız - Zen Kodlaması(kullanımdan kaldırıldı) ve Emmet(Zen Kodlamasının şu anki adı). Zen Kodlama / Emmet html ve css kodunun yazılmasını büyük ölçüde hızlandırmanıza olanak tanıyan metin düzenleyiciler için (yalnızca Sublime için değil) bir dizi araçtır. Her şeyden önce, snippet'lerin benzerliğinden bahsediyoruz, ancak sadece onlardan değil. Standart parçacıkların aksine, Zen Kodlama (veya Emmet) kullanarak oldukça karmaşık kod yapıları oluşturabilirsiniz. Örneğin, ul> li * 8 gibi bir kısaltma, 8 noktalı sırasız bir listeye (standart ul etiketi) genişleyecektir. Ve bu en basit örnek, tasarımlar çok daha karmaşık olabilir.

Herhangi bir sitedeki popüler editörlerde veya metin alanlarında olup olmadığı hakkında ayrı bir makale yazdım.

Eklenti kur Zen Kodlaması kullanarak kelimenin tam anlamıyla birkaç saniye içinde yapabilirsiniz Paket Kontrolü... Ctrl + Shift + P kombinasyonuna basın ve görünen panelde yükleme kelimesini yazın, ardından görünen Paket Kontrolü: Paketi Yükle öğesini seçin. Bundan sonra gelen panelde zencoding yazıp Enter'a basın. Voila - eklenti yüklendi.

Fakat Zen Kodlaması bugüne kadar gelişmiyor, yeni sürümler adlandırılıyor Emmet... Çok uzun zaman önce, bu araç seti kararsız bir duruma sahipti, ancak bugün onu kullanmak oldukça mümkün (Emmet kullanıyorum). Sublime'daki ilgili eklenti aynı şekilde kurulur (önceki paragrafa bakın), yalnızca arama yaparken elbette emmet yazmanız gerekir.

Zen Kodlama hakkında ilgili web sitesinde ve Emmet hakkında daha fazla bilgiyi resmi web sitesinde bulabilirsiniz. İşte bu konsepte aşina olmayanlar için bazı kullanım örnekleri. Zen Coding'de çalışan her şey Emmet'te de çalışıyor, yani örnekler her iki durumda da aynı.

> sembolü iç içe etiketler oluşturmak için, + sembolü mevcut seviyedeki etiketler için ve * sembolü bir etiketi birden çok kez tekrarlamak için kullanılır. Etiket adından sonra sınıf adını (nokta ile ayırarak) veya kimliği (# sembolü ile ayırarak) belirtebilirsiniz. Örneğin, şöyle bir yapı:

Div # sayfa> div.logo + ul # navigasyon> li * 5> a

... şöyle görünecek şekilde genişletilecek:

Bir kısaltmadaki karakter dizisi boşluk içermemeli ve imleç genişletme sırasında sonunda olmalıdır. Bu arada, Sublime'de genişletme Sekme tuşuna basılarak veya Ctrl + E tuşlarına basılarak yapılır.

İsteğe bağlı olarak, etiketi ayarlayabilirsiniz a nitelik değeri href, ayrıca herhangi bir "çift" etiket, içeriğine küme parantezleri içinde ayarlanabilir. Karmaşık yapılarda parantezler kullanılabilir (örneğin, etiket hiyerarşisinde daha yüksek seviyelere gitmek için). İşte benzer bir kullanıma bir örnek:

Benzer bir yapı aşağıdaki forma genişletilecektir:

küçük numara

Sublime Text 2'de, açık bir parantez veya alıntı oluşturmak için bir tuşa basarak seçilen metni kolayca parantez veya tırnak içine alabilirsiniz. Kapanış otomatik olarak oluşturulacaktır.

Düzenlenebilir noktalar arasında hızla geçiş yapmak için Ctrl + Alt tuşlarını aynı anda basılı tutarak ← ve → imleç tuşlarını kullanın. Neyin tehlikede olduğunu daha iyi anlamak için yukarıdaki örnekte deneyebilir ve düzenlenebilir noktalar arasında geçiş yapabilirsiniz.

Zen Kodlama, div etiketi için bir ad belirtmenize değil, yalnızca sınıfı veya kimliği belirtmenize olanak tanır. Bu durumda, otomatik olarak bunun bir div olduğu varsayılır. Örneğin, şöyle bir yapı:

Konteyner<#header+#main

... bu yapıya benzer:

Böl.konteyner

... ve aşağıdaki gibi görünecek şekilde otomatik olarak genişletilecektir:

Benzer bir şekilde, tam teşekküllü CSS'ye genişletmek için uygun kısayolları kullanarak (ayrıca Sekme tuşuna basarak) yalnızca HTML ile değil, aynı zamanda CSS koduyla da çalışabilirsiniz.

Kullanılabilir tuş kombinasyonları, ilgili yapılandırma dosyasında bulunabilir. Benim durumumda (Ubuntu'da) bu dosya ~ / .config / sublime-text-2 / Packages / Emmet / Default (Linux) .sublime-keymap konumunda bulunuyor. Alternatif olarak, aynı dizindeki README.md dosyasına bakabilirsiniz; burada temel klavye kısayollarına ek olarak birçok başka yararlı bilgi edinebilirsiniz.

V Emmet eksik olan bazı yararlı özellikler var Zen Kodlaması.

Emmet'teki kısaltmaların çoğu artık daha kısa. Örneğin, CSS ile çalışırken, p20 kısaltması dolguya genişleyecektir: 20px; ... Aynı şekilde, m40 kısayolu da kenar boşluğuna dönüşecektir: 40px; ve w100 genişliktedir: 50 piksel; ... Bu sayede sadece piksel olarak değil değerleri ayarlayabilirsiniz. Böylece, w80p kesimi genişliğe genişletilecektir: %80; ... Benzer şekilde, birden fazla değer ayarlayabilirsiniz, örneğin m10-20, kenar boşluğuna dönüşecektir: 10px 20px; ve m0-auto marja dönüşür: 0 auto; ...

Emmet ayrıca CSS'deki satıcı öneklerini bilir, yerleşik bir degrade oluşturucuya ve "balıklara" sahiptir ("Belirli sayıda kelimeyle Lorem Ipsum", örneğin lorem20 kısaltması 20 kelimelik bir "balık" oluşturur). Ayrıca, parantez kullanmadan bir düzey (veya birkaç düzey) daha yükseğe çıkmanıza izin veren yeni bir operatör ^ vardır.

fonksiyonel Emmet(birlikte Zen Kodlaması) açılımı kısaltmalar ile sınırlı değildir. Başka birçok yararlı eylem de vardır. Örneğin, imleci img etiketinde herhangi bir yere koyarsanız ve Ctrl + U kombinasyonuna basarsanız, genişlik ve yükseklik parametreleri otomatik olarak hesaplanacak ve belirtilen görüntü için ayarlanacaktır. Ayrıca imleci css dosyasındaki resim adresinin üzerine getirip Ctrl + "kombinasyonuna basarsanız hoş bir şekilde şaşırabilirsiniz. Bu tür çok fazla chip var, hepsini tek bir yazıda listeleyemem, bu yüzden şiddetle tavsiye ederim. Daha fazla ayrıntı için Emmet projesinin resmi web sitesine bakın.

Sublime Text 2 için AdvancedNewFile Eklentisi

Yeni bir dosya oluşturmanın standart yolu (aniden) onu gerçekten oluşturmaktan (Ctrl + N) ve sonra onu kaydetmekten (Ctrl + S) oluşur. Aynı zamanda, ikinci aşamada, bir klasör seçmeniz ve yeni bir dosya için bir ad belirlemeniz gereken standart bir sistem iletişim kutusu açılır.

Bununla birlikte, yukarıda açıklanan prosedürün tamamı, eklenti kullanılarak büyük ölçüde basitleştirilebilir. GelişmişYeniDosya... Eklentiyi her zamanki gibi şuradan yükleyebilirsiniz: Paket Kontrolü: Ctrl + Shift + P → yükle → AdvancedNewFile → Enter.

Eklenti yüklendi ve kullanıma hazır. Şimdi Super + Alt + N kombinasyonuna basmak yeterlidir, bundan sonra Sublime penceresinin altında küçük bir panel görünecektir. Bu panelde, sadece yeni dosyanın yolunu girin (genellikle mevcut projenin kök klasörüne göre) ve Enter tuşuna basın - ve yeni dosya kaydedilir.

Ayrıca dosyaya adres girerken henüz var olmayan dizinleri de kullanabilirsiniz - bu durumda bu dizinler otomatik olarak oluşturulacaktır.

Kenar çubuğunda (dosya ağacında) bir öğeye sağ tıklarsanız, görünen bağlam menüsünün oldukça mütevazı olduğunu göreceksiniz. Bu menünün işlevselliği, yüklenerek önemli ölçüde genişletilebilir (yine Paket Kontrolü) Eklenti SideBar Geliştirmeleri, bundan sonra içerik menüsü çok daha zengin hale gelecektir:

Bu eklenti, yalnızca gelişmiş bir menü biçiminde değil, ek işlevsellik de getiriyor. Yani F12 tuşuna bastığınızda artık mevcut dosya tarayıcıda açılacaktır (tabii ki atanan tuşlar değiştirilebilir).

Sublime Text 2 için PlainTasks eklentisi

DüzGörevler Düzenleyiciyi basit bir görev yöneticisi (yapılacaklar listesi) olarak da kullanmanıza izin veren, Sublime için alışılmadık bir eklentidir.

Ve bir görev listesi oluşturmak için harika bir program kullanmama rağmen gitmeliyim, yine de Sublime'da basit görev listeleri oluşturabilmeyi faydalı buldum.

PlainTasks eklentisini yükledikten sonra, komut panelinde (Ctrl + Shift + P olarak adlandırılır), görevler kelimesini girdiğinizde, yeni bir görev listesi oluşturmanıza izin veren yeni bir öğe görünür:

Sublime'da bu öğeyi seçtiğinizde, belirgin bir sarı arka plana sahip yeni bir sekme açılır. Artık görev listemizi oluşturmaya başlayabiliriz. Aynı zamanda kendi sözdizimimiz ve kısayol tuşlarını kullanma yeteneğimiz var ve bir dosyayı kaydederken * .TODO uzantısı ona otomatik olarak verilir.

Bir satırın sonunda iki nokta üst üste işareti varsa, bu satır otomatik olarak sonraki listenin başlığı olarak kabul edilir ve kırmızıyla vurgulanır. Şimdi, yeni bir satırdan yeni görevin adını yazıp Ctrl + Enter tuşlarına basarsanız, öğe otomatik olarak biçimlendirilir (solda boş bir kare görünür). Listede yeni bir görev oluşturmanın alternatif bir yolu olarak, imleç yeni görevden önceki öğede veya yeni bir satırın başındayken Ctrl + I kombinasyonunu kullanabilirsiniz.

Bir dosya aynı anda birkaç görev listesi içerebilir. Ayrıca istenirse bu listeler bir ayırıcı ile ayrılabilir, bunun için sembolü iki kez girmek ve Tab tuşuna basmak yeterlidir. Görevlere etiket atamak mümkündür (bunlar @ sembolü ile başlamalıdır).

İmleci istenen görevin üzerine getirip Ctrl + D kombinasyonuna basarak görevler tamamlandı olarak işaretlenebilir. Bu durumda, görev yeşil bir onay işaretiyle, gri tonlu, otomatik olarak @done etiketiyle işaretlenir ve yürütme tarihi ve saati parantez içinde belirtilir. Ctrl + D tuşlarına tekrar basarsanız, görev orijinal biçimine döner (diğer bekleyen görevler gibi).

Bir seferde tamamlanan tüm görevler Ctrl + Shift + A tuş kombinasyonu kullanılarak arşive aktarılabilir.

Ctrl + Shift tuşlarını basılı tutarken imleç tuşlarını ve ↓ tuşlarını kullanarak mevcut görevle (başka bir liste dahil) satırda yukarı / aşağı hareket edebilirsiniz.

Eklentinin kullanımı hoştur ve bu tür görev listeleri, TODO dosyalarını doğrudan proje klasörüne kaydederek her projede kullanıma uygundur.

Sublime Text 2 için LiveReload Eklentisi

Eklenti Canlı Yeniden Yükle düzenlenebilir HTML ve CSS kodundaki tüm değişiklikleri canlı olarak görmenizi sağlar. Yakınlarda açık bir tarayıcı penceresi ve bir düzenleyici penceresi tutabilirsiniz ve her dosya kaydettiğinizde tarayıcıdaki sayfa otomatik olarak yenilenecektir.

Ancak bu eklentiyi kullanmak için tarayıcınıza bir eklenti yüklemeniz gerekecek (Firefox, Chrome ve Safari için eklentiler var). Eh, Sublime Text 2 için LiveReload eklentisi her zamanki gibi şuradan yüklenir: Paket Kontrolü(Ctrl + Shift + P -> yükle -> LiveReload).

Uzantıyı yükledikten sonra, tarayıcı panelinde LiveReload uzantısını etkinleştirebileceğiniz veya devre dışı bırakabileceğiniz bir düğme görünür.

Eklentiyi Sublime'a ve uzantıyı tarayıcıya yüklediyseniz, hazırlık çalışmaları bitmiş demektir. Tarayıcıda ilgili düğmenin etkinleştirilip etkinleştirilmediğini kontrol etmeyi unutmayın ve çalışmaya başlayabilirsiniz. Artık, düzenlenmiş bir dosyayı her kaydettiğinizde, çalışmanızın sonuçlarını canlı olarak ve her seferinde sayfayı tarayıcıda manuel olarak yeniden yüklemek zorunda kalmadan görebileceksiniz.

Eklenti RenkVurgulayıcı CSS dosyalarınızdaki renk koduyla eşleşen gerçek rengi görmenizi sağlar. Eklenti her zamanki gibi yüklenir - aracılığıyla Paket Kontrolü... Şimdi, imleci bir renk koduna ayarladığınızda, ilgili renkte vurgulanacaktır.

Eklenti Renk seçici CSS stillerini düzenlerken sistem renk seçici iletişim kutusunu kullanmanıza izin verir. Eklentiyi kurduktan sonra ( Paket Kontrolü) bir iletişim kutusunun görünmesi için Ctrl + Shift + P kombinasyonuna basmanız yeterlidir. Bir renk seçip OK düğmesine bastıktan sonra, seçilen renk imlecin yerleştirildiği yerde otomatik olarak değiştirilecektir. Aynı zamanda imleç zaten bir renk koduna ayarlanmışsa, iletişim kutusu göründüğünde, bu renk onun yerine geçecektir.

Eklenti SFTP FTP ve SFTP protokollerini kullanarak dosyaları doğrudan Sublime'dan aktarmanıza izin verir. Uygun parametreleri ayarladıktan sonra, kenar çubuğundaki herhangi bir dosyaya sağ tıkladığınızda, beliren içerik menüsünde dosyaları uzak bir sunucuya aktarmanıza izin veren ek bir öğe grubu belirecektir.

SFTP eklentisi, Sublime Text 2'nin kendisi ile aynı shareware modeline göre dağıtılır.Kullanmak için ödeme yapabilirsiniz veya ödeme yapamazsınız (bazen, uzak bir sunucuya dosya gönderirken, eklenti size olası bir satın alma işlemini hatırlatacaktır) .

Bu muhtemelen Sublime Text 2 için faydalı eklentilerin incelemesinin sonu. Paket Kontrolü.

Sublime Text, modern bir kapalı kaynak metin editörüdür. Genellikle web geliştiricileri tarafından html veya php kodunu düzenlemek için kullanılır. Editör güzel, modern bir görünüme ve hızlı gezinme, eşzamanlı düzenleme ve komut girişi gibi birçok ilginç özelliğe sahiptir.

Varsayılan yazılım, işinize büyük ölçüde yardımcı olacak birçok özellikle birlikte gelirken, her zaman iyileştirme için yer vardır. Diğer şeylerin yanı sıra Python ile yazılmış eklentiler burada desteklenir. Bu yazıda en iyi Sublime Text 3 eklentilerini bulacaksınız.Bunlar Lime Text programının ücretsiz alternatifi olarak da çalışacaklar. Bu eklentiler ile programın yeteneklerini büyük ölçüde genişletebilirsiniz. Şimdi listeye geçelim.

Bu muhtemelen programı kurduktan ve çalıştırdıktan sonra yüklemeniz gereken ilk eklentidir. Bu, eklentilerle paketleri kurabileceğiniz, kaldırabileceğiniz ve güncelleyebileceğiniz Sublime Text için bir paket yöneticisidir. Ayrıca kurulu tüm Sublime Text 3 eklentilerine çok basit bir şekilde bakabilirsiniz.

2. Emmet

Emmet eklentisi sadece Sublime için değildir. Bu oldukça popüler bir şey. Daha sonra tam teşekküllü html etiketlerine genişletilen kısaltmalar ve kısayollar kullanarak css ve html kodunu çok daha hızlı yazmanıza olanak tanır. Örneğin:

((h4> a) + p> görsel) * 12

12 başlık öğesi oluşturulacak, ardından bir görüntü gelecek. Ardından, etiketleri birer birer yazmanıza gerek kalmadan ortaya çıkan şablonu kolayca doldurabilirsiniz.

Bu, kodunuzdaki hataları kontrol etmek için bir eklentidir. Yakın zamanda birkaç yeni özellik içerecek şekilde yeniden tasarlandı. Tüm programlama dillerini desteklemez, sadece bir API oluşturur, ardından en sık kullandığınız diller için eklentiler yükleyebilirsiniz.

4. Yüce Geliştirmeler

Bu Sublime Text 3 eklentisi, editör kenar çubuğunu geliştirir. Geçerli proje klasöründe yeni dosyalar oluşturma, dosya ve klasörleri taşıma ve kopyalama, arama, güncelleme ve çok daha fazlasını sağlar.

PackageResourceViewer eklentisi ile Sublime Text 3'te kurduğunuz paketleri görüntüleyebilir ve düzenleyebilirsiniz. Paketi ayrı bir klasöre çıkarıp orada ihtiyacınız olanı düzeltip programa geri döndürmeniz mümkündür.

6. Git

Bu eklenti, Sublime Text 3 düzenleyicisini Git ile bütünleştirir. Dosya ekleme, taahhüt gönderme, günlükleri ve dosya açıklamalarını görüntüleme gibi doğrudan düzenleyiciden Git ile etkileşime girebileceksiniz.

Bu eklenti, bir kısayol tuşu kullanarak doğrudan Sublime Text'den proje klasöründe bir terminal açma yeteneği ekler. Bu klasörde herhangi bir komutu çalıştırmanız gerekiyorsa bu çok kullanışlıdır.

CSSComb, CSS özelliklerini sıralamak için bir eklentidir. Kodunuzun düzgün ve doğru sırada görünmesini istiyorsanız, bu eklenti özelliklerin sırasını özelleştirmenize yardımcı olacaktır. Her biri kendi kodlama tercihlerine sahip bir geliştirme ekibinde çalışırken de yararlıdır.

Bu eklenti ile, kullandığınız CSS özellikleri veya HTML öğeleri için tarayıcı desteğini kontrol edebilirsiniz. Bunu yapmak için, bir CSS özelliği veya HTML öğesi seçmeniz yeterlidir, ardından caniuse.com'da ilgili sayfaya yönlendirilirsiniz.

Hizalama eklentisi, PHP, JavaScript ve CSS dahil olmak üzere kodu hizalamanıza olanak tanır. Bu, düzgün ve okunmasını kolaylaştırır. Bu ekran görüntüsünde bir örnek görebilirsiniz:

Bu eklenti ile gereksiz boşlukların yanı sıra JavaScript hatalarına neden olabilecek fazladan boşlukları kaldırabilirsiniz.

Bu eklenti ile Sublime Text 3'e fare ile tıklayarak istediğiniz rengi ve işletim sisteminizi seçip ekleyebilirsiniz. Renk çarkından da bir renk seçebilirsiniz.

13. MarkDown Düzenleme

Sublime Text 3, MarkDown dosyalarını görüntülemenize ve düzenlemenize izin verse de, onları çok zayıf biçimlendirmeye sahip düz metin dosyaları olarak açar. Bu eklenti, biçimlendirmeyi iyileştirmeye ve Markdown ile yazılmış dosyalara metin rengi eklemeye yardımcı olacaktır.

14. Dosya Farkları

FileDiffs eklentisi, Sublime Text 3'teki iki dosya arasındaki farkları analiz etmenizi sağlar. Dosyaları yalnızca birbirleriyle değil, aynı zamanda sistem panosuyla ve bir dosyanın kaydedilmemiş ve kaydedilmiş sürümleriyle de karşılaştırabilirsiniz.

DocBlockr, işlevleri, parametreleri, değişkenleri analiz ederek ve halihazırda mevcut olan belgeleri otomatik olarak ekleyerek kod için belgeler veya ek açıklamalar oluşturmanıza olanak tanır.

16. Üçüncü taraf temaları

Her gün aynı görünüm zamanla sıkıcı hale geliyor. Yeni bir konu size iş için yeni fikirler bile verebilir. Bazı ilginç temaları deneyebilirsiniz, örneğin:

Temel bilgiler listesiyle tanışın - Sublime için geliştiricinin hayatını büyük ölçüde kolaylaştıracak 15 temel eklenti.

Paket Kontrolü

Sublime için paket yöneticisi. Onsuz, paketleri kurmak ve kaldırmak cehennemdir, bu yüzden her şeyden önce Paket Kontrolünü kurmanız gerekir.

Emmet

Sublaym kutudan çıktığı gibi normal bir paket yöneticisine sahip olsaydı Emmett bir numara olurdu. Onun sayesinde işaretleme ile çalışmak çok daha rahat ve hızlı hale geliyor. Örneğin, html + sekmesi bir html belgesi için hazır bir tel kafes oluşturacak ve div.wrapper + sekmesi dönüşecektir.

JavaScript ve NodeJS Parçacıkları

Çok daha hızlı çalışmanıza yardımcı olacak bir JavaScript snippet kısaltmaları koleksiyonu. Neden document.querySelector ("selektör") yazmalısınız; sadece qs yazabiliyorken sekmeye basın - ve bitirdiniz!

Gelişmiş Yeni Dosya

Bu paket ile dizin ağaçlarına tırmanmanız ve açılır menüleri kullanmanız gerekmez. Cmd + alt + n (ctrl + alt + n) aracılığıyla, giriş için bir satır çağrılır - yolu, dosya adını girin, Enter'a tıklayın. Hazır!

Git

Bu eklenti, geliştirme için gerekli tüm Git işlevlerini kullanma yeteneği ekler: ekleme, taahhüt etme, günlüklere erişim - ve tüm bunlar Sublime'dan ayrılmadan!

Gitar

Dosya durumunu görüntüleme ve değişiklikleri doğrudan düzenleyicide izleme yeteneği ekler. Herhangi bir daldaki dosyaların sürümlerini karşılaştırabilirsiniz.

Yan Çubuk Geliştirmeleri

Adından da anlaşılacağı gibi, bu paket sol kenar çubuğuna bazı iyileştirmeler ekleyecektir. Örneğin, "Tarayıcıda aç" öğesi, çoğaltma yapma yeteneği ve yaklaşık 20 daha kullanışlı işlev görünecektir.

Renk seçici

Küçük ama çok kullanışlı bir eklenti, altıgen biçiminde dairesel bir paletten bir renk seçme ve eşleştirme yeteneği ekleyecektir. Ayrı bir pencerede açılır ve paletin yanı sıra ekranın herhangi bir yerinden bir renk seçmenize olanak tanır.

yer tutucular

Sublime Text 3, lorem ipsum oluşturma ve ekleme yeteneğini tanıtır ve Placeholder bu yeteneği biraz genişletir. Bununla birlikte, düzen resimleri, formlar, listeler ve tablolar ekleyebilirsiniz.

DocBlockr

DocBlockr, işlevlerin tanımlarını kolayca oluşturmanıza olanak tanır. Bir veya iki an için, fonksiyon argümanlarını, dönüş değerlerini ve değişken tiplerini tanımlamak için yorumlanmış bir alan yaratacaktır.

YüceKodIntel

Bu uzantı, eski kodu hızlı bir şekilde anlamanıza yardımcı olacaktır. İşlev adına tıklamak, doğrudan bu işlevin açıklamasına atlayabileceğiniz bir bağlantı gösterecektir.

küçült

Geçerli dosya dizininde küçültür ve küçültülmüş bir sürümünü oluşturur. CSS, HTML, JavaScript, JSON ve SVG ile çalışır. Çalışması için harici node.js kitaplıkları gerekir, bu nedenle ayrı olarak yüklenmeleri gerekir:

npm kurulumu -g clean-css uglifycss js-güzelleştirme html-minifier uglify-js minjson svgo

npm kurulumu - g temiz - css uglifycss js - html güzelleştir - minifier uglify - js minjson svgo

yüce linter

Kodun sözdizimi hataları, kötü uygulamalar ve sıklıkla ortaya çıkan diğer sorunlar için nasıl kontrol edileceğini bilir. Yalnızca kullanılan her dil için ayrı bir

Birkaç yıl öncesine kadar TextMate hayranıydım. Thomas ve Hunt'ın ilkelerini takip ederek, bu editörde mana okumak dahil neredeyse her şeyi yaptım. Süre Yüce metin sadece popülerlik kazanıyor ve bir noktada denemeye karar verdim. O günlerde TextMate 2 ile garip şeyler oluyordu - bu sürüm birkaç yıldır hala alfadaydı ve öyle görünüyor ki oradan ayrılmayacaktı. Ancak daha sonra TextMate açık kaynak oldu ve geliştirme bir süre daha aktif oldu, ancak ben zaten çok uzaktaydım.

O zamandan beri ilgi alanlarım biraz değişti ve iş akışlarını denemektense kod yazmayı tercih etmeye başladım. İş akışı buna göre sağlıklı işlevselliğe doğru kaymıştır. Son zamanlarda, neredeyse hiçbir etkin değişiklik olmadı - esas olarak güncellemeler, snippet'ler ve dil vurgulama ile ilgilidir. Gerisi, görünüşe göre, benim için doğru.

Sublime Text'i Konsoldan Başlatma

Mac OS'de konsoldan herhangi bir dosyayı veya dizini şu şekilde açabilirsiniz:

-a "Yüce Metin"i açın. sudo open -a "Yüce Metin" / etc / hosts

Daha fazla konfor için, birlikte gelen konsol yardımcı programını kullanmak daha iyidir. Yüce metin... Bu şekilde kurulur:

ln -s "/ Uygulamalar / Sublime Text.app/Contents/SharedSupport/bin/subl" / usr / local / bin / yüce

Ayrıca, .zshrc dosyasına hemen birkaç satır ekliyorum:

alias s = "sublime" # şimdi `sublime .` yerine `s .` yazabilirsiniz. export EDITOR = "subl -w" # bu şekilde git commit vi yerine sublime açacak

Tema

Çalıştığım hemen hemen tüm editörlerde Cennet Kuşları temasını kullanıyorum. yüce TextMate'ten temaları içe aktarabildiği için bir istisna değildi.

Linting

JavaScript linting için jshint kullanıyorum. İçinde çalışmasını sağlamak için yüce metin 3İki eklentinin bir kombinasyonunu kullanıyorum:

1. SublimeLinter - çok sayıda farklı linter için bir motor;
2. SublimeLinter-jshint aslında bir linterdir.

.jshintrc dosyam şuna benziyor (Çoğunlukla düğümlerde yazarım):

("tarayıcı": yanlış, "kıvırcık": doğru, "ifade": doğru, "girinti": yanlış, "jquery": yanlış, "laxcomma": true, "laxbreak": true, "maxcomplexity": 10, " maxdepth ": 3," maxparams ": 4," node ": true," sondaki ": true," quotmark ":" single "," strict ": true," undef ": true)

Seçeneklerin açıklaması bulunabilir.

CSScomb

Git

Git ile bütünleşmek için GitGutter benim için yeterli - bu eklenti, dosyadaki taahhüt edilmemiş değişiklikleri, alanlardaki ilgili simgelerle işaretler.

Diğer her şey için konsol ve boruları kullanıyorum. Örneğin, git diff | yazarak tüm taahhüdün farkını görebilirsiniz. s, bu yüzden bu minimalist entegrasyon benim için oldukça yeterli.

Emmet

Emmet, html ve css için bir dizi kullanışlı parçacıktır. Yani, örneğin, laconic html: 5> ul> li.item - $ * 5> span.title + span.author, hafif bir sekme tıklamasıyla ...

Yapılacaklarİnceleme

Yapılacaklar yorumlarını genellikle şöyle kodlar halinde yazarım: / * YAPILACAKLAR: vaatlere yeniden yaz * /. TodoReview, bir projede bu tür tüm yorumları bulabilir ve bir listede görüntüleyebilir, böylece teknik borçtan sistematik olarak kurtulabilirsiniz ve bir kez daha yanlışlıkla bir yoruma rastlamakla kalmazsınız.

SideBar Geliştirmeleri

SideBarEnhancements, özellikle uyumlu olmayan yüce metin kenar çubuğunu, dosyalarla yeterince etkileşim kurmak için öğretir: kopyalama, yapıştırma, silme vb.