Atom html редактор


новый редактор кода от Гитхаба / Хабрахабр

От переводчика: вчера без официального объявления на Гитхабе были опубликованы несколько десятков репозиториев, содержимое которых свидетельствовало о том, что команда Гитхаба уже давно ведёт разработку нового текстового редактора для программистов и готова представить его публике. Несколькими часами позже заработал и официальный сайт редактора atom.io, на котором сейчас можно запросить инвайт на бета-тестирование, ознакомиться с документацией и плагинами к редактору. Эта статья — перевод двух первых постов из блога проекта Atom, посвящённых концепции и архитектуре редактора.
Представляем Atom
Сегодня мы с радостью готовы запустить публичную бета-версию Atom, нового текстового редактора, который не только лёгок в использовании, но и предоставляет огромную свободу модификаций.

Sublime и TextMate предлагают удобство, но лишь ограниченную расширяемость. С другой стороны, Vim и Emacs обладают огромной гибкостью, но сложны в освоении и требуют изучения специфических скриптовых языков для модификаций.

Мы считаем, что можем сделать лучше. Наша цель — бескомпромиссное сочетание удобства и настраиваемости: редактор, с которым может разобраться и школьник, только начавший изучать программирование, но в то же время и инструмент, который не будет ограничивать опытного хакера. Так как мы стали использовать Atom уже в процессе работы над ним, то, что сперва было лишь экспериментом, превратилось для нас в предмет первой необходимости. Это только начало, и ещё много чего нужно сделать, чтобы полностью воплотить наше видение редактора. Но основная цель достигнута. Снаружи Atom — современный текстовый редактор, который соответствует ожиданиям пользователей. А под капотом — это система, которая так и просит о модификациях и расширении.

В ближайшие недели мы будем рассылать приглашения бета-тестерам, а уже сейчас мы опубликовали больше 80 библиотек и пакетов, которые используются в редакторе. Мы открыли многие API, которые нужны, чтобы писать мощные расширения, но, так как это бета-версия, в них ещё могут произойти изменения на основе обратной связи от вас. Мы будем стараться делать их как можно осторожнее, в то же время активно дорабатывая редактор.

Ждём от вас обратной связи, пакетов и патчей. Сделаем это вместе!

Ядро атома
У веба есть свои недостатки, но два десятилетия развития превратили его невероятно гибкую и мощную платформу. Поэтому, когда мы решили написать текстовый редактор, который мы сами с удовольствием бы расширяли и модифицировали, выбор технологии был очевиден. Но сначала нам пришлось избавиться от нескольких сковывающих нас ограничений.
Нативный веб
Браузеры хорошо приспособлены для просмотра веб-страниц, но написание кода — это специфическая деятельность для которой нужны особые инструменты. Что ещё важнее, браузер сильно ограничивает доступ к локальным ресурсам компьютера из соображений безопасности, а для нас текстовый редактор, который не сможет нормально записать файл или запустить локальный подпроцесс, был совершенно неприемлем.

Поэтому Atom не является обычным веб-приложением. Это специализированный вариант браузера Chromium, переделанный так, чтобы быть в первую очередь текстовым редактором, а не веб-браузером. Каждое окно Atom — это отдельная локальная веб-страница.

Коду JavaScript, работающему в каждом окне, доступны все API, которые доступны любому приложению Node.js. Такое гибридное решение создаёт уникальные возможности для разработки.

Так как вся работа происходит локально, нет никакой нужды заботиться о загрузке ресурсов, конкатенации скриптов и асинхронной подгрузке модулей. Если нужен какой-то код, достаточно лишь require в начале файла. Система модулей Node.js без проблем позволяет разбить систему на маленькие хорошо сфокусированные пакеты.

JavaScript вместе с C++
Взаимодействие с нативным кодом тоже очень просто. К примеру, мы написали обёртку вокруг движка регулярных выражений Oniguruma для поддержки совместимости с TextMate. В браузере нам пришлось бы разбираться с NaCl или Esprima. Интеграция с Node сильно упростила задачу.

Кроме API Node.js мы так же используем нативные API диалоговых окон браузера, главного и контекстных меню, управления размерами окна и так далее.

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

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

Мы уверены в будущем платформы, на которой построен Atom, ведь веб-технологии развиваются совместными усилиями целой отрасли. Нативные технологии приходят и уходят, а веб становится всё лучше и распространеннее с каждым годом. Мы с удовольствием будем использовать все его возможности.

habrahabr.ru

Используем Atom для первой вёрстки – Zakhar Day – Medium

Почему я выбираю Atom

Не так давно все переходили с какого-нибудь TextMate на SublimeText и это было реально своевременно круто. Но когда в индустрию редакторов кода вошёл GitHub, сразу стало понятно за кем будущее.

