Як додати спеціальні фрагменти коду до Atom

Це не випадково Атом, редактор вихідних кодів, створений Github, популярний у спільноті веб-розробників. Це не тільки легко розширюється з тисячами пакунків Atom широка мовна підтримка, але майже кожна його частина настроюється користувачем.

Використовуючи Atom's Функція фрагментів, Ви можете зробити ваш робочий процес кодування більш продуктивним, як повторне використання повторюваних фрагментів коду Ви можете зменшити повторювану частину вашої роботи. У цій посаді я покажу вам, як ви можете використовуйте вбудовані фрагменти коду Atom, і створити власні спеціальні фрагменти.

Використовуйте вбудовані фрагменти коду

За замовчуванням Atom поставляється з вбудовані фрагменти коду, кожен з яких є прив'язані до області застосування що належать до певного типу файлу. Наприклад, якщо ви працюєте над файлом з .js розширення, для цього файлу будуть доступні лише фрагменти, що належать до області JavaScript.

Бачити всі доступні фрагменти для поточного типу файлу натисніть Alt + Shift + S. Якщо ви вибрали фрагмент зі спадного списку та натисніть його, Atom вставить повний фрагмент у ваш редактор без будь-яких додаткових проблем.

Якщо вам вже відомі варіанти, вам не обов'язково завантажувати весь список. Коли ви починаєте друкувати, Atom з'являється вікно результатів автозаповнення вгору, що містить доступні фрагменти коду, що належать до певної області, і рядок, який ви набрали до цих пір.

Наприклад, якщо ви введете h символу в a .html файл, випадаючий список з усіма вбудованими фрагментами HTML, починаючи з h з'явиться.

Натиснувши будь-яку опцію, Atom буде вставте повний тег HTML (напр. ), і розташуйте курсор у початковому та закриває тегах.

Якщо ви не хочете займатися випадаючим списком, ви можете досягти такого ж результату, набравши h1, і натискання клавіші Tab або Enter - обидві ці клавіші вставити повний фрагмент коду що належать до префікса фрагмента.

Додавання власних фрагментів коду

1. Знайдіть файл конфігурації

Щоб додати власні фрагменти коду до Atom, спочатку потрібно знайти називається файл налаштування snippets.cson тобто Позначення об'єкта CoffeeScript файл.

Натисніть на Файл> Фрагменти ... у верхній панелі, а Atom відкриє вікно snippets.cson файл, до якого можна додати власні фрагменти.

2. Знайдіть потрібний обсяг

Ви будете потребувати чотири речі щоб додати свій власний фрагмент:

The назва області застосування
The ім'я фрагмента
The префікс що буде функціонувати як ручка фрагмента
The тіло фрагмента

Ім’я, префікс і тіло фрагмента (2-4) залежить тільки від вас, але ви повинні знайти назву області застосування (1) перед додаванням власних фрагментів.

Щоб знайти потрібну область, натисніть кнопку Файл> Налаштування у верхньому рядку меню, потім знайдіть Пакети на вкладці Параметри. Тут виконайте пошук потрібної області, наприклад, якщо ви хочете додати фрагменти коду до мови HTML, типу HTML в панель пошуку.

Натисніть на пакет підтримки мови вибраної мови та відкрийте власні налаштування. Серед Налаштування граматики, Ви можете швидко знайти назву області, як ви можете побачити на скріншоті нижче.

Ось деякі області, які ви можете використовувати в своїх проектах Atom:

Простий текст: .text.plain
HTML: .text.html.basic
CSS: .source.css
Sass: .source.sass
МЕНШЕ: .source.css.less
JavaScript: .source.js
PHP: .text.html.php
Python: .source.python
Java: .source.java

Не забувайте, що вам потрібно додати крапку (.) перед назвою області застосування для того, щоб використовувати його в snippets.cson файл.

3. Створіть окремі фрагменти коду

Щоб створити a однорядковий фрагмент коду, потрібно додати область, ім'я, префікс і тіло фрагмента snippets.cson файл, використовуючи наступний синтаксис:

 '.text.html.basic': 'Заголовок віджета': 'префікс': 'wti' тіло ':''

Цей приклад фрагменту додає a

з тегом `заголовок віджета` клас до області HTML. Після цього синтаксису можна додати будь-який інший однорядковий фрагмент коду в редактор Atom.

Після збереження файлу конфігурації, коли ви введіть префікс і натисніть клавішу Tab, Atom вставить належне тіло фрагмента в редактор коду. Ім'я фрагмента (у прикладі `Заголовок віджета`) буде показано у полі результатів автозаповнення.

4. Створіть фрагменти багаторядкового коду

Багаторядковий фрагмент коду використовувати трохи інший синтаксис. Потрібно додати ті ж дані, що й для однорядкових фрагментів - область, ім'я, префікс і тіло фрагмента.

Різниця тут полягає в тому, що потрібно розмістити тіло фрагмента в межах пари "" " (три подвійних лапки).

 '.text.html.basic': 'Посилання на зображення': 'префікс': 'iml "body':" ""     
 "" "

Якщо ви хочете додати більше одного власного фрагмента до тієї ж області, додайте назву області тільки один раз, потім перелічити фрагменти по одному:

 '.text.html.basic': 'Заголовок віджета': 'префікс': 'wti' тіло ':'"Посилання для зображень": "префікс": "iml" body ":" ""     
 "" "

5. Додати вкладку "Зупинки"

Можна ще більше полегшити використання власних фрагментів коду, додавши табуляції до тіла фрагмента. Позиції табуляції вказують місця, де користувач може переміщатися за допомогою клавіші Tab. За допомогою вкладок ви можете зберегти час, необхідний для навігації в тексті.

Можна додати закладки за допомогою $ 1, $ 2, $ 3,… синтаксис. Atom позиціонує курсор на місці, яке він знаходить $ 1, потім можна перейти до $ 2 клавішею Tab, потім - $ 3, і так далі.

 '.text.html.basic': 'Посилання на зображення': 'префікс': 'iml "body':" ""     
 "" "

6. Додайте додаткові параметри

Атом дозволяє додати додаткову інформацію до фрагментів за допомогою необов'язкові параметри. Ця функція може бути корисною, якщо інший користувач також використовує ваш редактор, і ви хочете повідомити їх про мету фрагмента, або якщо у вас є такі складні користувацькі фрагменти, які потрібно додати до них.

Значення необов'язкових параметрів відображається в полі результатів автозаповнення що з'являється, коли ви починаєте вводити префікс. У наведеному нижче прикладі я додав опис & a Більше… посилання на попереднє Заголовок віджета спеціальний фрагмент:

 '.text.html.basic': 'Заголовок віджета': 'префікс': 'wti' тіло ':'"description": "Ви можете додати заголовок віджета з цим фрагментом у віджеті бічної панелі." descriptionMoreURL ':' http://hongkiat.com '

Коли користувач починає вводити префікс wti, додаткову інформацію (опис + посилання) буде показано у нижній частині вікна результатів автозаповнення. Подивіться на інші необов'язкові параметри можна використовувати, щоб додати додаткову інформацію до власних фрагментів.