Anasayfa » Kodlama » Atom'a Özel Kod Parçacıkları Nasıl Eklenir
Atom'a Özel Kod Parçacıkları Nasıl Eklenir
Bu tesadüf değil atom, Github tarafından oluşturulan kaynak kod editörü, web geliştirme topluluğunda popülerdir. Sadece kolayca genişletilebilir Binlerce Atom Paketi ile geniş dil desteği, ama neredeyse her kısmı özelleştirilebilir kullanıcı tarafından.
Atom'un kaldıraç kullanarak Snippets özelliği, kodlama iş akışınızı şu şekilde olduğu gibi daha üretken hale getirebilirsiniz yinelenen kod parçacıklarını yeniden kullanma Çalışmanızın tekrarlayan kısmını azaltabilirsiniz. Bu yazıda size nasıl yapabileceğinizi göstereceğim Atom'un yerleşik kod parçacıklarını kullanın, ve kendi özel snippet'lerinizi oluşturun.
Yerleşik kod parçacıklarını kullanın
Varsayılan olarak, Atom ile birlikte gelir yerleşik kod parçacıkları, her biri bir kapsama bağlı belirli bir dosya türüne ait. Örneğin, bir dosya üzerinde çalışıyorsanız .js uzantısı, yalnızca JavaScript kapsamına ait snippet'leri bu dosya için kullanılabilir.
Görmek mevcut tüm snippet'ler geçerli dosya türünüz için, Alt + Shift + S tuşlarına basın. Açılır listeden bir snippet seçip üzerine tıklarsanız, Atom tüm snippet'i editörünüze herhangi bir zorluk yaşamadan ekler..
Seçeneklerin zaten farkındaysanız, listenin tamamını yüklemeniz gerekmez. Yazmaya başladığınızda, Atom bir otomatik tamamlama sonuçları kutusu Bu, belirli bir kapsama ve şu ana kadar yazdığınız dizeye ait mevcut kod parçacıklarını içerir..
Örneğin, yazarsanız h karakter .html ile başlayan tüm HTML kodlarını içeren bir açılır liste h görünecek.
Herhangi bir seçeneğe tıklayarak, Atom HTML etiketinin tamamını yapıştırın (Örneğin. ), ve imleci başlangıç ve kapanış etiketinin içine getirin.
Açılır listeyle uğraşmak istemiyorsanız, aynı sonucu yazarak da elde edebilirsiniz. h1, ve Sekme veya Enter’a basma - bu tuşların ikisi de tam kod parçacığını ekleyin snippet'in önekine ait.
Özel kod parçacıklarınızı ekleme
1. Yapılandırma dosyasını bulun
Atom’a kendi özel kod parçacıklarınızı eklemek için önce onu bulmanız gerekir. yapılandırma dosyası denir snippets.cson Bu bir CoffeeScript Nesne Notasyonu dosya.
Tıkla Dosya> Snippets… Üst çubuktaki menüde, Menü açılır. snippets.cson kendi özel snippet'lerinizi ekleyebileceğiniz dosya.
2. Doğru Kapsamı Bulun
İhtiyacın olacak dört şey Özel snippet'inizi eklemek için:
kapsamın adı
snippet'in adı
önek snippet'in tanıtıcısı olarak işlev görecek
snippet'in gövdesi
Snippet'in (2-4) adı, öneki ve gövdesi yalnızca size bağlıdır, ancak kapsamın adını bulun (1) özel snippet'lerinizi eklemeden önce.
İhtiyacınız olan kapsamı bulmak için tıklayın. Dosya> Ayarlar Üst menü çubuğundaki menüyü seçip Paketler Ayarlar arasında sekme. Burada ihtiyacınız olan kapsam için bir arama yapın, örneğin, HTML diline kod parçacıkları eklemek istiyorsanız, şunu yazın: HTML arama çubuğuna.
Tıkla dil desteği paketi ve seçilen dilin Arasında Dilbilgisi ayarları, Aşağıdaki ekran görüntüsünde de görebileceğiniz gibi, kapsamın adını hızlı bir şekilde bulabilirsiniz..
Atom projelerinizde kullanmak isteyebileceğiniz bazı kapsamlar:
Düz Metin: .text.plain
HTML: .text.html.basic
CSS: .source.css
Sass: .source.sass
AZ: .source.css.less
JavaScript: .source.js
PHP: .text.html.php
Python: .source.python
Java: .source.java
İhtiyacınız olacağını unutmayın nokta ekle (.) kapsamın adı önünde içinde kullanmak için snippets.cson dosya.
3. Tek Satırlı Kod Parçacıkları Oluşturun
Oluşturmak için tek satırlı kod pasajı, snippet'in kapsamını, adını, önekini ve gövdesini eklemeniz gerekir. snippets.cson Aşağıdaki sözdizimini kullanarak dosya:
Bu örnek pasajı bir ile etiketle Widget Başlığı HTML kapsamına sınıf. Bu sözdizimini izleyerek Atom düzenleyicinize başka bir tek satırlı kod pasajı ekleyebilirsiniz..
Yapılandırma dosyasını kaydettikten sonra, istediğiniz zaman önek yazın ve Sekme tuşuna basın, Atom ait snippet gövdesini kod editörünüze yapıştıracak. Snippet'in adı (örnekte Widget Başlığı) otomatik tamamlama sonuçları kutusunda görüntülenecektir.
4. Çok Hatlı Kod Parçacıkları Oluşturun
Çok satırlı kod parçacıkları biraz farklı sözdizimi kullanın. Tek satırlı snippet'lerle aynı verileri eklemeniz gerekir - kapsam, ad, önek ve snippet'in gövdesi.
Burada farklı olan, snippet gövdesini yerleştirmeniz gerekmesidir. bir çift içinde """ (üç çift tırnak).
eklemek istersen birden fazla özel snippet aynı kapsamda, kapsamın adını ekleyin sadece bir kere, ardından snippet'leri birer birer sıralayın:
'.text.html.basic': 'Widget Başlığı': 'prefix': 'wti "body': '"Resim Bağlantısı ':' önek ':' iml" gövde ': "" " """
5. Sekme Durakları Ekle
Özel kod parçacıklarınızın kullanımını ekleyerek daha da kolaylaştırabilirsiniz. sekme durur pasaj gövdesine Sekme durakları, kullanıcının Sekme tuşunu kullanarak gezinebileceği noktaları gösterir. Sekme duraklarıyla, metin içi gezinti işleminin gerektirdiği zamandan tasarruf edebilirsiniz..
Sekme durakları ekleyebilirsiniz kullanmak 1 $, 2 $, 3 $,… sözdizimi. Atom imleci bulduğu yere konumlandıracak $ 1, o zaman atlayabilirsin 2 $ Sekme tuşuyla 3 $, ve bunun gibi.
Atom size sağlar ek bilgi ekle snippet'lerinizi kullanarak isteğe bağlı parametreler. Bu özellik, başkası da editörünüzü kullanıyorsa ve pasajın amacını bilmelerini istiyorsanız veya onlara not eklemeniz gereken çok karmaşık özel pasajlarınız varsa yararlı olabilir..
İsteğe bağlı parametrelerin değerleri otomatik tamamlama sonuçları kutusunda görüntülenir Bir ön ek yazmaya başladığınızda bu gelir. Aşağıdaki örnekte, bir açıklama ekledim Daha… önceki bağlantı Widget Başlığı özel snippet:
'.text.html.basic': 'Widget Başlığı': 'prefix': 'wti "body': '"Description ':' Bu kod parçacığını bir widget başlığını kenar çubuğu widget'ınıza ekleyebilirsiniz." DescriptionMoreURL ':' http://hongkiat.com '
Kullanıcı öneki yazmaya başladığında WTI, Ekstra bilgi (açıklama + link) otomatik tamamlama sonuçları kutusunun altında gösterilecektir. Bir göz atın diğer isteğe bağlı parametreler Özel snippet'lerinize ekstra bilgi eklemek için kullanabilirsiniz..