Atom — это быстроразвивающийся редактор кода от GitHub с открытым исходным кодом и растущим сообществом. Абсолютно бесплатный, ультра современный, легко настраиваемый через человекопонятный интерфейс, но пока что чуть медленный — в этом весь Atom.

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

Установка

Для установки вам необходимо быть обладателем одной из описанных на сайте Atom систем:

OS X 10.8 or later, Windows 7 & 8, RedHat Linux, and Ubuntu Linux

Так как я работаю на Mac, то большая часть инструкции будет для него, иногда с информацией для Windows.

Скачайте дистрибутив и установите его как полагается в вашей системе. На Mac OS X нужно перенести приложение в папку приложений (Applications), на Windows запустить установочный дистрибутив.

После этого откройте Atom и давайте перейдём к настройке.

Настройка

Для того, что бы всё было удобно, я расскажу вам как настроить сам Atom, вашу систему, какие пакеты поставить, что они дают, как их использовать и какую тему подсветки синтаксиса выбрать.

Настройка Atom

После установки Atom сразу готов к работе и настроен в соответствии с последними тенденциями. Вам нужно настроить всего две вещи.

Добавьте разметку отступовЗайдите в настройки Atom → Preferences → Settings и поставьте галочку на Show Indent Guide. Это включит отображение специальных полосочек, которые помогают видеть вложенность кода.

Настройте правильную работу autocompleteAutocomplete — это инструмент для автоматического написания кода. Зайдите в Atom → Open Your Keymap и вставьте в конец документа следующий код:

Настройка Mac OS X

В современных редакторах кода можно раздвигать курсор на несколько строк. Что бы это делать на Mac, нужно выключить пару стандартных сочетаний клавиш. Зайдите в системные настройки  → System Preferences → Keyboard → Shortcuts → Mission Control и снимите галочки на двух пунктах:

Mission ControlЗанимает сочетание клавиш ^↑

Application windowsЗанимает сочетание клавиш ^↓

Теперь, когда будете играться с кодом, попробуйте по нажимать Shift-Ctrl-↑ и Shift-Ctrl-↓. Вы можете редактировать несколько строк одновременно. Также можно вставлять дополнительные курсоры в любые места в коде зажав Cmd и просто кликая в необходимое место.

Установка пакетов

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

Для установки пакетов зайдите в Atom → Preferences → Install и через строку поиска найдите и установите следующие пакеты:

Atom-color-highlightПодсвечивает цветовые величины в коде

Autocomplete-cssУпрощает написание CSS

Autocomplete-pathsУпрощает написание путей к файлам проекта

Autocomplete-plusУпрощает автоматическое написание кода

EmmetНезаменимый инструмент дзен коддера, ускоряет написание HTML кода в разы

Выбор темы подсветки кода

Моя любимая тема Twilight не поставляется с Atom, скорей всего потому, что эта тема пришла из другого редактора кода TextMate. Несмотря на новизну Atom, к сожалению, я пока не нашёл для себя ни одной нормальной темы поставляемой с ним.

Для установки Twilight, нужно опять зайти в установку как в прошлый раз, только в этот раз в строке поиска нужно выбрать Themes, вместо Packages. Найти Twilight и установить.

После того, как пакеты и темы поставлены, перезагрузите Atom для того, что бы всё точно заработало (полностью закройте программу и откройте снова).

Как всё работает

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

Emmet в действии

Создайте новый файл и сохраните его, назовите “index.html”, естественно без кавычек. Для правильной работы всех помощников Atom, так называемых сниппетов (snippets) и для правильной подсветки кода (syntax highlighting) обязательно нужно указывать правильное расширение файла (.html в данном случае).

Итак, пишем в документе восклицательный знак и нажимаем Tab. Emmet развернёт вам базовую структуру HTML.

Подробней об использовании Emmet читайте в документации на официальном сайте.

Autocomplete Paths в действии

Положите в папку, в которой лежит ваш index.html какие-нибудь картинки, для удобства, создайте дополнительную папку images и положите картинки в неё.

В index.html между тэгами <body> и </body> напишите “img”, и нажмите Tab. У вас появится немного кода и курсор будет стоять внутри кавычек атрибута src. Атрибут src обозначает source (источник, исходник) тэга img, что обозначает image (изображение). В значении атрибута scr вам нужно указать путь к картинке, для этого напишите название папки “images” и далее слэш “/”. Autocomplete Paths предложит вам выбрать название картинок из указанной папки.

Autocomplete CSS в действии

