Atom editor и Nodejs — быстрый старт

Atom — достаточно новый текстовый редактор для программистов, выпущенный командой GitHub. Сам по себе он очень похож на SublimeText, но только на первый взгляд, на самом деле он более гибок и удобен. Особенно для желающих программировать с использованием nodejs, ruby или python. Разумеется все три варианта я рассматривать в этой статье не буду, остановлюсь на ноде, как на более близком мне языке программирования.

Преимущества Atom

Что нужно для идеальной среды разработки под nodejs или любой другой современный скриптовый язык программирования, например под ruby? Нужна консоль, нужен редактор кода и нужен, по возможности, дебаггер. Консоль нам нужна, чтобы устанавливать пакеты в проект, через команды типа «npm install», генерировать проекты используя expressjs, например, и делать многие другие вещи. Текстовый редактор нужен для редактирования кода. Ну и дебаггер — чтобы видеть ошибки и их отлаживать. Это аж целых три инструмента. Для сравнения тот-же php при разработке приложений требует наличия лишь одного текстового редактора. Больше ничего ему не требуется. То-же самое с C#, который поставляется вместе с .net платформой. Там нет лишнего геморроя, который надо было бы держать вечно открытым.

Возможно, для кого-то это и не проблема… а мне не нравится.

Дело в том, что я адепт весьма старой школы погромиздов и … так сложилось, что я не люблю, когда у меня открыто несколько окон, типа окна терминала, окна редактора и окна браузера. Переключение между ними меня раздражает. А тут еще и браузер надо открывать, чтобы посмотреть — применились изменения или нет. Короче целая пляска с бубном. Мне вот уже 3 года пытаются доказать, что нода, де, быстрее и удобнее для разработки приложений, чем php, но пока, из-за свистопляски с консолью, я что-то не спешу с этим соглашаться. К счастью есть atom, в котором можно добавить терминал и дебаггер прямо внутрь интерфейса, используя плагины. Причем работать все это дело будет как под линуксом, так и под шиндой.

Вот как выглядит atom в настроенном виде:

Внизу вы видите удобную вкладочку с терминалом и запущенный в ней тестовый nodejs сервер. Классно?

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

Первая ошибка — это отсутствие кавычки.

А вот вторая уже интереснее, хехе.

Это стилистическая ошибка, как выяснилось. То есть редактор сам следит за стилем написания кода. И если вы допускаете ошибки в этом самом стиле, он вас предупреждает.

Ну или, например, вот:

Поставил некрасивый или лишний пробел — на тебе ошибку! Зато на правильно стилизованный код он не жалуется:

Так-же имеется очень мощное автозавершение кода, которое было в том-же sublimetext, если вы его использовали. Но там, как вы помните, небыло подсветки аргументов функции. Тут — подсветка аргументов есть!

Однако, стоит заметить, что эти возможности «из коробки» не доступны. Вам придется настроить все самостоятельно. А я вам в этом помогу.

Настраиваем Atom и Nodejs

Для начала не плохо бы скачать и установить себе на пк оба этих приложения.

Nodejs можно скачать тут, а Atom — тут. Причем, если у вас Linux, думаю, можно будет поискать эти пакеты в доступных вам репозиториях.

Что меня приятно удивило при загрузке ноды, так это ее малый размер, всего 20 мегабайт. Для сравнения тот-же .net весит под 200 мегабайт, а джава, наверняка, и того больше, учитывая то количество мусора, которое имеется в этих пакетах. Atom, же, сам весит довольно много, но… и функций у него тоже много.

После установки запустите Atom. Нужно будет установить ряд пакетов, чтобы все работало как надо.

Собственно список пакетов:

• Script — для запуска/компиляции большинства скриптов
• atom-nodejs-snippets — автозавершение кода для nodejs
• platformio-ide-terminal — та самая консоль-терминал
• linter — подсветка ошибок (ядро)
• linter-jshint — подсветка ошибок для JavaScript и JSON
• linter-jscs — подсветка ошибок в jsvascript внутри тегов <script>
• atom-ternjs — всплывающие подсказки для js
• hyperclick — всплывающие описания функций(ядро)
• js-hyperclick — всплывающие описания функций для js

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

Покажу вам на примере установку одного пакета.

Идем в меню File -> Settings

Перед нами появится список настроек, где внизу будет пункт Install

Теперь остается просто ввести название пакета в соответствующее поле

после чего нажать <Enter> и получить список пакетов, доступных для установки

Остается выбрать Install и дождаться установки.

Управление пакетами осуществляется через специальный пункт меню <Packages>. Если вы использовали notepad++ то найдете в этом сходство редакторов.

Просто берем каждый пакет из списка выше и устанавливаем.

Терминал в Atom

После установки пакета platformio-ide-terminal у вас появится внизу на панельке небольшой значок «+», нажмите на него и откроется терминал в текущей папке проекта.

Блок открытой консоли можно свернуть, ткнув на значок стрелочки.

Чтобы развернуть ее назад, надо нажать на мини-иконку терминала.

Вот, собственно и все.

Создаем первое приложение nodejs используя Atom

Что Atom’у надо для проекта? Папку. Создаем любую папку и открываем ее через соответствующее меню.

В итоге редактор отобразит нашу папку в боковой панели.

Теперь надо в эту папку запихнуть проект на nodejs. Ну, в смысле, исходные файлы этого проекта. Нажмем на плюсик внизу и откроем терминал, после чего установим expressjs введя туда команду

npm install express-generator -g

Вот так:

После завершения команды берем и генерируем в текущем каталоге приложение nodejs express командой

express --view=jade

где аргумент —view определяет шаблонизатор, для вашего будущего приложения, вот возможные варианты — (ejs|hbs|hjs|jade|pug|twig|vash).

После выполнения команды, в вашей папке появится ряд файлов.

Однако, это не конец работы с консолью. Необходимо установить зависимости для нашего приложения. Делается это командой:

npm install

После ее выполнения можно переходить к редактированию файлов.

Например, откроем файл представления, view->index.jade и напишем там что-нибудь…

А теперь, давайте запустим наше приложение, выполнив в консоли команду

npm start

Терминал запустит наш проект и перейдет в режим ожидания

 

Увидеть результат запуска можно перейдя по адресу: http://localhost:3000

Чтобы остановить работу сервера, надо в блоке консоли нажать Ctrl+C, это остановит сервер и вы сможете изменять файлы проекта.

Вот, собственно и все.

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

 

Запись Atom editor и Nodejs — быстрый старт впервые появилась Личный блог Гарри.

Источник