Javascript atom как запустить код

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-ternjs — всплывающие подсказки для js
• hyperclick — всплывающие описания функций(ядро)
• js-hyperclick — всплывающие описания функций для js

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

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

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

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

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

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

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

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

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

Терминал в Atom

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

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

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

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

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

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

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

npm install express-generator -g

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

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

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

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

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

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

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

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

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

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

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

Комментарии (6):

тоже использую атом, но для пыхи

да там и для пыхи плагины есть, тоже планирую заюзать

и вам спасибо за внимание)

Sublime Text меня пока устраивает, хотя этими технологиями я пока и не пользуюсь!

да, хороший редактор, только без терминала

Войдите или зарегистрируйтесь чтобы оставить комментарий

Источник

How To Run Javascript In Atom

Atom is a popular free code editor created by GitHub developers for programmers. It is actively being developed, there are hundreds of plugins for it, and it is easy to customize it to your needs.

Atom is built on Electron technology, so it works on Windows, Linux and macOS. Among the basic features of the editor, available immediately after installation:

• Syntax highlighting for many popular languages and file formats
• easy navigation
• built-in Markdown preview
• smart auto-completion
• built-in batch manager

The package manager is needed to install and remove extension packages (plugins). For convenient JavaScript development for the backend and frontend, you need to install several packages.

To install a new package, go to the “Install” tab in the settings, enter the name of the package in the search box, and click “Install”.

Encoding Standards

Eslint is a utility that checks coding standards in JavaScript. The de facto standard in the JS world.

You need to first install eslint on the system, and then install the Atom extension that will use the installed linter. There are different ways to integrate linter with the extension. We will look at installing linter globally on the system.

You need to first install eslint on the system, and then install the Atom extension that will use the installed linter. There are different ways to integrate linter with the extension. We will look at installing linter globally on the system.

Install Node.js using the package manager of your operating system.

Install eslint with the npm install -g eslint command. You will probably need to use sudo.

Install the plugins that configure eslint. Without them (by default) eslint doesn’t check anything.

 npm install -g eslint-config-airbnb-base eslint-plugin-import

eslint requires a configuration file. Create a .eslintrc.yml file in the root of your project with the following content:

 extends: - 'airbnb-base' env: node: true browser: true

Install the “linter-eslint” extension in Atom.

Check the Use Global Eslint checkbox in the extension settings (Settings -> Packages -> Linter Eslint).

Automatic addition

The built-in autofill in the editor works according to the most primitive scheme, analyzing the contents of the files. With the third-party utility “tern” you can achieve more advanced behavior. “tern” can:

• suggest function arguments
• define type of expression
• find a definition of something
• perform automatic refactoring

The atom-ternjs extension does not require installation of anything else and works by itself.

Automatic addition of files and modules

The useful extension autocomplete-modules automatically appends file and module names during import.

Switch to definitions

The js-hyperclick allows you to quickly navigate to a function or variable definition on click.

Источник