Создайте новый файл и сохраните его, назовите “style.css”, без кавычек. Для того, что бы увидеть autocomplete в действии создайте CSS селектор. Напишите html и откройте фигурную скобку “{”, закрывающая фигурная скобка создастся сама, переведите строку, нажав Enter.

Теперь на новой строке внутри скобок начните писать, например “font”. Вы увидите выпадающие предложения по написанию кода. Перемещайтесь по ним стрелочками, выбирайте нужное нажатием Enter.

Atom Color Highlight в действии

Напишите “color: red;” и вы увидите, что red будет окрашен в соответствующий цвет. Напишите “background-color: #EEEEEE;” или “white” и вы увидите, что значение будет окрашено в белый.

Заключение

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

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

Жду вас у себя на курсе основ HTML и CSS в Moscow Coding School для быстрой прокачки.

medium.com

Полезные плагины для Atom'а - Hexlet.io

Разработчик Dennis Bruijn рассказал про свои любимые плагины для Атома. Вот этот список:

Minimap

https://atom.io/packages/minimapПоказывает превью всего кода "с высоты птичьего полета" в правой части редактора, как в Sublime.

———

Minimap cursorline

https://atom.io/packages/minimap-cursorlineПоказывает положение курсора в превью.

———

Pigments

https://atom.io/packages/pigmentsВизуализирует цвета в коде (например, код #fff будет подсвечен белым цветом).

———

Emmet

https://atom.io/packages/emmetБыстрая генерация HTML-кода с помощью Emmet-синтаксиса (http://emmet.io/)

———

Double tag

https://atom.io/packages/double-tagОдновременное редактирование открывающего и закрывающего HTML-тегов.

———

Linter

https://atom.io/packages/linterАвтоматическая проверка кода, вывод warning'ов и ошибок в реальном времени. Есть пакеты почти для всего: и языков и даже некоторых фреймворков (например, Twitter Bootstrap).

———

Beautify

https://atom.io/packages/atom-beautifyПравильное форматирование кода на HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion и SQL одним простым шорткатом Ctrl-Alt-B.

———

Auto close HTML

https://atom.io/packages/autoclose-htmlАвтоматическая генерация закрывающих HTML-тегов.

———

Fuzzy finder (фича самого редактора)

Ctrl+T (Cmd+T) открывает строку fuzzy-поиска по названиям файлов во всей директории. Очень удобно для быстрого переключения между файлами. Например, если есть файл application_layout.html.haml, то можно быстро выбрать его введя "applahml".

———

Color picker

https://atom.io/packages/color-pickerПалитра для быстрого выбора цвета в коде SCSS, LESS и CSS.

———

Highlight selected

https://atom.io/packages/highlight-selectedВыделяет копии выделенного фрагмента текста.

———

GIT diff

https://atom.io/packages/git-diffПоказывает в левой колонке (рядом с номерами строк) отметки Git: добавление, изменение или удаление соответствующей строки после последнего коммита.

———

Sort lines

https://atom.io/packages/sort-linesСортировка выделенных строк в алфавитном порядке.

———

Code peek

https://atom.io/packages/code-peekПросмотр и редактирование функций из других файлов без перехода в сам файл.

———

Package sync

https://atom.io/packages/package-syncСинхронизация установленных пакетов между разными компьютерами. Удобно, если у вас несколько рабочих машин.

———

Бонус: Activate power mode

https://atom.io/packages/activate-power-modeРежим для супергероев :)

ru.hexlet.io

Текстовый редактор Atom - Видеоуроки

Текстовый редактор Atom - Видеоуроки

Atom editor tutorials (Ангельский)

Открыть все курсы от leveluptutorials

Atom editor tutorials (Ангельский) - Полный список уроков

Развернуть

Atom - современный текстовый редактор, который вы можете настроить под себя для любых действий, или продуктивно использовать, даже не касаясь файлов конфигурации. Атом работает во всех операционных системах. Вы можете использовать его в OS X, Windows или Linux. Вы также можете доставлять пакеты расширений, или даже написать свои собственные, специально для Атом. Atom также помогает вам писать код быстрее с помощью умного и гибкого автозаполнения. Обо всем этом, и многое другое ты узнаешь в этом видеокурсе.

Следи за последними обновлениями и новостями в наших пабликах facebook, или вступай в наш канал telegram.

Твоя оценка

4 0

Комментарии

Похожие курсы

20-04-2017Неизвестно :) 10 уроков egghead Learn to Use VIM (Ангельский)

Vim - это классический текстовый редактор, который увидел свое первое воплощение в 1976 году. Он доступен во всем мире для большинства платформ. В этом курсе мы проведем экскурсию по Vim и узнаем как работать с этим мощным текстовым редактором.

4 0

coursehunters.net

atom-beautify

Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more in Atom

Before After
Original HTML Beautified HTML

Table of Contents

Installation

