Десяток-другий років тому веб-сайти робабо за допомогою рук та звичайного текстового редактора. Самостійне прописування тегів html, трохи чаклунства за допомогою інлайнових стилів у CSS, приправлені цікавою анімацією - і сайт готовий до експлуатації. Зараз створення та розвиток веб-сайту чи додатку – це структурований процес. Сайт можна створити за допомогою конструктора за хвабону, а можна мучитися над ним кілька місяців. У міру того, як змінюється веб-розробка, з'являються нові фреймворки, плагіни та програми для оптимізації написання коду. Додаткові інструменти спрощують робоче середовище та підвищують продуктивність. Ми використовуємо системи контролю версій для спільного управління проектами з відкритим вихідним кодом та бібліотеки, на зразок jQuery. Середовище розробки відіграє важливу роль у процесі створення сайту. Вибір ідеального текстового редактора може бути складним, але здійсненним завданням, яке вимагає застосування емпіричного дослідження. Як не загубитися в цьому океані інструментів, додатків та плагінів? Який текстовий редактор вибрати для повсякденної роботи а який для pet-проектів? Ми склали невеликий список найпопулярніших інструментів для початківців frontend-розробників. У статті ми забули згадати вашого улюбленого редактора? Залишайте коментарі!
Можливості:
Ложка дьогтю: дуже спрощений інтерфейс, який не відповідає сучасним стандартам розробки. Його можна порівняти зі світлом кишенькового ліхтарика вдень. Підсвічування синтаксису: + Автоматичне визначення тегів: + Сумісність із ОС: Windows, ReactOS. Безкоштовна версія: так. Посилання: https://notepad-plus-plus.org/download/v7.5.1.html
Можливості:
Підсвічування синтаксису: + Автоматичне визначення тегів: + Сумісність з ОС: macOS, Windows та Linux. Безкоштовна версія: так. Посилання: http://brackets.io
Можливості:
Підсвічування синтаксису: + Автоматичне визначення тегів: + Сумісність із ОС: Windows, Mac OS, GNU/Linux. Безкоштовна версія: є (без функціональних обмежень), але після ознайомлення додаток вимагає придбати ліцензію. Посилання: http://www.sublimetext.com/3
Можливості:
Підсвічування синтаксису: + Автоматичне визначення тегів: + Сумісність із ОС: Windows, Mac OS, GNU/Linux. Безкоштовна версія: Є пробна версія на 30 днів, потім потрібно придбати ліцензію. Посилання: http://www.jetbrains.com/webstorm/
Можливості:
Ложкою дьогтю може стати те, що він вимагає багато пам'яті і не здатний обробляти великі файли даних. Підсвічування синтаксису: + Автоматичне визначення тегів: + Сумісність із ОС: Windows 7, 8, Mac OS 10.8, Linux. Безкоштовна версія: так. Посилання: https://atom.io
Можливості:
Підсвічування синтаксису: + Автоматичне визначення тегів: + Сумісність з ОС: 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
Це ми до того, що якщо ви хочете навчатися, вас ніщо не повинно зупиняти. Справжньому розробнику (і тому, хто хоче ним стати) — і Блокнот не перешкода. Можливості: лише чорний текст, лише хардкор.
Так виглядав перший «Блокнот»
Ложка дьогтю: ніякого дьогтю: «Блокнот» ідеальний у своєму мінімалізмі! Підсвічування синтаксису: ні. Тренуйте пам'ять! Автоматичне визначення тегів: що ви! Безкоштовна версія: «Блокнот» безкоштовний рівно настільки, наскільки безкоштовна ваша Windows.
Notepad++
Реліз: 24 листопада 2003. Найпростіший текстовий редактор з підсвічуванням синтаксису та вкладками. Підтримує безліч мов програмування та технологій. Відмінно підійде фахівцю-початківцю, який тільки-но ступив на слизьку доріжку веб-розробки.- створення закладок;
- автоматичне копіювання та збереження створених файлів;
- підтримка та конвертація стандартних кодувань тексту;
- користувачі самостійно можуть встановити правила підсвічування синтаксису;
- встановлення різних корисних плагінів;
- налаштування та перевизначення «гарячих» клавіш;
- перевірка орфографії та шифрування тексту;
- гра в тетріс (на випадок, якщо ви втомабося кодувати);
- може керувати більшими обсягами даних.
Brackets
Реліз: 4 листопада 2014 року. У Adobe є багато класних продуктів, гаряче улюблених Frontend-розробниками та дизайнерами. І Brackets – один із них. Цей безкоштовний кросплатформовий редактор з відкритим вихідним кодом базується на JavaScript, HTML5 та CSS3, тому в роботі орієнтований саме на них. Якщо у вас є базове розуміння JavaScript, саме з цього редактора потрібно починати роботу. Тому що саме він надасть усі необхідні інструменти для розширення. Редактор потребує деяких доопрацювань, але загалом досить активно розвивається та користується популярністю у розробників. Причому кожен користувач може внести свої зміни та створити додаткові розширення.- підказки при редагуванні JS, CSS та HTML-файлів;
- підтримка перегляду коду у браузері в реальному часі (Live Preview);
- синхронізація з FTP-сервером;
- підтримка та автоматична компіляція CSS у less-файли;
- надає вибір шрифтів (з можливістю їх доповнення), які можна використовувати під час роботи з текстом;
- робота із системою контролю версій – Git.
Sublime
Реліз: 18 січня 2008. Кросплатформовий редактор коду та інтегроване середовище розробки (IDE). Полюбабо цей редактор за швидкість і легкість у використанні, тоді як Coda і TextMate опинабося на узбіччі і розчарували основну базу користувачів незручними оновленнями.- швидка навігація за файлуми, символами та певними ділянками коду (саме за це і улюблена багатьма користувачами);
- функція перевірки синтаксису спрацьовує відразу при введенні символів;
- оптимізація та повторення останніх дій за допомогою макросів;
- автоматичне збереження коду, що запобігає його втраті;
- підтримка різних візуальних тем та мов програмування;
- збереження часто використовуваних ключових слів та фрагментів коду;
- набір готових плагінів на Python;
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.
Atom
Реліз: 26 лютого 2014 року. Безкоштовне програмне забезпечення з відкритим вихідним кодом, створене авторами всіма улюбленого Github . Він побудований на 50 модулях та написаний на Node JS, CoffeeScript, CSS, HTML та C++. Ви також можете розробляти свої модулі та викладати їх у репозиторій у відкритий доступ. Це середовище досить проста у використанні, а додаткові плагіни допомагають розширити можливості роботи з ним.- використовує GUI для налаштування замість json файлів;
- перегляд міні-картки коду та його фрагментів;
- швидкий пошук за проектами та файлуми;
- зручна бічна панель та дерево файлів;
- безліч пакетів розширень доступних на Github;
- підтримка Emmet, Autoprefixer, Livereload;
- перегляд файлу через дерево бічної панелі;
- можливість налаштувати редактор під індивідуальні уподобання користувача;
- наявність вбудованого файлового менеджера;
- немає потреби встановлювати контрольний пакет із плагінами, достатньо використовувати графічний інтерфейс користувача;
- підтримка плагінів, написаних на Node.js;
- попередній перегляд зображень PNG, JPEG у редакторі;
- пропонує роботу із системою управління версіями Git.
Vim
Реліз: 2 листопада 1991 року. Ви можете запитати: що в цьому списку сучасних редакторів забув «олдовий» Vim? Насправді Vim - цілком сучасний і потужний текстовий редактор, створений на базі старого vi, доступного в ОС сімейства UNIX. І вона постійно розвивається. Розробники практично щорічно вносять зміни, додаючи нові плагіни та надбудови. Востаннє це сталося в 2016 році, а кількість розширень і швидкість дійсно вражають і заслуговують на увагу. Vim – багаторежимний редактор. Ви можете працювати відразу в кількох: командному, вставці або візуальному. Однак варто врахувати, що він досить складний для розробника-початківця. Хоча й фахівці з багаторічним стажем не підозрюють про багато його функцій.- підтримка стандартних кодувань тексту;
- можна працювати з кількома файлуми одночасно;
- автоматичне розпізнавання та перетворення файлів;
- сумісність з мовами програмування Perl, Tcl, Python та Ruby;
- створення комфортних налаштувань під потреби кожного користувача;
- запис та реалізація макросів;
- візуальний режим може виконувати безліч корисних функцій (наприклад виділення блоків тексту);
- підтримка нестандартних мов з листом праворуч наліво (на кшталт арабської чи івриту);
- зручне налаштування за пошуковими словами та історії команд;
- підтримує повне використання клавіатури без мишки;
- у роботі з великими файлуми демонструє надзвичайну продуктивність.
Netbeans
Реліз: 1997. Безкоштовна IDE з відкритим вихідним кодом, спонсорована Oracle, яку підтримують розробники-ентузіасти. Постійно розвивається та доповнюється різними розширеннями для зручності та покращення швидкості роботи. Можливості:- керування вікнами та зберіганням даних;
- зміна інтерфейсу та дизайну (включаючи меню та спливаючі вікна);
- налаштування з'єднання з віддаленим сервером;
- доступний рефакторинг коду;
- існують доповнення, шаблони та генератори коду;
- підтримує багато мов програмування;
- автоматична перевірка та виправлення синтаксису;
- налаштування редактора під потреби користувача;
- запуск та налагодження JavaScript та Node.JS додатків;
- підтримка фреймворків PHP (Symfony, Zend та Yii).
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