Настройки Atom для Front-end разработкилоготип_Atom

Содержание:

Превращаем редактор в IDE

Что такое Atom?

Атом - прекрасный кросплатформенный текстовый редактор, который можно улучшить до полноценной IDE с помощью установки дполнительных плагинов. Хотя сам редактор имеет вполне хороший функционал и готов к работе из коробки, но всегда хочется ещё больше расширить свои возможности, улучшить скорость и удобство разработки. Для Вас перечислены наиболее интересные плагины а ткже инструкции по установке для подготовки к front-end разаработке:

Работа с html и css

  1. Emmet - пишем много кода с помощью простых сокращений. Нажатие на Tab разворачивает сокращение
  2. Color Picker - вызов удобной цветовой палитры простым сочетанием клавиш Ctrl+Alt+C или Cmd+Shift+C
  3. HTML Preview - смотрите результат своей работы, не выходя из редактора (аналог Plunker)
  4. File-icons - красивые иконки для файлов в проекте
  5. W3c Validation - проверьте ваш HTML и CSS код на наличие ошибок
  6. Autocomplete Paths - удобная навигация по файлам при изменении атрибутов src, href и т.п.
  7. Can I Use - узнайте, какие браузеры поддерживают введённые теги и свойства
  8. Multi-cursor - редактируйте сразу несколько строк/слов обновременно
  9. Linter - подсвечивает ошибки в коде
  10. Autoprefixer - добавляет префиксы к CSS для работы во всех браузерах
  11. Auto-close HTML - автоматически закрывает открытые html-теги

Работа c javascript и прочее

  1. JS Snippets - позволяет писать много кода с помощью простых сокращений
  2. JS Hint - проверьте ваш HTML и CSS код на наличие ошибок
  3. Project palette finder - позволяет быстро найти цвета, использованные в проекте
  4. Minimap - миникарта вашего проекта - почувствуйте себя стратегом!
  5. Autocomplete plus - автозаполнение кода
  6. Regex Railroad Diagram - гениальный плагин для регулярных выражений. Показывает регулярные выражения в графическом формате =)
  7. Symbols Tree View - панелька со списком функций и переменных, как в WebStorm. Для удобства советую включить все галочки, и написать в AutoHiddenTypes "variable class", Var, Vars, var. Это исключит переменные из панели и сама панель будет появляться только при наведении на неё.
  8. Synced Sidebar - синхронизирует боковую панель выделяя в нем активный файл.
  9. Term - красивые иконки для файлов в проекте
  10. Uglify - минимзирует и сохраняет js файл
  11. TODO-show - окно с задачами
  12. Highlight Selected - подсвечивает ошибки в коде
  13. Spell check - проверка правописания (только английстий язык)
  14. Open recent -открыть недавно закрытые файлы/проекты
  15. SVG Preview -показывает картинку svg прямо в редакторе
  16. Подробная инструкция о настройке и установке Atom http://blog.harrix.org/article/6076#h2_28

Установка редактора и пакетов:

Шаг 1

Скачать редактор с оффициального сайта

Установить и открыть

Шаг 2

Перейти файл -> настройки

Шаг 3

Выберите вкладку "install"

Окно настроек

Шаг 4

Введите название пакета, нажмите Enter, затем кликните на слово install

Установка

Подробнее о пакетах

Emmet

Простые сокращения мгновенно расширяются в сложные фрагменты кода, Emmet превратит вас в более продуктивного разработчика.

Синтаксис

Подготовка к работе с новым HTML документом занимает менее чем секунду. Просто введите ! или html:5, нажмите Tab

emmet

Фигурные скобки используются для содержания. К примеру, h1{foo} преобразится в:

foo

Квадратные скобки используются для атрибутов. Итак, a[href=#] выдаст следующее:

emmet

Подробнее на хабре

Color Picker

Теряете много времени на подбор цветов? Пользуетесь отдельными инструментами, открывая в соседнем окне? Хватит это терпеть! При установке пакета Color Picker Вы сможете увидеть удобную цветовую палитру прямо в редакторе и выбрать подходящий цвет в любимом представлении.

Скриншот пикера

Для вызова цветовой палитры, Вам надо переместить курсор на то место, где будет располагаться цвет (в том числе числе и на прошлый цвет), затем нажать сочетание клавиш Ctrl+Alt+C для пользователей Windows и Linux, или Cmd+Shift+C для пользователей OS X

Скриншот пикера2

Для переключения представления цвета, нужно нажимать на сокращение этого представления (отмечено стрелочками). После выбора цвета, нажмите на клавишу Enter, чтобы этот цвет вставился в редактор.

Чтобы установить Color Picker, перейдите в настройки, далее install и выберете пакет color-picker.

Скриншот пикера3

Подробнее можете узнать на сайте проекта Atom Color Picker