Atom Package: https://atom.io/packages/atom-beautify

apm install atom-beautify

Or Settings/Preferences ➔ Packages ➔ Search for atom-beautify

Important Notice: Analytics

Atom-Beautify respects the core.telemetryConsent configuration option from Atom editor. If you do not wish to have usage data sent to Google Analytics then please set core.telemetryConsent to no or undecided option before using Atom-Beautify. See Anonymous Analytics section of docs for details. Thank you.

On Atom Load Change Setting Later

Next Version: Unibeautify

Atom-Beautify is going to be completely rewritten with Unibeautify at its core! See unibeautify branch for work in progress and Issue #1174.

Beautifiers

Some of the supported beautifiers are developed for Node.js and are automatically installed when Atom-Beautify is installed. However, other beautifiers are command-line interface (CLI) applications and require you to manually install them.

Language Support

See all supported options in the documentation at docs/options.md.

Language Grammars File Extensions Supported Beautifiers
Apex Apex .cls, .trigger Uncrustify
Arduino Arduino .ino, .pde Uncrustify
Bash Shell Script .bash, .sh beautysh
C C, opencl .h, .c, .cl Uncrustify, clang-format
Coldfusion html .cfm, .cfml, .cfc Pretty Diff
Clojure Clojure .clj, .cljs, .edn cljfmt
CoffeeScript CoffeeScript .coffee coffee-fmt, Coffee Formatter
C++ C++ .h, .hh, .cc, .cpp, .cxx, .C, .cu, .c++, .hpp, .hxx, .h++, .cuh Uncrustify, clang-format
Crystal Crystal .cr Crystal
C# C# .cs Uncrustify
CSS CSS .css JS Beautify, CSScomb, Pretty Diff, SassConvert
CSV CSV .csv Pretty Diff
D D .d Uncrustify, dfmt
EJS EJS, JavaScript Template, HTML (Angular) .ejs JS Beautify, Pretty Diff
Elm Elm .elm elm-format
ERB HTML (Ruby - ERB), HTML (Rails) .erb Pretty Diff, HTML Beautifier
Erlang Erlang .erl erl_tidy
Fortran Fortran - Modern .f90, .F90, .f95, .F95, .f03, .F03, .f08, .F08 Fortran Beautifier
gherkin Gherkin .feature Gherkin formatter
GLSL C, opencl, GLSL .vert, .frag clang-format
Go Go .go gofmt, goimports
Golang Template HTML (Go), Go Template .gohtml Pretty Diff
Handlebars Handlebars, HTML (Handlebars) .hbs, .handlebars JS Beautify, Pretty Diff
Haskell Haskell .hs stylish-haskell
HTML HTML .html JS Beautify, Pretty Diff
Jade Jade, Pug .jade, .pug Pug Beautify
Java Java .java Uncrustify
JavaScript JavaScript .js JS Beautify, ESLint Fixer, JSCS Fixer, Pretty Diff
JSON JSON .json JS Beautify, Pretty Diff
JSX JSX, JavaScript (JSX), Babel ES6 JavaScript, JavaScript with JSX .jsx, .js Pretty Diff, JS Beautify
LaTeX BibTeX, LaTeX, TeX .bib, .tex, .sty, .cls, .dtx, .ins, .bbx, .cbx Latex Beautify
LESS LESS .less Pretty Diff, CSScomb
Lua Lua .lua Lua beautifier
Markdown GitHub Markdown .markdown, .md Tidy Markdown, Remark
Marko Marko .marko Marko Beautifier
Mustache HTML (Mustache) .mustache JS Beautify, Pretty Diff
Nginx nginx .conf Nginx Beautify
Nunjucks Nunjucks, Nunjucks Templates, HTML (Nunjucks Templates) .njk, .nunjucks Pretty Diff
Objective-C Objective-C, Objective-C++ .m, .mm, .h Uncrustify, clang-format
OCaml OCaml .ml ocp-indent
Pawn Pawn Uncrustify
Perl Perl, Perl 6 .pl, .PL, .pm, .pod, .t Perltidy
PHP PHP .php, .module, .inc PHP-CS-Fixer, PHPCBF, hh_format
Puppet Puppet .pp puppet-lint
Python Python .py autopep8, pybeautifier, yapf
R R .r, .R formatR
Riot.js Riot.js, HTML (Riot Tag) .tag Pretty Diff
Ruby Ruby, Ruby on Rails .rb Rubocop, Ruby Beautify
Rust Rust .rs, .rlib rustfmt
Sass Sass .sass SassConvert
SCSS SCSS .scss Pretty Diff, CSScomb, SassConvert
Spacebars Spacebars Pretty Diff
SQL SQL (Rails), SQL .sql sqlformat
SVG SVG .svg Pretty Diff
Swig HTML (Swig), SWIG .swig Pretty Diff
TSS TSS .tss Pretty Diff
Twig HTML (Twig) .twig Pretty Diff
TypeScript TypeScript .ts TypeScript Formatter
UX Markup UX .ux Pretty Diff
Vala Vala .vala, .vapi Uncrustify
Visualforce Visualforce .page Pretty Diff
Vue Vue Component .vue Vue Beautifier
XML SLD, XML, XHTML, XSD, XSL, JSP, GSP .sld, .xml, .xhtml, .xsd, .xsl, .jsp, .gsp, .plist, .recipe, .config Pretty Diff, JS Beautify
XTemplate XTemplate .xtemplate Pretty Diff
YAML YAML .yml, .yaml align-yaml

