Создание сайтов в Доброполье, ДНР. 12 основных пакетов Atom для веб-разработки

В этой статье мы рассмотрим 12 лучших пакетов Atom для веб-разработчиков. У Atom много конкурентов, включая Visual Studio Code и Sublime Text, но он по-прежнему остается популярным и компетентным инструментом веб-разработки.

Зачем использовать редактор Atom?

VS Code, возможно, завоевал сердца и умы веб-разработчиков за последние несколько лет, но редактор GitHub Atom остается одним из лучших и более функциональных редакторов кода на рынке. Причины, по которым это очень нравится, включают:

установщики доступны для Windows, Mac и Linux

он постоянно обновлялся в течение последнего десятилетия

скорость улучшилась после некоторой критики первоначальных выпусков

его по-прежнему можно бесплатно загрузить и использовать без ограничений и надоедливых экранов.

Microsoft приобрела GitHub в 2018 году, поэтому теперь у компании есть два хороших редактора кода на основе Electron. Долгосрочное будущее Atom, вероятно, находится под вопросом, но разработка продолжается. Если вы ищете новый редактор кода — возможно, после того, как Adobe отказалась от Brackets — Atom должен быть в верхней части вашего списка.

Пакеты и темы Atom

Atom всегда позиционировал себя как «взламываемый текстовый редактор 21 века». Базовая установка имеет сравнительно немного функций, но вы можете расширить ее с помощью надстроек, известных как пакеты.

На момент написания статьи доступно более 3000 тем Atom и 9000 пакетов Atom. Частично это объясняется тем, что Atom можно расширить с помощью веб-технологий. Если вы являетесь разработчиком Node.js или клиентского JavaScript, вы знаете достаточно, чтобы создавать собственные пакеты Atom и улучшать Atom по своему желанию.

Как установить пакеты Atom

Добавлять пакеты Atom довольно просто, так как Atom поставляется со встроенным менеджером пакетов. (Многих разработчиков привлекает Atom отчасти из-за простоты установки пакетов Atom.)

Откройте редактор Atom, щелкните меню «Правка «на верхней панели навигации, затем выберите «Настройки «. Откроется новая вкладка «Настройки «. Нажмите на пункт меню + Установить, и справа появится поле поиска. Это позволит вам искать новые пакеты Atom по имени. Когда вы найдете нужный пакет Atom, нажмите кнопку «Установить «.

Установить пакеты Atom

Нажав на пункт меню «Пакеты «, вы увидите, какие пакеты Atom установлены в данный момент. Все, что вы установили самостоятельно, появится в пункте меню «Пакеты сообщества». Вы заметите, что есть пункт меню «Основные пакеты «. Здесь перечислены те пакеты, которые установлены по умолчанию. Вы можете отключить их, если хотите, но лучше этого не делать, так как это повлияет на основные функции редактора.

Установленные пакеты Atom

Установка пакетов Atom из командной строки

Atom также поставляется с инструментом командной строки под названием apm (что означает Atom Package Manager). Вы также можете использовать этот инструмент для установки пакетов прямо из терминала.

Синтаксис следующий: apm install <package-name>.

Вы можете настроить apmс помощью параметра apm configкомандной строки или вручную отредактировав ~/.atom/.apmrcфайл. Печатание apm helpдаст вам представление о том, что еще он может сделать.

И с учетом сказанного, вот двенадцать лучших пакетов Atom — плюс несколько бонусных опций — которые делают Atom еще лучшим редактором кода...

1. Значки файлов

Значки файлов и папок по умолчанию в Atom лучше всего описать как «функциональные». Набор значков, например, file-iconsулучшает внешний вид редактора и упрощает поиск файлов определенного типа.

значки файлов

Получите пакет значков файлов здесь: file-icons

Найдите «значок» на панели + «Установить «, чтобы найти десятки альтернативных вариантов.

2. Менеджер проекта

Atom обеспечивает простое управление проектами на основе папок. Этого достаточно, если вы переключаетесь между несколькими проектами, но project-managerидеально подходит для чего-то более сложного. Он предлагает параметры командной палитры и редактируемый файл JSON, в котором вы можете определять проекты со своими собственными настройками, такими как цвета, настройки вкладок и т. д.

Надстройка пакета менеджера проектов Atom

Получите пакет Atom Project Manager здесь: project-manager

3. Настройки синхронизации

Если вы используете Atom более чем на одном устройстве, полезно синхронизировать настройки, привязки клавиш и фрагменты кода между установками. Вы можете выполнить синхронизацию вручную, клонировав файлы в папке Config (Settings, затем Open Config Folder), но sync-settingsесть более простой автоматизированный вариант. Настройки сохраняются в Gist, но другие пакеты Atom позволяют выбрать локальную папку или репозиторий Git.

Получите пакет настроек Atom Sync здесь: sync-settings

4. Каждое шоу

Вы запустили Atom, открыли папку и... что дальше? Пакет todo-showAtom показывает разбросанные по вашему проекту комментарии, содержащие такие ключевые слова, как TODO, FIXMEи CHANGED, но вы также можете добавить свои собственные регулярные выражения.

