12 основных пакетов Atom для веб-разработки

Atom Изучение

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

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

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

  • установщики доступны для 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 установлены в данный момент. Все, что вы установили самостоятельно, появится в пункте меню » Пакеты сообщества«. Вы заметите, что есть также пункт меню Core Packages. Здесь перечислены те пакеты, которые установлены по умолчанию. Вы можете отключить их, если хотите, но лучше этого не делать, так как это повлияет на базовую функциональность редактора.

Здесь перечислены те пакеты, которые установлены по умолчанию

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

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

Синтаксис выглядит следующим образом : apm install <package-name>.

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

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

1. File Icons

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

Значки файлов и папок по умолчанию в Atom

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

2. Project Manager

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

Он предлагает параметры палитры команд и редактируемый файл

3. Sync Settings

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

4. Todo Show

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

Вы запустили Atom, открыли папку, а потом... что дальше

5. Minimap

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

Эта функция входит в ваше подсознание; вы не будете думать

6. Highlight Selected

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

становится еще лучше в сочетании с minimap-highlight-selected

7. Auto Close HTML

Как следует из названия, этот пакет автоматически добавит закрывающий тег HTML, когда вы заполните открывающий тег. Это может быть простой пакет, но я не могу обойтись без автоматически закрывающихся HTML-тегов! autoclose-htmlудваивает скорость создания разметки. Он работает из коробки, но пакет также позволяет вам определять, какие теги должны заполняться встроенными (например, <p></p>или <li></li>), а какие должны создавать блоки новой строки (например, <article> ... </article>или <ol> ... <ol>).

Читайте также:  LeetCode - лучший способ подготовиться к собеседованию?

8. Pigments

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

Большинство редакторов имеют средства предварительного просмотра

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

9. Linter

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

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

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

10. Auto Detect Indentation

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

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

11. Teletype

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

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

12. More Atom Packages

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

  • Эммет (ранее известный как Zen Code) может расширять CSS-подобные выражения в HTML-теги: emmet
  • Если вы создаете веб-службы REST, клиент REST от Atom предоставляет инструмент для быстрого тестирования HTTP. Он не подходит для мощных альтернатив, таких как Postman, но отлично подходит для быстрого и грязного тестирования: rest-client Если вы создаете веб-службы REST
  • Наконец, нет необходимости вручную проверять наличие обновлений. auto-update-packagesпроверяет ваши пакеты каждые шесть часов и делает всю работу за вас: auto-update-packages
Оцените статью
bestprogrammer.ru
Добавить комментарий