Usage

Command Palette

Open the Command Palette, type Beautify, and run Beautify Editor.

Beautify a Specific Language

You can use the Command Palette to beautify the editor for a specific language. The commands are in the form Atom Beautify: Beautify Language {NAME} (i.e. atom-beautify:beautify-language-{NAME} for keyboard shortcuts). For example, you may want to beautify JavaScript code within a HTML file.

Selection of Code

It will only beautify selected text if a selection is found -- if not, the whole file will be beautified.

Selection of Code Beautify Selection of Code Beautify Entire File
Select code in Atom editor Only that selection is beautified Without a selection all code is beautified

Beautify On Save

Beautify On Save can be enabled for each language individually.

For example, for language HTML go into Atom-Beautify's package settings (Atom ➔ Preferences ➔ Search for atom-beautify), find HTML, and toggle the Beautify On Save option.

Keyboard Shortcut

You can also type Ctrl-Alt-B as a shortcut or click Packages > Beautify in the menu.

Custom Keyboard Shortcuts

See Keymaps In-Depth for more details.

For example:

'.editor':

  'ctrl-alt-b': 'atom-beautify:beautify-editor'

Configuration

Edit your .jsbeautifyrc file in any of the following locations:

Note: Comments are supported in .jsbeautifyrc thanks to strip-json-comments.

See examples of both ways inside examples/

See all supported options in the documentation at docs/options.md.

Simple

See examples/simple-jsbeautifyrc/.jsbeautifyrc.

{

  "indent_size": 2,

  "indent_char": " ",

  "other": " ",

  "indent_level": 0,

  "indent_with_tabs": false,

  "preserve_newlines": true,

  "max_preserve_newlines": 2,

  "jslint_happy": true,

  "indent_handlebars": true

}

Nested (Recommended)

See examples/nested-jsbeautifyrc/.jsbeautifyrc.

{

  "html": {

    "brace_style": "collapse",

    "indent_char": " ",

    "indent_scripts": "normal",

    "indent_size": 6,

    "max_preserve_newlines": 1,

    "preserve_newlines": true,

    "unformatted": ["a", "sub", "sup", "b", "i", "u"],

    "wrap_line_length": 0

  },

  "css": {

    "indent_char": " ",

    "indent_size": 4

  },

  "js": {

    "indent_size": 2,

    "indent_char": " ",

    "indent_level": 0,

    "indent_with_tabs": false,

    "preserve_newlines": true,

    "max_preserve_newlines": 2,

    "jslint_happy": true

  },

  "sql": {

    "indent_size": 4,

    "indent_char": " ",

    "indent_level": 0,

    "indent_with_tabs": false

  }

}

Troubleshooting

See docs/troubleshooting.md.

Contributing

See all contributors on GitHub.

Please update the CHANGELOG.md, add yourself as a contributor to the package.json, and submit a Pull Request on GitHub.

License

MIT © Glavin Wiechert

atom.io

Текстовый редактор Atom стал средой разработки

На момент выхода Atom-IDE включает в себя интеллектуальное автодополнение синтаксиса, навигацию по коду, переход к определению функций и классов, поиск ссылок, интерактивные подсказки, выделение синтаксических ошибок, форматирование кода. Изначально релиз поддерживает TypeScript, Flow, JavaScript, Java, C# и PHP и предоставляет средства для глубокого синтаксического анализа кода проектов. В будущем планируется поддержка Rust, Go и Python. 

Как начать использовать Atom-IDE?

Все компоненты поддержки языков оформлены в виде отдельных серверных обработчиков. Взаимодействие с ними осуществляется с помощью протокола LSP (Language Server Protocol), широко использующегося в продуктах Eclipse, Microsoft и Facebook.

Разработчики советуют использовать Atom Beta 1.21, уже содержащий в себе необходимый мониторинг файлов и управление процессами, для гарантии того, что основные серверные обработчики работают должным образом. Для превращения редактора Atom в среду разработки необходимо установить всего два пакета:

  1. atom-ide-ui, делающий доступным пользовательский интерфейс;
  2. необходимый набор поддержки языка программирования, например ide-typescript для TypeScript, соответственно.

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

