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

Обновлено: 02.07.2024

Изначально считаем что у Вас установлена поддерживаемая операционная система, 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

В результате должны поддерживаться следующие языки (26):

Каждый язык работает, при наличии предварительно установленного компилятора / интерпритатора.
Пакет 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.
Подсветка ошибок и запуск после установки будут выглядеть так:

Atom показывает ошибки синтаксиса и запускает php скрипт:

Swift

Подcветка синтаксиса swift работает на любом дистрибутиве после установки пакета Language Swift:

Терминал

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

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

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

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

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

Установите Node.js, используя пакетный менеджер вашей операционной системы.
Установите eslint командой npm install -g eslint . Вероятно, вам понадобится использовать sudo .

Установите плагины, которые конфигурируют eslint . Без них (по умолчанию) eslint ничего не проверяет.

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

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

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

Babel и ES6

VS Code содержит понятие “сборки проекта”. Редактор можно настроить таким образом, чтобы сборка JavaScript-проекта заключалась в конвертации кода из ES6 в читаемый ES5 с Source Maps с помощью Babel.

Добавьте таск (задание) в файл tasks.json в директории .vscode в корне вашего проекта:

Теперь комбинация клавиш Shift+Ctrl+B (Windows/Linux) или Shift+CMD+B (macOS) запустит сборку.

Ссылки

Курс по настройке окружения для работы в современной экосистеме JavaScript.

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

Visual Studio Code – популярный бесплатный редактор кода, созданный Microsoft’ом для программистов. VS Code никак не связан с Visual Studio. VS Code работает быстрее Атома, активно развивается и легко расширяется плагинами.

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

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

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

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

VS Code содержит мощную систему анализа кода для автодополнений и подсказок – IntelliSense.

IntelliSense работает сразу, но для настройки деталей нужно создать конфигурационный файл jsconfig.json .

jsconfig.json

Если положить в корень директории с JavaScript-проектом конфигурационный файл jsconfig.json , то VS Code будет использовать эту конфигурацию для работы с вашим проектом. Вот пример такого файла:

Здесь можно настроить, например, какие директории стоит исключить из системы автодополнений IntelliSense. VS Code совместим с node, webpack, bower, ember и другими популярными инструментами. Полная документация по jsconfig доступна на сайте VS Code.

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

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

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

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

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

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

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

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

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

Emmet

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

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

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

Color Picker

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

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

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

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

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

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

Работа с html и css

src

href

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

- позволяет писать много кода с помощью простых сокращений - проверьте ваш HTML и CSS код на наличие ошибок - позволяет быстро найти цвета, использованные в проекте - миникарта вашего проекта - почувствуйте себя стратегом! - автозаполнение кода - гениальный плагин для регулярных выражений. Показывает регулярные выражения в графическом формате =) - панелька со списком функций и переменных, как в WebStorm. Для удобства советую включить все галочки, и написать в AutoHiddenTypes "variable class", Var, Vars, var. Это исключит переменные из панели и сама панель будет появляться только при наведении на неё. - синхронизирует боковую панель выделяя в нем активный файл. - красивые иконки для файлов в проекте - минимзирует и сохраняет js файл - окно с задачами - подсвечивает ошибки в коде - проверка правописания (только английстий язык) -открыть недавно закрытые файлы/проекты -показывает картинку svg прямо в редакторе

Отладка

VS Code содержит встроенный отладчик кода. Вы можете, например, отметить брейкпойнты (точки остановки) и следить за состоянием приложения в реальном времени.

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

Подробнее об отладке можно узнать на сайте VS Code.

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

Шаг 4

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

Читайте также: