Jak dodać fragmenty kodu niestandardowego do Atom

To nie przypadek Atom, edytor kodu źródłowego stworzony przez Github jest popularny w społeczności programistów. To nie tylko łatwo rozszerzalny z tysiącami pakietów Atom i ma szerokie wsparcie językowe, ale prawie każda jego część jest konfigurowalny przez użytkownika.

Wykorzystując Atom Funkcja fragmentów, możesz sprawić, że Twój proces kodowania stanie się bardziej wydajny, tak jak przez ponowne użycie powtarzających się fragmentów kodu możesz zmniejszyć powtarzalną część swojej pracy. W tym poście pokażę ci, jak możesz użyj wbudowanych fragmentów kodu Atom, i stwórz własne własne urywki.

Użyj wbudowanych fragmentów kodu

Domyślnie Atom jest dostarczany wbudowane urywki kodu, każdy z nich jest związany z zakresem należący do określonego typu pliku. Na przykład, jeśli pracujesz nad plikiem z .js rozszerzenie, tylko fragmenty należące do zakresu JavaScript będą dostępne dla tego pliku.

Zobaczyć wszystkie dostępne fragmenty dla bieżącego typu pliku naciśnij Alt + Shift + S. Jeśli wybierzesz fragment z listy rozwijanej i klikniesz na niego, Atom wstawi cały fragment kodu do edytora bez dodatkowych kłopotów.

Jeśli znasz już opcje, niekoniecznie musisz załadować całą listę. Kiedy zaczniesz pisać, Atom wyskakuje pole wyników autouzupełniania w górę, który zawiera dostępne fragmenty kodu należące do określonego zakresu i ciąg, który wpisałeś do tej pory.

Na przykład, jeśli wpiszesz h znak w a .html plik, lista rozwijana ze wszystkimi wbudowanymi fragmentami kodu HTML zaczynającymi się od h pojawi się.

Klikając na dowolną opcję, Atom będzie wklej pełny tag HTML (na przykład. ), i umieść kursor w tagu początkowym i końcowym.

Jeśli nie chcesz przejmować się rozwijaną listą, możesz osiągnąć ten sam wynik, wpisując h1, i naciskając Tab lub Enter - oba te klawisze wstaw pełny fragment kodu należący do przedrostka urywka.

Dodawanie własnych fragmentów kodu

1. Znajdź plik konfiguracyjny

Aby dodać własne fragmenty kodu do Atoma, najpierw musisz znaleźć plik konfiguracyjny o nazwie snippets.cson to jest CoffeeScript Object Notation plik.

Kliknij na Plik> Fragmenty… menu w górnym pasku, a Atom otworzy snippets.cson plik, do którego można dodać własne niestandardowe fragmenty.

2. Znajdź odpowiedni zakres

Będziesz potrzebować cztery rzeczy aby dodać własny fragment kodu:

The nazwa zakresu
The nazwa fragmentu
The prefiks który będzie działał jako uchwyt fragmentu kodu
The ciało fragmentu

Nazwa, prefiks i treść fragmentu (2-4) zależą wyłącznie od Ciebie, jednak musisz znajdź nazwę zakresu (1) przed dodaniem własnych fragmentów.

Aby znaleźć potrzebny zakres, kliknij Plik> Ustawienia menu w górnym pasku menu, a następnie znajdź Pakiety karta wśród ustawień. Tutaj uruchom wyszukiwanie potrzebnego zakresu, na przykład jeśli chcesz dodać fragmenty kodu do języka HTML, wpisz HTML w pasku wyszukiwania.

Kliknij na pakiet wsparcia językowego wybranego języka i otwórz własne ustawienia. Spośród Ustawienia gramatyczne, możesz szybko znaleźć nazwę zakresu, jak widać na poniższym zrzucie ekranu.

Oto kilka zakresów, których możesz użyć w swoich projektach Atom:

