Brackets жил! Brackets жив! Brackets будет жить!
Сижу я как то и думаю, чего бы такого попробовать запустить в linux, что у меня когда то запускалось в windows?
Да, я живу и работаю в Manjaro, но сейчас не об этом.
И решил попробовать старый-добрый Brackets запустить и запустил! Но как и чем, совсем другая тема.
Brackets - редактор кода в основном для веб и созданный из html & javascript, руссифицированный, с удобной установкой плагинов и живым редктированием в гугл хроме. Так же при наведении на url изображение будет показано это изображение.
Но ныне десктопная верся заброшена на v 2.2.1.
Зайдя на сайт для скачивания, я увидел оповещение об совершенно другой версии редактора - Phoenix Code Editor.
Phoenix Code Editor - оказался таким же простым и удобным, руссифицированным онлайн редактором, как и его предшественник - Brackets.
Вы можете элементарно указать файлы с компа и редактировать их в браузере, сохранять их же.
Онлайн редактор так же созданный из html & javascript, замечательно поддерживает расширения и темы Brackets, разные проекты по папкам.
Так же живое редактирование - пишете в css h1 border solid 1px red и в барузере тут же это видно! Ну, с плагином авто сохраниея или в ручную сохранять.
Единственное неудобство - как и в Brackets, онлайн редактор таже поддерживается только в хромных барузерах, которые на основе гугл хрома.
Возможно, это связано с живым редактированием кода.
Скачал хромиум (НЕ Гугл хром!), запустил в нем Phoenix Code Editor, далее создал почти десктоп версию таким способом:
Видите адресную строку, где пишется адрес сайта? С права от нее есть три вертикальные точки, по нажатию на них выпадает меню.
В нем выбираем пункт "Дополнительные настройки", выпадет следующая менюшка и в ней выбираем пункт "Создать ярлык", при этом можно и нужно поставить галочку "Открывать в отдельном окне".
После чего по клику на ярлыке открывается редактор без менюшки самого барузера, прямо как десктопная версия.
Поскльку расширения одинаковые или же одни и теже с Brackets, то я достал из глубокой жо... Тьфу... свалки из файлов текстовый файл с расширениями:
Advanced New File - продвинутая версия создать новый файл, прям как в sublime text. Горячие клавиши Ctrl - Shift - N
Agila Oceanic Next - моя любимая тема.
Beautify - упорядочевает и делает читабельным код. На тулбаре появляется зачок волшебной палочки.
Можно в меню Правка включить при сохранении, но я не рекомендую.
Код будет дергаться при этом, так как сохранение происходит по умолчанию раз в пол сикунды (расширение Autosave every edit!, описано далее.)
Лучше использовать горячии клавиши CTRL + ALT + B или заходить в меню Правка.
Autoprefixer - ставит префиксы свойств CSS для разных браузеров.
Включается в меню Правка - Добавлять префиксы при сохранении файла и Добавлять префиксы при изменении файла.
Autosave every edit! - автосохранение с настройкой времени (по умолчанию пол секунды), нужно включить в меню Файл.
Autosave Files on Window Blur - автосохранение при потере фокуса редактором, когда переключаетесь на какое либо другое окно, кроме редактора.
Включается в меню Правка.
Brackets Bookmarks - закладки в коде, к которым можно вернуться в любой момент. Включается в меню Навигация или по клавишам CTRL + F4
Brackets Color Picker - панель выбора цвета по нажатию CTRL + ALT + K и в меню Вид.
Brackets Css Color Preview - показывает цвета - квадратик, которые есть в строке кода, на поле номера строки. Включается в меню Вид.
Brackets File Tree - Дерево файлов в сайдбаре - панелька с файлами проекта.
Brackets Icons - иконки файлов в сайдбаре - панелька с файлами проекта.
Brackets Outline List - показывает классы, функции, айди и тд (зависит от языка) под файлами проекта, включается с правой стороны, где панелька загрузки плагинов - Toggle Outline.
Brackets Surround - обернуть текст тегом или еще чем либо по нажатию Ctrl - Shift - J
CanIUse - показывает совместимость функция, методов и свойств языка с браузерами. Включается в меню Вид.
Color Highlighter - показывает цвет в CSS как он есть по коду или слову. Так - red Естественно, в коде это более наглядно и удобно выглядит.
ColorHints - дает подсказки по выбору цвета, который у Вас где то есть. Допустим есть где то в CSS Backgroun: #FFFF00 и вы дальше пишите border solid # и вот тут Вам будет подсказка FFFF00.
Indent Guides - показывает что и во что вложено, короче, показывает вертикальную черту между открывающим <div> (и не только) тегом и закрыавющим </div> соответсвующим тегом. Включается в меню Вид. Можно сменить цвет этой черты. Для чего нужно нажать Отладка, далее Открыть файл настроек и в brackets.json. В нем пишем\вставляем "brackets-indent-guides.guideColor": "rgb(0, 255, 99)". Это светло-зеленый, можно ставить свой цвет. Там еще есть настройки черты, но я их не менял ни когда за не надобностью.
Emmet - автоподсказки и сокращения в коде, кто же не знает такой полезный и знаменитый плагин.
HTML Tag Autocompleter for Brackets - автозакрытие тегов в html.
HTML Wrapper - Форматируйте теги <ul>, <ol>, <nav>, <select> и <tr> с одной командой.
HTML5 Template - вставляет шаблом html5 по клавишам Shift+Tab.
HTMLHint - проверка html на лету.
Interactive Linter - проверка кода не лету.
jQuinter - подсказки для селекторов в jQuery, HTML и CSS.
JSLint - проверка Java Script на лету.
Lorem Ipsum - забивка рыбным текстом. Просто несвязный текст для провеки как выглядит заполненный div, span, какая либо область в принципе.
Minifier - минифицирует javascript и CSS.
New jQuery Document ! - создание шаблона JQuery, подключение.
Notes - заметки, что бы быстренько что то сохранить, запомнить и посмотреть позже. На тулбаре появляется зачок приколотой заметки.
Quick Search - Быстрый поиск. Включается в меню Вид.
QuickFormTool - панелька для быстрого создания формы, на ней все элементы - одно нажатие на нужном и готовый код уже в строке.
Sidebar Plus - позволяет скрывать\показывать сайд бар (левая понелька с название файлов) по наваедению\щелчку мыши на нем или же коде.
Для чего нужно нажать Отладка, далее Открыть файл настроек и в brackets.json вставить строчки "sidebarplus.triggermode": "mouseover" для открытия\закрытия по наведению мыши или "sidebarplus.triggermode": "click" для открытия\закрытия по щелчку мыши.
Special Html Characters - вставка спец сивмолов в html в виде кода. Вот так выглядит копирайт в коде © а так стрелка меньше < и стрелка больше > Посмотреть можно тут, расширение позволяте не лазить на сайт, вставлять сразу код. Горячая клавиша Alt + C.
Minimap - миникарта, у которой можно включить авто скрытие двойным щелчком мыши по ней и настроить ее прозрачность зажатой клавишей shift и прокруткой колесам мыши.
ColorKeeper - панель, где можно сохранить цвета.
На тулбаре появляется значок плиточек. Можно включить в меню Вид.
Brackets Commands Quick Search - это окошко команд, налалогичное SublimeText или же Visual Studio Code.
Вызывается горячими клавишами CTRL + ALT + ? Быстроый доступ к командам, удобно!
Там же можно и открывать файла, расположенные в проекте, для этого в этом окне нужно убрать знак ? и появится список файлов.
Brackets Color Palette - позволяет брать цвета "пипеткой" из изображения, которое входит в файлы проекта.
Для начала нужно выбрать нужное изображение, далее или в меню Вид, или горячими клавишами ALT + F6.
Еще можно на тулбаре нажать значок палитры.
Brackets Dark Status Bar - делает черной нижнюю (горизонтальную) полосу редактора.
Extensions Toolbar Reposition - Тулбар помещается в низ и в сочетании с Brackets Dark Status Bar делается ченрым, таким образом ширина основного окна редактора чуть увеличивается.
Brackets Snippets (by edc) - удобные сниппеты, на тулбаре пявляется значок лампочки.
Почему именно они? Можно самому задать триггер, что "запустит" сниппет, "тело" сниппета и его описание, отсортировать по языкм.
Пример: задаем триггер CSS и текст <link rel="stylesheet" href="css/body.css"> Присваеваем какому либо языку (Scope) и сохраняем.
И что же? В тексте набираем CSS, выпадает одноименное название.
Если соглаимся и нажмем Enter, то будет вставлен код: <link rel="stylesheet" href="css/body.css">.
Если что то пишем дальше, то и пишем дальше, ни чего не вставится. Короче, хорошее дополнение к Emmetу получается, Удобно!
Quickjs - Готовые сниппеты для JavaScript и JQuery, их не много. Добавляется пунк в меню на самом верху, где Файл, Правка, Найти и тд.
Strip trailing spaces - удаляет пробелы в начале или конце строки, стоит включить в меню Правка.
Brackets CSS Class Code hint - подсказывает классы.
CSSLint - проверка CSS на лету.
CSSFier - легко и просто перенести классы из HTML в CSS.
Как это работает, лучше всего посмотреть на сайте разработчика расширения.
Есть уже встроенные расширения, которые раньше были отдельными.
К примеру, расширение stars, которое показывает рейтинг расширений.
Конечно, это не все расширения, их еще много можно установить: PHP, Vue js, LESS, SASS, другие сниппеты и так далее.
В целом добротный редактор для фронтенда. Не такой быстрый, как Seblime Text, но и быстрее Atom.
Не забываем про живое редактирование с автосохранением. Мой список расширений может менятся, ни что не совершенно и все меняется.
Я очень рад, что данный редактор жив и развивается, теперь кроссплатформенный онлайн.
Честно, не ожидал его увидеть уже в живых, реинкарнировался, так сказать.
Я когда то с него начинал, прям ностальгия.