Диагностика кода

Определение функций или классов

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

Поиск ссылок

Форматирование кода

Также доступно через контекстное меню или же в пункте меню «Редактировать→Текст→Форматирование кода».

Источник: блог Atom

Вячеслав Шарунов

tproger.ru

Обзор текстовых редакторов для кода

Содержание статьи

Не для каждой задачи и не каждого проекта требуется полноценная IDE, поэтому для многих основным инструментом по-прежнему остается любимый текстовый редактор. И кажется, что выбор прост: мощный, расширяемый, но простой Sublime Text, живая классика в лице emacs и vim, а также моноплатформенные фавориты — Notepad++ для Windows, TextMate для OS X и Geany для Linux. Но ведь новые редакторы появляются чуть ли не каждый день — есть ли тебе смысл менять привычки? Давай посмотрим, что происходит.

 

Atom

atom.io

Еще в августе 2011 года один из основателей GitHub Крис «defunkt» Уонстрат поставил перед собой амбициозную цель: создать редактор, который был бы по-настоящему открытым и предлагал неограниченные возможности для хакинга, но при этом не превращался бы во второй Vim или Emacs (который, как известно, умеет почти все, но только если у тебя мозги как у Джеффа Дина). И вот спустя три года и более чем пятнадцать тысяч коммитов началось публичное бета-тестирование. В марте этого года Atom стал доступен для загрузки всем желающим. Чем же собирается перевернуть наш подход к кодингу знаменитая компания?

Первое, что бросается в глаза при запуске нового детища GitHub, — это невероятно похожий на Sublime Text интерфейс. Само по себе это не минус. Известный факт, что интерфейс Sublime был вдохновлен другим, некогда не менее популярным редактором кода для OS X TextMate. Нынешняя история с Atom и Sublime лишь подчеркивает удачные решения GUI последнего.

Вторая особенность Atom заключается в том, что это, по сути, веб-приложение в обертке Chromium. Нет, конечно, у редактора есть своя иконка в доке, нормальные системные меню и поддержка нативных хоткеев. Просто ядро Atom написано по большей части на CoffeeScript, работает оно на Node.js, а сам интерфейс редактора является HTML-страницей со вполне обычной разметкой. Убедиться в этом можно, если выбрать из меню View пункт Developer -> Toogle developer tools.

Из коробки Atom сильно напоминает Sublime

Третья интересная фишка Atom — его модульность. В лучших традициях экосистемы Node.js он написан с использованием максимального количества открытых модулей (больше пятидесяти). Это значит, что если тебе не нравится какой-то штатный функционал, то, по уверениям разработчиков, ты без труда сможешь подобрать ему замену из более чем 70 тысяч пакетов в npm registry или написать свой плагин. Учитывая, что JavaScript фактически уже давно стал самым популярным языком на GitHub, и у CoffeeScript лишь немного отстает от Perl, это вселяет уверенность в будущее Atom.

Пакетов еще мало, но написать свой действительно просто

А что же с киллер-фичами? Вот тут все не так радужно. То ли дело в молодости проекта, то ли еще в чем-то, но Atom, кроме громкого имени создателей и больших надежд, из коробки не предоставляет ничего, что бы могло заставить часами играться с ним. То, что преподносится разработчиками как преимущества (например, автокомплит, вкладки, коллапс кода, снипеты), может вызвать лишь снисходительную улыбку на лицах адептов Sublime. Да, конечно, Atom уже имеет свой пакетный менеджер, но я не нашел в его репозиториях ничего такого, что было бы нельзя реализовать с помощью плагинов для Sublime.

 

Light Table

lighttable.com

Разработка Light Table началась в 2011 году, когда американский программист Крис Грейнджер решил, что процесс работы с кодом в современных текстовых редакторах недостаточно хорошо вписывается в современный workflow. Если кратко, задача Light Table — сделать процесс разработки по-настоящему интерактивным и наглядным, давая разработчику моментальный фидбек на любое действие, тем самым помогая быстрее ориентироваться в большом коде. Именно с такой идеей Крис подался на Kickstarter и достаточно быстро собрал на разработку проекта 316 720 долларов при заявленной цели в 200 тысяч. Чем же конкретно идеи Криса так приглянулись бейкерам?

Одной из самых крутых особенностей Light Table является возможность работать с документацией по ходу написания кода. Чтобы увидеть описание функции, достаточно просто навести на нее курсор. Редактор моментально найдет и выведет документацию по запрошенной функции или параметру (в случае с build-in методами) или покажет prepend-описание функции, оставленное прямо в коде. Чем-то это напоминает автокомплит, который используется в среде разработки Visual Studio от Microsoft, но значительно более глубокий и мощный.

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

