Ang pinakamahusay na mga IDE at text editor para sa front-end na developer

Isang dosenang o dalawang taon na ang nakalilipas, ang mga website ay ginawa gamit ang mga kamay at isang regular na text editor. Pagsusulat ng iyong sariling mga html tag, isang maliit na magic gamit ang mga inline na istilo sa CSS, na tinimplahan ng nakakaaliw na animation - at ang site ay handa nang gamitin. Sa ngayon, ang paglikha at pagbuo ng isang website o application ay isang structured na proseso. Maaari kang lumikha ng isang website gamit ang tagabuo ng website sa isang minuto, o maaari kang magdusa dito sa loob ng ilang buwan. Habang nagbabago ang web development, lumalabas ang mga bagong framework, plugin, at application para i-streamline ang coding. Pinapasimple ng mga karagdagang tool ang iyong kapaligiran sa trabaho at pinapataas ang pagiging produktibo. Gumagamit kami ng mga version control system para sa collaborative na open source na pamamahala ng proyekto at mga library tulad ng jQuery. Ang kapaligiran ng pag-unlad ay gumaganap ng isang napakahalagang papel sa proseso ng paglikha ng isang website. Ang pagpili ng perpektong word processor ay maaaring maging isang mahirap ngunit magagawa na gawain na nangangailangan ng aplikasyon ng empirical na pananaliksik. Paano hindi mawawala sa karagatang ito ng mga tool, application at plugin? Aling text editor ang dapat mong piliin para sa pang-araw-araw na trabaho, at alin para sa mga proyekto ng alagang hayop? Nag-compile kami ng maliit na listahan ng mga pinakasikat na tool para sa mga baguhan na developer ng frontend. Nakalimutan ba naming banggitin ang iyong paboritong editor sa artikulo? Mag-iwan ng mga komento!

Notepad++

Paglabas: Nobyembre 24, 2003. Ang pinakasimpleng text editor na may syntax highlighting at mga tab. Sinusuportahan ang maraming mga programming language at teknolohiya. Perpekto para sa isang baguhan na kakatuntong pa lang sa madulas na dalisdis ng web development. Mga posibilidad:

• paglikha ng mga bookmark;
• awtomatikong pagkopya at pag-save ng mga nilikhang file;
• suporta at conversion ng mga karaniwang text encoding;
• ang mga gumagamit ay maaaring independiyenteng magtakda ng mga panuntunan para sa pag-highlight ng syntax;
• pag-install ng iba't ibang mga kapaki-pakinabang na plugin;
• pagtatakda at muling pagtukoy ng mga hot key;
• spell checking at text encryption;
• paglalaro ng Tetris (kung sakaling pagod ka sa coding);
• maaaring pamahalaan ang malalaking volume ng data.

Ang isang karagdagang "tampok" ng editor na ito ay itinuturing na isang "Easter egg" sa anyo ng pagpapakita ng mga panipi mula sa Dark Father - Darth Vader at ang ama ng "folder ng poot" - Bill Gates. The fly in the ointment: isang sobrang pinasimple na interface na hindi nakakatugon sa mga pamantayan ng pag-unlad ngayon. Maihahalintulad ito sa liwanag ng flashlight sa araw. Syntax highlighting: + Awtomatikong tag detection: + OS compatibility: Windows, ReactOS. Libreng bersyon: oo. Link: https://notepad-plus-plus.org/download/v7.5.1.html

Mga bracket

Релиз: 4 ноября 2014. У Adobe есть много классных продуктов, горячо любимых Frontend-разработчиками и дизайнерами. И Brackets — один из них. Этот бесплатный кроссплатформенный редактор с открытым исходным codeом основан на JavaScript, HTML5 и CSS3, поэтому в работе ориентирован именно на них. Если у вас есть базовое понимание JavaScript, то именно с этого редактора нужно начинать работу. Потому что именно он предоставит все необходимые инструменты для расширения. Редактор нуждается в некоторых доработках, но в целом достаточно активно развивается и пользуется популярностью у разработчиков. Причём каждый пользователь может внести свои изменения и создать дополнительные расширения. Возможности:

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

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

Sublime

Релиз: 18 января 2008. Кроссплатформенный редактор codeа и интегрированная среда разработки (IDE). Полюбor этот редактор за speed и лёгкость в использовании, в то время, How Coda и TextMate оказались на обочине и разочаровали основную базу пользователей весьма неудобными обновлениями. Возможности:

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

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

WebStorm

Релиз: 2015. Это не обычный текстовый редактор, а и интегрированная среда разработки для JavaScript, CSS & HTML. Её авторы — компания JetBrains, та самая, что создала любимую студентами JavaRush среду IntelliJ IDEA. WebStorm является одним из самых «умных» и популярных редакторов. Поддерживает основные фреймворки: AngularJS, React и Meteor и служит для создания applications на Node.js. WebStorm достаточно сложная среда, но при этом она отлично подходит тем, кому необходимо множество расширений и «фич». Возможности:

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

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

Atom

Релиз: 26 февраля 2014. Бесплатное программное обеспечение c открытым исходным codeом, созданное авторами всеми любимого Github. Он построен на 50 модулях и написан на Node JS, CoffeeScript, CSS, HTML и C++. Вы также можете разрабатывать свои модули и выкладывать их в репозиторий в открытый доступ. Эта среда разработки достаточно проста в использовании, а дополнительные плагины помогают расширить возможности работы с ним. Возможности:

• использует GUI для настройки instead of json файлов;
• просмотр мини-карты codeа и его фрагментов;
• быстрый поиск по проектам и fileм;
• удобная боковая панель и дерево файлов;
• огромное количество пакетов расширений доступных на Github;
• поддержка Emmet, Autoprefixer, Livereload;
• просмотр file через дерево боковой панели;
• возможность настроить редактор под индивидуальные предпочтения пользователя;
• наличие встроенного файлового менеджера;
• нет потребности устанавливать контрольный пакет с pluginми, достаточно использовать графический интерфейс пользователя;
• поддержка плагинов, написанных на Node.js;
• предварительный просмотр изображений PNG, JPEG непосредственно в редакторе;
• предлагает работу с системой управления versionми Git.

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

Vim

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

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

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

Netbeans

Релиз: 1997. Бесплатная IDE с открытым исходным codeом, спонсируемая Oracle, которую поддерживают разработчики-энтузиасты. Постоянно развивается и дополняется различными расширениями для удобства и улучшения скорости работы. Возможности:

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

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

Хардкорный бонус: Notepad, он же — «Блокнот»

Релиз: 1985 год, вместе с Windows 1.0. Да-да, тот самый «Блокнот», который установлен по умолчанию во всех ваших Windows-компьютерах. «What тут забыла эта древность, Howое отношение ЭТО вообще имеет к разработке?», —спросите вы. На самом деле мы понимаем, что вряд ли кто-то сегодня будет создавать что-то серьезное в классическом «Блокноте». Тем не менее, именно в этой программе масса начинающих разработчиков последние лет этак 15-20 «верстала» свои первые сайты и писала свои первые программы. Это мы к тому, что, если вы хотите учиться, вас ничто не должно останавливать. Настоящему разработчику (и тому, кто хочет им стать) — и «Блокнот» не помеха. Возможности: только чёрный текст, только хардкор. Ложка дёгтя: ниHowого дёгтя: «Блокнот» идеален в своем минимализме! Подсветка синтаксиса: нет. Тренируйте память! Автоматическое определение тегов: ну что вы! Бесплатная version: «Блокнот» бесплатен ровно настолько, насколько бесплатна ваша Windows.