Zwykły tekst: .Zwykły tekst
HTML: .text.html.basic
CSS: .source.css
Sass: .źródło.sass
MNIEJ: .source.css.less
JavaScript: .source.js
PHP: .text.html.php
Pyton: .source.python
Jawa: .source.java

Nie zapominaj, że będziesz musiał dodaj kropkę (.) przed nazwą zakresu w celu użycia go w snippets.cson plik.

3. Utwórz fragmenty kodu pojedynczej linii

Stworzyć fragment kodu jednowierszowego, musisz dodać zakres, nazwę, prefiks i treść fragmentu do snippets.cson plik, używając następującej składni:

 '.text.html.basic': 'Widget Title': 'prefix': 'wti' body ':''

Ten przykładowy fragment dodaje a

tag z `tytul widzeta` klasa do zakresu HTML. Możesz dodać dowolny inny fragment kodu jednowierszowego do edytora Atom zgodnie z tą składnią.

Po zapisaniu pliku konfiguracyjnego za każdym razem wpisz prefiks i naciśnij klawisz Tab, Atom wklei przynależny fragment kodu do edytora kodu. Nazwa fragmentu (w przykładzie) `tytul widzeta`) zostanie wyświetlone w polu wyników autouzupełniania.

4. Utwórz fragmenty kodu wieloliniowego

Fragmenty kodu wieloliniowego użyj nieco innej składni. Musisz dodać te same dane, co w przypadku fragmentów pojedynczej linii - zakres, nazwę, prefiks i treść fragmentu.

Różni się tutaj tym, że musisz umieścić fragment kodu w parze „” „ (trzy podwójne cytaty).

 „.text.html.basic”: „Image Link”: „prefix”: „iml” body ”:„ ””     
 „” „

Jeśli chcesz dodać więcej niż jeden własny urywek w tym samym zakresie dodaj nazwę zakresu tylko raz, następnie lista fragmentów jeden po drugim:

 '.text.html.basic': 'Widget Title': 'prefix': 'wti' body ':'„Image Link”: „prefix”: „iml” body ”:„ ””     
 „” „

5. Dodaj tabulatory

Możesz dodatkowo ułatwić korzystanie z własnych fragmentów kodu, dodając tabulator zatrzymuje się do treści fragmentu. Tabulatory wskazują miejsca, w których użytkownik może poruszać się za pomocą klawisza Tab. Dzięki tabulatorom można zaoszczędzić czas potrzebny na nawigację w tekście.

Możesz dodać tabulatory używając 1 USD, 2 USD, 3 USD,… składnia. Atom ustawi kursor w miejscu, które znajdzie 1 USD, następnie możesz przejść do 2 USD klawiszem Tab, a następnie do 3 USD, i tak dalej.

 „.text.html.basic”: „Image Link”: „prefix”: „iml” body ”:„ ””     
 „” „

6. Dodaj opcjonalne parametry

Atom pozwala na to dodaj dodatkowe informacje do twoich fragmentów przy użyciu opcjonalne parametry. Ta funkcja może być przydatna, jeśli ktoś inny również używa twojego edytora i chcesz poinformować go o celu tego fragmentu, lub jeśli masz tak skomplikowane fragmenty niestandardowe, że musisz dodać do nich notatki.

Wartości opcjonalnych parametrów to wyświetlane w polu wyników autouzupełniania pojawia się, gdy zaczynasz wpisywać prefiks. W poniższym przykładzie dodałem opis i a Więcej… link do poprzedniego tytul widzeta niestandardowy fragment:

 '.text.html.basic': 'Widget Title': 'prefix': 'wti' body ':'„opis”: „Możesz dodać tytuł widgetu z tym fragmentem do widgetu paska bocznego.„ descriptionMoreURL ”:„ http://hongkiat.com ”

Gdy użytkownik zaczyna wpisywać prefiks wti, dodatkowe informacje (opis + link) zostaną wyświetlone na dole pola wyników autouzupełniania. Spójrz na inne opcjonalne parametry możesz użyć, aby dodać dodatkowe informacje do własnych fragmentów.