все-шоу

Получите пакет Atom Todo Show здесь: todo-show

5. Миникарта

minimap— один из самых популярных пакетов Atom, который скачали более семи миллионов раз. Он отображает сжатый вид вашего кода в правой части окна редактора кода, что очень помогает для быстрой навигации. Эта особенность входит в ваше подсознание; вы не будете думать, что используете его, но вы будете скучать по нему, когда его там нет.

миникарта

Получите пакет Atom Minimap здесь: minimap

6. Выделите выбранное

Когда вы выбираете ключевое слово или переменную в VS Code, Sublime Text или Notepad++, он выделяет все остальные экземпляры. highlight-selectedпривносит эту функцию в Atom и становится еще лучше в сочетании с minimap-highlight-selected:

выделение

Получите пакет Highlight Selected Atom здесь: highlight-selected

Получите пакет minimap-highlight-selected здесь: minimap-highlight-selected

7. Автозакрытие HTML

Как следует из названия, этот пакет автоматически добавит закрывающий HTML-тег, когда вы заполните открывающий тег. Это может быть простой пакет, но я не могу справиться без автоматического закрытия тегов HTML! autoclose-htmlудваивает скорость создания разметки. Он работает из коробки, но пакет также позволяет вам определить, какие теги должны завершаться встроенными (например, или

•  
• ), а какие должны создавать блоки новой строки (например,
  ...
  или
  1. ...
     1. ).

        Получите пакет Auto Close HTML Atom здесь: autoclose-html

        8. Пигменты

        Большинство редакторов имеют средства предварительного просмотра цвета CSS, но немногие соответствуют pigmentsпакету для Atom. Он анализирует цвета, пользовательские свойства CSS, переменные препроцессора и даже выполняет функции изменения цвета, такие как lighten () и darken (). Он сканирует ваши исходные файлы, чтобы создать палитру цветов, чтобы вы могли ссылаться на них где угодно.

        пигменты

        Получите пакет Pigments Atom здесь: пигменты

        Кроме того, пакет Color Picker предназначен для тех, кто предпочитает выбирать цвета, а не запоминать их имена или шестнадцатеричные значения.

        Получите пакет Color Picker здесь: color-picker

        9. Линтер

        Вы можете запускать линтеры из командной строки, но это не так быстро и эффективно, как живая проверка кода в редакторе. Линтер один из лучших. Это быстро и менее навязчиво, чем у некоторых конкурентов.

        Обратите внимание, что Linter — это основной пакет Atom, предоставляющий API для десятков языков программирования. Некоторые, такие как HTML и CSS, не требуют дополнительного программного обеспечения. Для других, таких как eslint, требуется модуль Node и параметры конфигурации (предоставляются полные инструкции).

        Линтинг вашего кода значительно улучшит качество вашего кода, поэтому я рекомендую вам попробовать.

        Получите пакет Linter здесь: linter

        Получите пакет HTMLHint здесь: linter-htmlhint

        Получите пакет Atom CSSLint здесь: linter-csslint

        Получите пакет ESLint здесь: linter-eslint

        10. Автоматическое определение отступа

        Кодировщики никогда не согласятся использовать табуляции или пробелы. Даже когда они это делают, они могут предпочесть их с двумя, четырьмя или восемью вариантами символов. Обычно я выбираю то, что раздражает большинство людей (трехсимвольные твердые табуляции?), но auto-detect-indentationработаю над тем, что требует проект, поэтому вам не нужно об этом беспокоиться.

        Получите пакет Atom Auto Detect Indentation здесь: auto-detect-indentation

        Кроме того, вы можете заставить код каждого соответствовать вашему предпочтительному стилю, используя Atom Beautify:

        Получите пакет Atom Beautify здесь: atom-beautify

        11. Телетайп

        Если вы когда-либо использовали Live Share для VS Code, вы поймете, как это произвело революцию в парном программировании. Расширение позволяет двум людям одновременно удаленно редактировать код в одном рабочем пространстве.

        teletypeявляется эквивалентным пакетом для Atom. Это бета-сервис, но он выглядит хорошо и кажется надежным.

        Получите пакет Atom Teletype здесь: телетайп

        12. Больше пакетов Atom

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

        Emmet (ранее известный как Zen Code) может преобразовать CSS-подобные выражения в HTML-теги: emmet

        Если вы создаете веб-службы REST, REST-клиент Atom предоставляет инструмент для быстрого тестирования HTTP. Он не сравнится с мощными альтернативами, такими как Postman, но отлично подходит для быстрого и грязного тестирования: rest-client

        клиент отдыха

        Наконец, нет необходимости вручную проверять наличие обновлений. auto-update-packagesпроверяет ваши пакеты каждые шесть часов и делает всю работу за вас: auto-update-packages

        Дополнения в нерабочее время

        Если ваш подсчет ключей (keycount) доказывает, что вы сделали достаточно для дня, расслабьтесь, читая комиксы xkcd или быстро играя в Tetris, Reversi, Pong, Snake или SimCity!