Автор оригинала: FreeCodeCamp Community Member.
Джимми Чжан
Я недавно переключил работу, что связано с большим количеством акклиматизации: новые коллеги подружиться, новые условия для изучения, новая среда развития для усвоения. Но больше всего, коммутатор пришел с изменением языков программирования, вдали от приборной эстетики Python и прямо в угловой и вьющийся в курсовой мир JavaScript.
Когда я продолжал понимать кроншлетки и пропустить скобки, я искал то, что поможет мне ориентироваться на незнакомой территории. К счастью, я нашел субличные фрагменты.
Я люблю Sublime Text-фрагменты, потому что они уменьшают громоздкие определения к нескольким клавишам, как это:
Обзор
Sublime Text Snippets ускоряет акт написания кода, предоставляя быстрый способ вставить блоки текста, которые неоднократно отображаются в проекте. Они оба легко понимать, так и просты для записи, что делает их отличным инструментом для экономии времени и устранения ошибок при разработке.
Фрагмент карты отображает спусковое слово до заранее определенного блока текста, оба которых вы определяете. Чтобы вызвать фрагмент, введите Trigger Word и нажмите вкладка Отказ Это простое действие расширяет спусковое слово в сопоставленный блок текста – отменил как можно больше скобок, скобок, а также полуобывающихся толчков, всегда подходящих, а в правильном порядке.
Примечание: Приведенные ниже примеры применяются в основном на JavaScript и реагируют, но информация о фрагментах может быть применена к любому языку или структуре программирования.
Создание фрагментов
Чтобы создать новый фрагмент в Sublime Text 3, перейдите к:
Tools -> Developer -> New Snippet...
Это открывает новое окно, содержащее новый шаблон фрагмента, который выглядит так:
Есть четыре части в фрагмент. Хотя требуется только одна часть, определяя все четыре рекомендуется.
1) Содержание (строка 3): обязательно
Определите блок текста, который будет расширяться с помощью фрагмента, отредактировав строку (ы) между Та [а ND ]]> Теги. (Отныне, блок текста, который расширяется после того, как призывает фрагмент, будет называться Snip Pet's C на Палатка).
Вы заметите наличие слов, окруженных знаком доллара, брекеты, числами и префиксированными номером. Эта необязательная разметка указывает Полевой маркер , который контролирует положение курсора после того, как фрагмент вызывается.
После расширения контента курсор автоматически перемещается в первый полевой маркер ( $ {1: это} выше). Вкладка «Нажатие» снова перемещает курсор на следующую нумеруемый полевой маркер, или к контелю содержимого фрагмента, если не осталось никаких полей (см. Pro Tip ниже).
Текст после толстой кишки в поле маркера не является обязательным. Если указано, он автоматически выбирается как часть движения курсора, что означает, что он может быть удален в одном SWIFT. Это делает текст после того, как толстая кишка отлично подходит для «заполненных» ценностей, которые предоставляют руководство о том, что следует заполнить, или для необязательных значений по умолчанию, например isrequireded поле в примере ниже.
Pro Tip Используйте $ 0 Полевой маркер (выходной маркер), чтобы явно определил, где курсор выйдет после того, как все маркеры поля были зарегистрированы. Это полезно, если вы хотите перекоснуть вкладка Ключ к автоматическому завершению после того, как фрагмент вызывается. Чтобы сделать это, поместите маркер выхода сразу после первого полевого маркера, как это: $ {1: пример} $ 0
2: Trigger Word (строка 6): необязательно
hello
Короткие и мнемонический триггерные слова лучше всего работают. Например, Babel React Snippet Карты пакетов CWM к ComponentWillmount и CWR к ComponentWillReceiveProps Отказ
Запусковые слова являются необязательными, потому что есть альтернативный способ вызвать фрагменты, которые мы будем охватывать в разделе «Расширенный раздел использования».
3: Область (линия 8): необязательно
source: python
Ограничение на область, где ваш фрагмент может быть вызван, улучшает точность и предотвращение столкновений. Например, с объемами того же триггерного слова могут иметь разные значения для различных языков программирования.
Это Гист Перечисляет, как определить область для длительного списка языков программирования, но природы способны намного больше. Подробнее мы будем покрывать обзоры в разделе «Расширенный раздел использования».
4: Описание (строка 10): необязательно
demo description
По какой-то причине тег описания не отображается в шаблоне создания фрагмента. Однако предоставление одного пригодится.
Фрагменты появляются в автоматическом полном меню Sublime Text, а также описательная фраза. Без описания эта фраза по умолчанию значение имени файла фрепта, которое не гарантированно имеет достаточно контекста, когда несколько фрагментов делятся один и тот же префикс.
Pro Tip Создайте ярлык клавиатуры для быстрого создания нового фрагмента. Перейти к Предпочтения -> Keybindi NGS и добавьте следующую строку в файл конфигурации «Пользователь» (конечно, REPLA CE CMD + AL T + N с любыми подходящими костюмированиями вас):
{ "keys": ["cmd+alt+n"], "command": "new_snippet" }Сохранение фрагментов
После создания своего фрагмента, обязательно сохраните его в файле, заканчивающемся в Sublime-Snippet Отказ На Mac, созданные пользователю фрагменты сохраняются по адресу:
~/Library/Application Support/Sublime Text 3/Packages/User
Создание нового фрагмента через пункт меню или ярлык клавиатуры автоматически подсказывает это место на сохранении.
Расширенное использование
Переменные среды
Мы охватывали четыре аспекта создания статического фрагмента. Однако можно создать динамические фрагменты с помощью переменных среды, которые содержат ссылки на контекст, в котором был вызван фрагмент.
Контекст – это расплывчатый термин, так что см. Документация Sublime Text Snippet для таблицы переменных среды и их точных значений.
Для примера того, как можно использовать переменные окружающей среды, моя команда посвящена конвенции, где таблица стилей компонента сохраняется под тем же именем файла, что и компонент, и дан .scss расширение.
Файл компонента может затем использовать эту конвенцию с помощью фрагмента с помощью $ Tm_filename Переменная среды.
$ Tm_selected_text или $ Выбор Переменная среды обслуживает более общего назначения. Помните, как я упоминал, был альтернативный способ призывающих фрагментов? Вместо того, чтобы нажать спусковое слово и ударить вкладка Вы также можете вызвать фрагменты через командную палитру.
На Mac, нажмите CMD + Shift + P Чтобы поднять палитру, введите «фрагмент» и выберите нужный фрагмент из выпадающего. Этот круг разбивки имеет одну основную выгоду – можно вызвать фрагмент с блоком текста, выбранным текстом, и для того, чтобы этот текст был включен как часть контента фрагмента. Это позволяет создавать «упаковочные» фрагменты, которые обернут выбранный текст с предложением IF, например.
Pro Tip Разверните ярлыки выбора Отлично подходят для быстрого выбора текста, чтобы обернуть с фрагментами, такими как один.
Расширенные области
Мы говорили о ограничивании фрагментов к определенным файлам исходного кода, но фрагменты часто имеют больше гранулированных контекстов, в которых они действительны. В качестве примера, такой метод, как ComponentWillUpdate Обычно имеет смысл только в определении компонента (класса), которое следующее определение фрагмента делает явную:
Включение meta.class.js В строке 8 означает, что фрагмент действителен только в ситуациях, когда редактируемый файл исходного кода – это файл JavaScript, и Курсор находится в определении класса. Если вы пытались вызвать фрагмент в пустом файле JavaScript, ничего не произойдет.
Чтобы полностью использовать силу областей, необходимо иметь небольшое понимание синтаксиса, спецификаций и селекторов охвата. Это нюансированные темы достойны собственного поста, поэтому я объясню их на очень высоком уровне, со ссылками на документацию, чтобы заполнить пробелы:
- Язык синтаксис Определяет, как исходный код разделен на приличия.
- СКОРОЙ маркируются области текста, которые соответствуют «единицам» языка программирования, таких как определения класса или функции. Каждая позиция в файле исходного кода имеет связанную область. Мета Симпатии наиболее актуальны для фрагментов.
- Компания селекторы «Запрос» область. Селекторы Scopes связаны с действиями (такими как фрагменты или сочетания клавиш), и используются для определения того, соответствуют ли действие, причитается текущий объем.
Pro Tip Лучший способ узнать о спецификациях, играют с ними. Переместите курсор на разные позиции в файл и используйте CMD + Shift + P Сочетание клавиш, чтобы открыть всплывающее меню, отображающее связанную область:
Фрагменты делают все секунды для создания. Тем не менее, они экономят гораздо больше усилий, а не просто, сохраняя, сколько вы должны напечатать. Предоставляя быстрый воспроизводимый способ расширения контента, фрагменты уменьшают ошибки. Они также абстрагируют детали трудно запомнить, такие как имена методов и их подписи. Все это освобождает ваши пальцы – и ваш мозг – сосредоточиться на том, что они хотят сделать большинство: напишите отличный код.