Выбираем интерпретатор, и исполняем inline-код с его помощью

Третья фишка Light Table — уникальная возможность организации кода в так называемые таблицы. Они представляют собой логически завершенные блоки кода, через которые можно наглядно представить взаимодействие отдельных функций программы. С помощью этой фичи очень удобно разделить файл на несколько независимых блоков-функций и работать с ними, соорудив некое подобие настоящего дашборда из кода. Также приятной особенностью является интеллектуальная подсветка блоков — в этом случае шансы запутаться в и без того наглядном workflow стремятся к нулю.

Код может быть представлен в виде таблиц

Несмотря на довольно непривычную философию, Light Table — это, несомненно, редактор нового поколения. Его фишка не в том, что он написан на модных технологиях, а в изменении самого подхода к процессу разработки сложного ПО. Наверное, при работе с простенькими JS-скриптами реальная мощь Light Table не почувствуется, но для проектов чуть посложнее он станет незаменимым инструментом. Нужно только привыкнуть. Но вот это как раз-таки будет непросто.

 

Lime

limetext.org

Весь Lime можно описать одной-единственной, но известной фразой Бобука — блеск и нищета опенсорса. Проект, начатый в прошлом году Фредриком «quarnster» Энбомом (Fredrik Ehnbom), решает одну-единственную, но понятную задачу: создать опенсорный конструктор по образу и подобию Sublime Text. Причина такого желания понятна — автор, горячий поклонник Sublime, был недоволен вялым развитием проекта и отсутствием банального исправления багов прошлых версий. Идея оказалась близка нескольким десятками единомышленников, и вскоре свет увидела первая версия Lime.

Первое, что отталкивает при знакомстве с этим редактором, — отсутствие хоть какого-нибудь подобия бинарных пакетов. В целом логика такого решения понятна: Lime — это и не цельное приложение, а набор из отдельного бэкенда на языке Go и пары фронтендов на выбор. Однако легче от этого не становится — попытка с наскока заставить Lime элементарно работать превращается в увлекательную возню с зависимостями Go, конфигами и прочими радостями жизни.

Lime уже сейчас имеет на выбор два фроентенда. Скоро будет и третий на Dart

Что касается работы в этом редакторе, на данный момент она откровенно неудобна, и написать здесь о чем-то уникальном, по сути, нечего. Lime пока не может похвастаться даже теми функциями, которые в других текстовых редакторах воспринимаются как должное. Создается впечатление, что разработчики пока уделяют куда больше внимания архитектуре приложения и чистоте кода, чем функционалу. До некоторой степени ситуацию спасает частичная совместимость с API Sublime (ну и некоторых частей TextMate, соответственно), но, несмотря на это, с юзабилити у Lime остаются большие проблемы.

Несмотря на довольно подробный ман, со сборкой все равно бывают сложности

В целом на сегодняшний день Lime оставляет двоякое впечатление. Наверное, это здорово, когда твой рабочий инструмент полностью опенсорный и настолько гибкий. Но давай будем честны с собой: скольким из нас когда-либо придет в голову переписать фронтенд своего текстового редактора? Скольким из нас вообще придет в голову заниматься разработкой текстового редактора под себя из-за каких-то неудобств вместо того, чтобы использовать этот инструмент по прямому назначению — а именно писать в нем свои программы? Большинству разработчиков (особенно тем, кто не болен Столлманом головного мозга) за глаза хватит функционала Sublime Text и его системы плагинов для решения повседневных задач. Да и, если честно, за несколько лет ежедневной работы в Sublime я не встречал каких-то сверхкритичных багов, для которых бы не смог найти своего workaround’а. Так что на данном этапе по-настоящему Lime подойдет лишь упертым фанатам опенсорса с огромным количеством свободного времени и желанием сделать этот мир чуточку лучше.

 

Brackets от Adobe

brackets.io

Brackets — достаточно молодой (разработка ведется с 2011 года), но интересный проект от Adobe. Его цель незамысловата — создать минималистичную и комфортную среду разработки, которая бы требовала минимум усилий со стороны девелопера. На моей памяти было уже немалое количество проектов со схожими целями. Давай посмотрим, получилось ли у Adobe с помощью комьюнити сделать что-то интересное и на этом поприще.

На удивление, Brackets получился весьма неплохим. Все необходимое работает из коробки (после Lime даже это становится в некотором смысле плюсом). Проект действительно решает свою главную задачу — облегчает написание кода, хотя и делает это практически без каких-либо принципиально новых подходов. И кстати, в этом нет ничего плохого.

