Как настроить atom для javascript
Изначально считаем что у Вас установлена поддерживаемая операционная система, 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ветка синтаксиса 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
-
- пишем много кода с помощью простых сокращений. Нажатие на Tab разворачивает сокращение - вызов удобной цветовой палитры простым сочетанием клавиш Ctrl+Alt+C или Cmd+Shift+C - смотрите результат своей работы, не выходя из редактора (аналог Plunker) - красивые иконки для файлов в проекте - проверьте ваш HTML и CSS код на наличие ошибок - удобная навигация по файлам при изменении атрибутов src, href и т.п. - узнайте, какие браузеры поддерживают введённые теги и свойства - редактируйте сразу несколько строк/слов обновременно - подсвечивает ошибки в коде - добавляет префиксы к CSS для работы во всех браузерах - автоматически закрывает открытые html-теги
Работа c javascript и прочее
-
- позволяет писать много кода с помощью простых сокращений - проверьте ваш HTML и CSS код на наличие ошибок - позволяет быстро найти цвета, использованные в проекте - миникарта вашего проекта - почувствуйте себя стратегом! - автозаполнение кода - гениальный плагин для регулярных выражений. Показывает регулярные выражения в графическом формате =) - панелька со списком функций и переменных, как в WebStorm. Для удобства советую включить все галочки, и написать в AutoHiddenTypes "variable class", Var, Vars, var. Это исключит переменные из панели и сама панель будет появляться только при наведении на неё. - синхронизирует боковую панель выделяя в нем активный файл. - красивые иконки для файлов в проекте - минимзирует и сохраняет js файл - окно с задачами - подсвечивает ошибки в коде - проверка правописания (только английстий язык) -открыть недавно закрытые файлы/проекты -показывает картинку svg прямо в редакторе
Отладка
VS Code содержит встроенный отладчик кода. Вы можете, например, отметить брейкпойнты (точки остановки) и следить за состоянием приложения в реальном времени.
Для отладки бэкенд-кода достаточно встроенных возможностей. Для отладки фронтенд-кода нужно установить плагин для соответствующего браузера:
Подробнее об отладке можно узнать на сайте VS Code.
Установка редактора и пакетов:
Шаг 1
Установить и открыть
Шаг 2
Перейти файл -> настройки
Шаг 3
Выберите вкладку "install"
Шаг 4
Введите название пакета, нажмите Enter , затем кликните на слово install
Читайте также: