Найкращі IDE та текстові редактори для «фронтендника»

Десяток-другий років тому веб-сайти робабо за допомогою рук та звичайного текстового редактора. Самостійне прописування тегів html, трохи чаклунства за допомогою інлайнових стилів у CSS, приправлені цікавою анімацією - і сайт готовий до експлуатації. Зараз створення та розвиток веб-сайту чи додатку – це структурований процес. Сайт можна створити за допомогою конструктора за хвабону, а можна мучитися над ним кілька місяців. У міру того, як змінюється веб-розробка, з'являються нові фреймворки, плагіни та програми для оптимізації написання коду. Додаткові інструменти спрощують робоче середовище та підвищують продуктивність. Ми використовуємо системи контролю версій для спільного управління проектами з відкритим вихідним кодом та бібліотеки, на зразок jQuery. Середовище розробки відіграє важливу роль у процесі створення сайту. Вибір ідеального текстового редактора може бути складним, але здійсненним завданням, яке вимагає застосування емпіричного дослідження. Як не загубитися в цьому океані інструментів, додатків та плагінів? Який текстовий редактор вибрати для повсякденної роботи а який для pet-проектів? Ми склали невеликий список найпопулярніших інструментів для початківців frontend-розробників. У статті ми забули згадати вашого улюбленого редактора? Залишайте коментарі!

Notepad++

Реліз: 24 листопада 2003. Найпростіший текстовий редактор з підсвічуванням синтаксису та вкладками. Підтримує безліч мов програмування та технологій. Відмінно підійде фахівцю-початківцю, який тільки-но ступив на слизьку доріжку веб-розробки. Можливості:

• створення закладок;
• автоматичне копіювання та збереження створених файлів;
• підтримка та конвертація стандартних кодувань тексту;
• користувачі самостійно можуть встановити правила підсвічування синтаксису;
• встановлення різних корисних плагінів;
• налаштування та перевизначення «гарячих» клавіш;
• перевірка орфографії та шифрування тексту;
• гра в тетріс (на випадок, якщо ви втомабося кодувати);
• може керувати більшими обсягами даних.

Додатковою "фічею" цього редактора вважається "пасхалка" у вигляді відображення цитат Темного Батька - Дарта Вейдера та батька "папки ненависті" - Білла Гейтса. Ложка дьогтю: дуже спрощений інтерфейс, який не відповідає сучасним стандартам розробки. Його можна порівняти зі світлом кишенькового ліхтарика вдень. Підсвічування синтаксису: + Автоматичне визначення тегів: + Сумісність із ОС: Windows, ReactOS. Безкоштовна версія: так. Посилання: https://notepad-plus-plus.org/download/v7.5.1.html

Brackets

Реліз: 4 листопада 2014 року. У Adobe є багато класних продуктів, гаряче улюблених Frontend-розробниками та дизайнерами. І Brackets – один із них. Цей безкоштовний кросплатформовий редактор з відкритим вихідним кодом базується на JavaScript, HTML5 та CSS3, тому в роботі орієнтований саме на них. Якщо у вас є базове розуміння JavaScript, саме з цього редактора потрібно починати роботу. Тому що саме він надасть усі необхідні інструменти для розширення. Редактор потребує деяких доопрацювань, але загалом досить активно розвивається та користується популярністю у розробників. Причому кожен користувач може внести свої зміни та створити додаткові розширення. Можливості:

• підказки при редагуванні JS, CSS та HTML-файлів;
• підтримка перегляду коду у браузері в реальному часі (Live Preview);
• синхронізація з FTP-сервером;
• підтримка та автоматична компіляція CSS у less-файли;
• надає вибір шрифтів (з можливістю їх доповнення), які можна використовувати під час роботи з текстом;
• робота із системою контролю версій – Git.

У новій версії 2017 року з'явилася можливість пошуку з історії, відправлення та прийняття файлів з різними кодуваннями, перехід з історії редагування за допомогою гарячих клавіш, включення та відключення розширень та рідне меню під Linux. Підсвічування синтаксису: + Автоматичне визначення тегів: + Сумісність з ОС: macOS, Windows та Linux. Безкоштовна версія: так. Посилання: http://brackets.io

Sublime