Brackets написан на HTML/JS (спасибо, что не Flash или Adobe AIR :)), тесно интегрирован с Node.js. Внешне из коробки производит весьма благоприятное впечатление (правда, не без налета некоторой игрушечности). Что меня подкупило с нажатия первой клавиши — так это потрясающий автокомплит для HTML/CSS/JS/jQuery. Он действительно умный и к тому же содержит множество приятных мелочей (например, встроенный color-picker или тулзу для гуишного подбора transition’ов в CSS).

Из коробки Brackets очень облегчает жизнь разработчика

Но главной киллер-фичей для меня стало inline-редактирование связанных участков кода. Это возможность посмотреть и отредактировать, скажем, набор CSS-свойства по его классу или ID-шнику прямо из HTML-файла верстки в отдельной области. Brackets в реальном времени анализирует структуру твоего проекта, строит дерево зависимостей и позволяет писать взаимозависимые участки кода, практически не покидая основного контекста файла. Признаюсь, именно такой функционал я пилил пару лет назад в своем простеньком текстовом редакторе (уверен, не я один). Так что подобная фишка не может не радовать.Из остальных особенностей можно выделить быстрый доступ к документации (правда, не настолько детализированный, как у Light Table), JSLint из коробки и симпатичный менеджер плагинов. Хотя, конечно, таким обилием пакетов, как у Sublime, Brackets пока похвастаться не сможет.

У Brackets действительно приятный менеджер пакетов

В целом, несмотря на поддержку в некоторой степени, например, Ruby или Python, Brackets ориентирован в первую очередь на фронтенд разработчиков. Он отлично справится с нуждами верстальщиков, в чем-то оставляя позади даже специализированные IDE. Ничего революционно нового, кроме inline-редактирования кода, ты в нем не найдешь. Однако то, что есть, сделано на совесть и с душой. Если ты преимущественно верстаешь или пишешь клиентский код на не слишком замороченном стеке, вполне возможно, Brackets придется тебе по душе.

 

Zed

zedapp.org

Zed — это довольно хипстерский текстовый редактор, который также пытается переосмыслить современный процесс разработки ПО. Если Light Table пытается изменить сам принцип разработки, то Zed в основном ограничивается экспериментами с интерфейсом. Разработка была начата в 2011 году, и на сегодняшний день на официальном сайте Zed доступен в виде бинарников под основные платформы, а также в качестве приложения для Chrome Web Store.

Первое, что бросается в глаза при знакомстве с Zed, — отсутствие привычных элементов интерфейса вроде дерева проекта или вкладок. Достаточно спорный шаг, весь зачастую при разработке значительно легче ориентироваться в структуре проекта именно по дереву. Но вот в отсутствии табов некое рациональное зерно есть: обычно при работе с большими проектами количество открытых вкладок разрастается экспоненциально, и уже через полчаса работы приходится постоянно ходить по ним, закрывая то, с чем ты не работаешь в данный момент. В Zed же навигация по проекту осуществляется или с помощью прыжка напрямую к нужному файлу в проекте по его названию (Ctr/Cmd + E) через небольшую консоль в верхней части приложения.

Второй запоминающейся особенностью Zed является упор на многоколоночный интерфейс. Редактор поддерживает несколько фиксированных вариантов сплита рабочего пространства — 50/50%, 25/75% и так далее. Стоит отметить, что вторая (или даже третья) колонка предназначена не только для одновременного редактирования нескольких файлов, но также и для моментального предпросмотра кода на языках, требующих пропроцессинга (таких как Markdown или CoffeeScript).

При работе с Zed очень чувствуется его ориентированность на удаленное редактирование. Так, из коробки он имеет шикарную поддержку редактирования файлов из Dropbox или напрямую на удаленном сервере и поддерживает сессии. Но вот именно как редактор Zed весьма беден. Его встроенное автодополнение базируется на словаре, он не имеет удобных средств работы с расширениями, не позволяет настроить UI так, как хотелось бы. Хотя, наверное, Zed просто не об этом.

Из коробки Zed ориентирован на удаленное редактирование

Кстати, нельзя не отметить, что Zed весьма задумчив. Временами приложение достаточно надолго застывает и теряет всякую отзывчивость, что, конечно, не добавляет удобства к и так довольно необычному экспириенсу.

Навигация осуществляется с помощью GoTo-панели

В общем, Zed странный, и он однозначно не для всех. Если ты не заморачиваешься с бесконечной настройкой пользовательского интерфейса, тебе важна переносимость, возможность стабильного редактирования файлов на удаленном сервере и ты готов попробовать что-то необычное, можешь поиграться. Но для повседневного написания кода Zed явно не подойдет.

 

xakep.ru


Смотрите также