Як налаштувати Atom для веб-розробки
Дізнайтеся, як налаштувати Atom для веб-розробки та забезпечити найкраще середовище для розробки JavaScript, HTML і CSS, зрештою, редактор коду може підвищити або порушити вашу продуктивність.
Від початківців до старших розробників, редактор коду Atom. Ви можете налаштувати його скільки завгодно для будь-якого середовища за допомогою його рідних налаштувань або зовнішніх пакетів спільноти.
У мене немає упередженості говорити про Atom, тому що я, зокрема, пройшов через кількох редакторів. Мені подобався Sublime Text, і я працював з ним, поки не почав використовувати Atom особливо для веб-розробки.
По суті, Atom вже є чудовим редактором для веб-розробки. Він поставляється з уже встановленими основними мовами, але ми можемо покращити його ще більше, додавши деякі зовнішні пакунки.
Якщо ви працюєте з конкретними фреймворками, такими як React або Angular, я рекомендую вам шукати пакунки для синтаксису JSX, наприклад, на додаток до пакетів, які я розповім у цій статті.
Як встановити текстовий редактор Atom на Linux Mint 20 можно тут
Як встановити зовнішні пакети
Пакет або плагін — це програмний компонент, зовнішній для Atom, який може покращити деякі існуючі функціональні можливості або додати нові функції до редактора.
Пакет можна встановити лише кількома клацаннями, просто виконайте наведені нижче дії.
На Atom натисніть Ctrl + , (або Cmd + у Mac OS) щоб відкрити меню конфігурації.
Натисніть на «+ Встановити».
У полі «Пошук пакетів» введіть назву пакета.
Натисніть «Встановити», пакет буде встановлено і з’явиться на вкладці «Пакети».
Список пакетів для JavaScript, HTML і CSS
Ми підійшли до основного пункту цієї статті. Нижче я перелічу всі пакунки, рекомендовані для налаштування Atom для веб-розробки, і трохи розповім про функціональні можливості кожного з них.
Утиліти
JavaScript
HTML
CSS
Детальніший опис додаткових плаганів
File-icons
Замість того, щоб просто керуватися назвою файлу та розширенням, як щодо значка файлу? Додавання візуального ефекту до дерева файлів значно полегшить ваше життя.
Atom-beuatify
Автоматично форматуйте свій код за допомогою Atom Beautify. Він працює для кількох мов і може використовуватися з командою Packages > Atom Beautify > Beautify.
Autosave
Редактор автоматично зберігає, коли вони втрачають фокус або коли вікно закривається.
Цей пакет вимкнено за замовчуванням і його можна ввімкнути за допомогою параметра конфігурації autosave.enabled або поставивши прапорець «Увімкнено» у налаштуваннях пакета автозбереження у вікні «Параметри».
Minimap
Мінікарта постачається з системою плагінів, яка використовується для розширення відображених у ній функцій. Після активації плагіни мінікарти відомі і ними можна керувати за допомогою налаштувань мінікарти.
x-terminal
Плагін Atom на основі xterm для надання терміналів у вашому робочому просторі Atom. Форк atom-xterm
Prettier-atom
Відформатуйте код JavaScript автоматично за допомогою збереження (потрібно налаштувати) або за допомогою команди «Prettier: Format». Або скористайтеся ярликом: Ctrl + Alt + F (Linux / Windows) / Ctrl + Option + F (Mac).
Script
Запустіть код JavaScript безпосередньо на Atom. Він також працює для інших мов. Це не дуже корисно, якщо файл залежить від інших, але для налагодження одного файлу .js це досить корисно.
Atom-html-preview
Дозволяє переглядати зміни, які ви вносите у файл HTML в режимі реального часу. Дуже корисно, тому вам не доведеться весь час перемикати вікна.
Використовуйте Ctrl + Shift + H, щоб відкрити або закрити перегляд HTML.
Emmet
Відмінний пакет для автозаповнення HTML, CSS і скорочень. Я рекомендую вам глибше ознайомитися з цим пакетом (є кілька навчальних посібників на Youtube), і ви знайдете кілька досить приємних ярликів. Принцип роботи простий, просто введіть команду та натисніть вкладку. напр. html[tab] (генерує шаблон HTML) або ul.list>li*3[tab] (генерує повний список ul).
Emmet Snippets Compatibility
Пакет сумісності emmet з фрагментами автозаповнення. Дозволяє функції вкладки пакету фрагментів із автозаповненням мати пріоритет над функцією вкладки пакета emmet, дозволяючи користувачеві використовувати фрагменти, якщо вони доступні, і в інших випадках використовувати emmet.
Atom html-to-css
Генерує шаблон CSS на основі вибраного HTML. Дбає лише про класи, ігнорує ідентифікатори/інші можливі селектори. Підтримує CSS, SCSS, Sass, LESS і, можливо, інші синтаксиси. Підтримка BEM (насправді, наразі більше схожа на підтримку BE. Підтримка модифікаторів буде додана, якщо потрібно). Настроювані вкладення, групування та форматування.
Color-picker
Дуже корисний пакет для швидкої зміни кольорів не тільки в CSS, а й на будь-якій іншій мові. Щоб використовувати його, виберіть колір, клацніть на ньому правою кнопкою миші та натисніть «Вибір кольору» або скористайтеся ярликом Ctrl + Shift + C (або Cmd + Shift + C на Mac).
Висновок
Це перша частина моїх налаштувань текстового редактору Atom, у другій я розвовім як звінити мову і налаштувати редактор для комфортнішноі роботи.