Реліз: 18 січня 2008. Кросплатформовий редактор коду та інтегроване середовище розробки (IDE). Полюбабо цей редактор за швидкість і легкість у використанні, тоді як Coda і TextMate опинабося на узбіччі і розчарували основну базу користувачів незручними оновленнями. Можливості:

• швидка навігація за файлуми, символами та певними ділянками коду (саме за це і улюблена багатьма користувачами);
• функція перевірки синтаксису спрацьовує відразу при введенні символів;
• оптимізація та повторення останніх дій за допомогою макросів;
• автоматичне збереження коду, що запобігає його втраті;
• підтримка різних візуальних тем та мов програмування;
• збереження часто використовуваних ключових слів та фрагментів коду;
• набір готових плагінів на Python;

Підсвічування синтаксису: + Автоматичне визначення тегів: + Сумісність із ОС: Windows, Mac OS, GNU/Linux. Безкоштовна версія: є (без функціональних обмежень), але після ознайомлення додаток вимагає придбати ліцензію. Посилання: http://www.sublimetext.com/3

WebStorm

Реліз: 2015. Це не звичайний текстовий редактор, а інтегроване середовище розробки для JavaScript, CSS & HTML. Її автори - компанія JetBrains, та сама, що створила улюблене студентами JavaRush середовище IntelliJ IDEA. WebStorm є одним з найрозумніших і найпопулярніших редакторів. Підтримує основні фреймворки: AngularJS, React та Meteor та служить для створення програми на Node.js. WebStorm досить складне середовище, але при цьому воно чудово підходить тим, кому необхідно безліч розширень і «фіч». Можливості:

• ефективно працює з проектами різного розміру завдяки інтеграції із системою контролю версій Git, GitHub, Mercurial. Це дозволяє «комітіті» файли, переглядати зміни і вирішувати конфлікти прямо в IDE;
• LiveEdit – показує попередні зміни без перезавантаження сторінки (працює з браузером Google Chrome);
• аналіз коду в процесі редагування;
• рефакторинг та налагодження коду на Javascript та Node.js додатків;
• підтримка мов ECMAScript, TypeScript, CoffeeScript та Dart;
• створення програм за допомогою шаблону Node.js Express;
• запуск та налагодження з фреймворками на кшталт Mocha, Karma та Protractor. Тестити можна в самому редакторі або зручному деревоподібному меню, з якого можна швидко повернутися назад до тексту;
• повністю підтримуються передпроцесори LESS, Sass, SCSS, Stylus;
• швидкий пошук у вікні терміналу;
• структуризація проектів, у яких задіяно кілька бібліотек Javascript;
• підтримка JQuery, YUI, Prototype, DoJo, MooTools, Qooxdoo та Bindows;
• початкова підтримка та робота з Angular 2.

Підсвічування синтаксису: + Автоматичне визначення тегів: + Сумісність із ОС: Windows, Mac OS, GNU/Linux. Безкоштовна версія: Є пробна версія на 30 днів, потім потрібно придбати ліцензію. Посилання: http://www.jetbrains.com/webstorm/

Atom

Реліз: 26 лютого 2014 року. Безкоштовне програмне забезпечення з відкритим вихідним кодом, створене авторами всіма улюбленого Github . Він побудований на 50 модулях та написаний на Node JS, CoffeeScript, CSS, HTML та C++. Ви також можете розробляти свої модулі та викладати їх у репозиторій у відкритий доступ. Це середовище досить проста у використанні, а додаткові плагіни допомагають розширити можливості роботи з ним. Можливості:

• використовує GUI для налаштування замість json файлів;
• перегляд міні-картки коду та його фрагментів;
• швидкий пошук за проектами та файлуми;
• зручна бічна панель та дерево файлів;
• безліч пакетів розширень доступних на Github;
• підтримка Emmet, Autoprefixer, Livereload;
• перегляд файлу через дерево бічної панелі;
• можливість налаштувати редактор під індивідуальні уподобання користувача;
• наявність вбудованого файлового менеджера;
• немає потреби встановлювати контрольний пакет із плагінами, достатньо використовувати графічний інтерфейс користувача;
• підтримка плагінів, написаних на Node.js;
• попередній перегляд зображень PNG, JPEG у редакторі;
• пропонує роботу із системою управління версіями Git.

