Как настроить atom для javascript

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 внутри тегов

Источник

Как настроить Atom для разработки на JavaScript

Атом – популярный бесплатный редактор кода, созданный разработчиками GitHub’а для программистов. Он активно развивается, для него есть сотни плагинов, его легко настраивать под свои нужды.

Атом построен на технологии Electron, поэтому он работает на Windows, Linux и macOS. Среди базовых возможностей редактора, доступных сразу после установки:

• подсветка синтаксиса для множества популярных языков и файловых форматов
• удобная навигация
• встроенный предпросмотр Markdown
• умное автодополнение
• встроенный пакетный менеджер

Пакетный менеджер нужен для установки и удаления пакетов расширений (плагинов). Для удобной разработки на JavaScript для бэкенда и фронтенда нужно установить несколько пакетов.

Для установки нового пакета зайдите в настройках во вкладку “Install”, введите название пакета в строке поиска, нажмите кнопку “Install”.

Стандарты кодирования

Eslint – это утилита, проверяющая стандарты кодирования на JavaScript. Стандарт де-факто в мире JS.

Нужно сначала установить eslint в системе, а потом установить расширение Атома, которое будет использовать установленный линтер. Есть разные способы интеграции линтера с расширением. Мы рассмотрим установку линтера глобально в системе.

1. Установите Node.js используя пакетный менеджер вашей операционной системы.
2. Установите eslint командой npm install -g eslint . Вероятно, вам понадобится использовать sudo .
3. Установите плагины, которые конфигурируют eslint . Без них (по умолчанию) eslint ничего не проверяет.

eslint требует наличия конфигурационного файла. Создайте в корне вашего проекта файл .eslintrc.yml со следующим содержанием:

Автоматическое дополнение

Встроенное автодополнение в редакторе работает по самой примитивной схеме, анализируя содержимое файлов. С помощью сторонней утилиты “tern” можно добиться более продвинутого поведения. “tern” умеет:

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

Расширение Атома atom-ternjs не требует установки ничего другого и работает само по себе.

Автоматическое дополнение файлов и модулей

Полезное расширение autocomplete-modules автоматически дополняет название файлов и модулей при импорте.

Переход на определения

js-hyperclick позволяет быстро перемещаться к определению функции или переменной по клику.

Источник

Настройка Atom от GitHub для работы с PHP, Python и некоторыми другими языками программирования

Изначально считаем что у Вас установлена поддерживаемая операционная система, Node.JS и Atom. В примерах мы работаем в OpenSUSE (13.1) в нём (и вообще в дистрибутивах *nix) уже «из коробки» обычно есть не только Python но PHP и другие языки программирования. Так же исправно работает на Ubuntu (>12.04). Если у Вас Windows 7 или 8, а раньше Вы с ними (языками) не работали то их предварительно необходимо скачать и установить.
Примечание: перед началом работы желательно запускать Atom под root.
опыт показывает — работает стабильнее

Linter

Идеология Atom к подсветке в том, что основным пакетом для работы с синтаксисом и его анализа будет Linter, который является верхним уровнем в API для других линтеров кода. Это сделано для прекращения «войны между плагинами» (The idea is to stop the linter plugins war, by providing a top level API for linters to parse and display errors in the Atom editor). Тем не менее, не все сторонние разработчики придерживаются этой идеологии и пишут свои плагины.

• linter-php , для PHP `php -l`
• linter-phpcs , для PHP, `phpc`
• linter-phpmd , для PHP, `phpmd`
• linter-pylint , для Python, `pylint`
• linter-pyflakes , для python, `pyflakes`
• linter-pep8, для python, `pep8`
• linter-flake8, для python, `flake8`
• linter-javac , для Java, `javac`
• linter-jshint , для JavaScript and JSON, `jshint`
• linter-jscs , для JavaScript, `jscs`
• linter-scss-lint , для SASS/SCSS, `scss-lint`
• linter-coffeelint , для CoffeeScript, `coffeelint`
• linter-csslint , для CSS, `csslint`
• linter-rubocop , для Ruby and Ruby on Rails, `rubocop`
• linter-tslint , для Typescript, `tslint`
• linter-xmllint , для XML, `xmllint`
• linter-shellcheck , для Bash, `shellcheck`
• linter-scalac , для Scala, `scalac`
• linter-clang , для C / C++, `clang`
• linter-ruby , для ruby, `ruby -wc`
• linter-lua , для Lua, `luac -p`

Пакет Script: запуск программ из Atom

Script — пакет для запуска кода в atom.

Установка пакета Script, возможна из командной строки:

или меню
Packages->Settings View->Install->Packages

Каждый язык работает, при наличии предварительно установленного компилятора / интерпритатора.
Пакет Script обновляется довольно часто. Например поддержка Swift появилась менее двух недель назад. Так что скорее всего в ближайшее время появится поддержка новых языков.

Для запуска программы необходимо выбрать
Packages—>Script—>Run

Дополнительные опции можно найти в документации либо на страницах Atom`а или проекта.

Для функционирования должен быть создан рабочий каталог.
Путь к нему нужно прописать здесь:
Packages—>Script—>Configure Script—>Current Working Directory
Заявку разработчикам на поддержку нового языка можно оставить здесь (отвечают быстро)

И немного юмора от разработчиков пакета Script,
у которых, судя по всему, спрашивают всё на свете:

первод: Атом не может найти Нод | Руби | Питон | Мои носки

Python

Поддержка подсветки этого языка идёт изначально. Пакеты для работы с синтаксисом и отладки:
Linter + Language Python + Linter Python Pep8 + Script

Script запускает код на Python, а Linter и Linter Python Pep8 покажут синтаксические ошибки.
Возможно Вам, для работы с Python также поможет Atom Python Debugger.
Подсветка ошибок и запуск после установки будут выглядеть так:

Swift

Терминал

Для запуска исполняемого кода С, C++, Java иногда проще использовать сторонний пакет (не пакет Atom, а пакет вашего дистрибутива), который запускается через терминал, поскольку сам Atom поддерживает большое количество языков. Если Atom выступает в качестве редактора кода, a терминал рядом запускает его — это очень удобно для нас, поскольку терминал не имеет такое преимущество редактирования, как Atom.
Для запуска терминала в окне Atom установите пакет Term. Для запуска терминала в окне Atom выбрать
Packages—>Command Palette—>Toggle и Term
с нужными параметрами.

В заключении ещё один интересный кликабельный анимационный gif от разработчиков script, ссылки.

Источник

Редактор кода Atom — JS: подготовка к работе

Рекомендуемые плагины

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

• задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
• расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
• изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Урок «Как эффективно учиться на Хекслете»
• Вебинар «Как самостоятельно учиться»

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

Источник