Ложкою дьогтю може стати те, що він вимагає багато пам'яті і не здатний обробляти великі файли даних. Підсвічування синтаксису: + Автоматичне визначення тегів: + Сумісність із ОС: Windows 7, 8, Mac OS 10.8, Linux. Безкоштовна версія: так. Посилання: https://atom.io

Vim

Реліз: 2 листопада 1991 року. Ви можете запитати: що в цьому списку сучасних редакторів забув «олдовий» Vim? Насправді Vim - цілком сучасний і потужний текстовий редактор, створений на базі старого vi, доступного в ОС сімейства UNIX. І вона постійно розвивається. Розробники практично щорічно вносять зміни, додаючи нові плагіни та надбудови. Востаннє це сталося в 2016 році, а кількість розширень і швидкість дійсно вражають і заслуговують на увагу. Vim – багаторежимний редактор. Ви можете працювати відразу в кількох: командному, вставці або візуальному. Однак варто врахувати, що він досить складний для розробника-початківця. Хоча й фахівці з багаторічним стажем не підозрюють про багато його функцій. Можливості:

• підтримка стандартних кодувань тексту;
• можна працювати з кількома файлуми одночасно;
• автоматичне розпізнавання та перетворення файлів;
• сумісність з мовами програмування Perl, Tcl, Python та Ruby;
• створення комфортних налаштувань під потреби кожного користувача;
• запис та реалізація макросів;
• візуальний режим може виконувати безліч корисних функцій (наприклад виділення блоків тексту);
• підтримка нестандартних мов з листом праворуч наліво (на кшталт арабської чи івриту);
• зручне налаштування за пошуковими словами та історії команд;
• підтримує повне використання клавіатури без мишки;
• у роботі з великими файлуми демонструє надзвичайну продуктивність.

Підсвічування синтаксису: + Автоматичне визначення тегів: + Сумісність з ОС: Windows, DOS, Linux, BSD та Mac OS, iOS, Android, AmigaOS, Atari MiNT, BeOS, NextStep, OS/2, OSF, RISC OS, SGI, VMS. Безкоштовна версія: так. Посилання: https://vim.sourceforge.io/download.php

Netbeans

Реліз: 1997. Безкоштовна IDE з відкритим вихідним кодом, спонсорована Oracle, яку підтримують розробники-ентузіасти. Постійно розвивається та доповнюється різними розширеннями для зручності та покращення швидкості роботи. Можливості:

• керування вікнами та зберіганням даних;
• зміна інтерфейсу та дизайну (включаючи меню та спливаючі вікна);
• налаштування з'єднання з віддаленим сервером;
• доступний рефакторинг коду;
• існують доповнення, шаблони та генератори коду;
• підтримує багато мов програмування;
• автоматична перевірка та виправлення синтаксису;
• налаштування редактора під потреби користувача;
• запуск та налагодження JavaScript та Node.JS додатків;
• підтримка фреймворків PHP (Symfony, Zend та Yii).

Ложка дьогтю: споживає багато пам'яті. Підсвічування синтаксису: + Автоматичне визначення тегів: + Сумісність з ОС: Microsoft Windows, Linux, FreeBSD, Mac OS X, OpenSolaris та Solaris. Безкоштовна версія: так. Тільки безкоштовна і є. Посилання: https://netbeans.org

Хардкорний бонус: Notepad, він же – «Блокнот»

Реліз: 1985, разом з Windows 1.0. Так-так, той самий «Блокнот», який встановлений за замовчуванням у всіх ваших комп'ютерах Windows. "Що тут забула ця давнина, яке відношення ЦЕ взагалі має до розробки?", - Запитайте ви. Насправді ми розуміємо, що навряд чи хтось сьогодні створюватиме щось серйозне у класичному «Блокноті». Тим не менш, саме в цій програмі маса розробників-початківців останні років так 15-20 «верстала» свої перші сайти і писала свої перші програми. Це ми до того, що якщо ви хочете навчатися, вас ніщо не повинно зупиняти. Справжньому розробнику (і тому, хто хоче ним стати) — і Блокнот не перешкода. Можливості: лише чорний текст, лише хардкор. Ложка дьогтю: ніякого дьогтю: «Блокнот» ідеальний у своєму мінімалізмі! Підсвічування синтаксису: ні. Тренуйте пам'ять! Автоматичне визначення тегів: що ви! Безкоштовна версія: «Блокнот» безкоштовний рівно настільки, наскільки безкоштовна ваша Windows.