Jump to content
Korean Random
MIAPAK

Brackets альтернатива Notepad++?

Recommended Posts

Случайно наткнулся на Brackets - бесплатный редактор с открытым кодом для веб-разработчиков (разработчик Adobe Systemsссылка на  wikipedia

Как обычному пользователю ХВМ (настройка конфига) очень понравился редактор.

 

'Первые впечатления:'

  • Редактор поддерживает русский язык (выбирается при установке)
  • 'Много плагинов, с возможностью установки прямо из редактора'

    post-12531-0-32882000-1482785093_thumb.png
  • 'Осуществляет быстрый просмотр цвета. Из минуса, Быстрое редактирование (изменения цвета) только цвета в цветовом коде html - #FFFFFF'

    post-12531-0-65345600-1482692163_thumb.png
  • 'Осуществляет просмотр изображения(й) которое присутствует в проекте с информацией о его размере'

    post-12531-0-60211300-1482773388_thumb.png
     
  • 'Показывает ошибки возникшие при редактировании файла'

    post-12531-0-06927600-1482692982_thumb.png
  • 'Есть сравнение файлов (требуется установить плагин brackets-compare)'

    post-12531-0-70526400-1482773533_thumb.png
  • 'Подсветка выделенного текста во всем документе + дополнительной подсветкой на вертикальной полосе прокрутке (требуется установить плагин Quick Search)'

    post-12531-0-16242300-1483694934_thumb.png
  • 'Есть двухоконный режим (горизонтальный или вертикальный)'

    post-12531-0-55351700-1482773813_thumb.png
  • Для скролинга по документу, при работе в двухоконном режиме достаточно только переместить курсор в одно из окон (очень удобно)
  • 'При любом изменении в тексте появляется отличительная метка напротив строки в которой произошли изменения (требуется установить плагин Work Heatmap)'

    post-12531-0-49371300-1482774203_thumb.png
  • 'Прямо из редактора можно добавлять - удалять как директории так и файлы.'

    post-12531-0-31926000-1483694491_thumb.png
  • 'есть сектор в котором находится структура открытого нами проекта, а также в случае если мы начали редактировать какой то текст, то этот текст автоматически визуально перемещается в сектор выше с подразделением на Левый и Правый (Двухоконный режим работы)'

    post-12531-0-72760000-1483702471_thumb.png

Короче кому понравился работайте, а может кто-то из знающих людей как-то возьмется и вообще сдружит между собой Brackets и ХВМ сделает что-то на подобии XCPad

Есть хорошие видио уроки https://www.youtube.com/playlist?list=PLPpaecEYRC8bGw3oj3ecnPjSe09r4bPyo

 

********************************************************************************************************************************************************************************************************************

 

'ПЛАГИНЫ и некоторые особенности более развернуто:'

  1. 'Интерактивный просмотр (Live Preview)'

    Интерактивный просмотр - Live Preview']Первое, что стоит отметить, это функцию Интерактивного Просмотра, или, как многие её называют - живой просмотр. Благодаря ей вы можете наблюдать за изменениями сайта, прямо во время верстки страницы. Обратите внимание, что для работы требуется браузер Google Chrome. Именно в нем открывается ваш сайт и показываются все изменения.
    Знаю, знаю, сейчас вы скажите - то же самое есть и в SublimeText! Однако прошу учесть тот факт, что там для этого надо выполнять каждый раз довольно таки не простые "танцы с бубном" confused, прежде чем все начнет работать. А здесь у нас все из коробки. Как поется в одной песне: Нажми на кнопку, получишь результат.
    На данный момент интерактивный просмотр работает в HTML и CSS файлах. А вот при редактировании javascript - придется сохранятся.post-12531-0-93248800-1483722850_thumb.jpg
  2. 'Быстрое редактирование - inline editors'

    Очень удобная штука. Суть в том, что вы можете править CSS и JS прямо из HTML документа. Не переключаясь между файлами. Поверьте, времени экономится просто огромное количество. А про удобство и комфорт работы вообще молчу. Все можно делать из одного файла.
    Вы просто выбираете нужный тег, жмете CMDCTRL+E и у вас открывается специальное окно. В котором можно внести стили для этого селектора. При этом можно редактировать, как уже существующие стили, так и завести новые. Там же доступно переключение между CSS файлами, если у вас их несколько.
    В любом случае - рекомендую погонять. Останетесь довольны.post-12531-0-69172300-1483723072_thumb.jpg
  3. 'Быстрые подсказки'

    Эта фишка мне всегда нравилась в Dreamweaver. Не знаю, как сейчас, но когда-то давно она в нем присутствовала.
    Если вы хотите подключить какой-то файл, стили, скрипты, картинки - не важно. Brackets автоматически подскажет вам не только путь, но и имя файла. Очень удобно!post-12531-0-03051900-1483723401_thumb.jpg
  4. 'Brackets Emmet'

    Этот плагин позволяет быстро набирать HTML и CSSpost-12531-0-04901800-1483723571_thumb.jpg
  5. 'Extract for Brackets (Preview)'

    Позволяет верстать прямо из PSD макета. То есть, в программу Photoshop залазить уже не надо.
    Подключаемся к плагину, закачиваем свой PSD на сервер Adobe Creative Cloud, и наш редактор начинает извлекать все стили и графику из PSD макета.
    post-12531-0-55652900-1483723655_thumb.jpg
  6. 'Brackets Tree Icons - иконки под определенный формат'

    Поддерживаются следующие форматы:
    JavaScript
    JSON
    TypeScript
    CoffeeScript
    LiveScript
    HTML, HTM
    SVG
    XML
    plist
    PHP, SQL
    Java
    CSS, SASS, Less, Stylus
    Shell script, Batch, command
    Jade, EJS, Dust, Haml
    TXT
    Log
    Markdown
    Map
    PNG, JPG, JPEG, TIFF, ICO
    GIF
    MP4, WebM, OGG
    MP3, WAV
    EOT, TTF, WOFF
    GitIgnore, GitModules, GitAttributes
    NPMIgnore, ORG (editorconfig.org)
    HTAccess, HTPasswd, Conf
    YAML
    Project, Jscsrc, Jshintrc, Csslintrc, Todo, Classpath
    Zip, Rar, 7z, Tgz, Tar, Gz, Bzip
    ERB, RB, RDOC
    PY, PYC, PYO, PYD
    post-12531-0-37014800-1483724636.pngpost-12531-0-75047800-1483724636_thumb.jpg
  7. 'Brackets Link File - Вставляет ссылки Java Script и файлы CSS на HTML-документ'

    Просто щелкните правой кнопкой мыши на файле в дереве проекта -> ссылку на файл, а ссылка с правильным относительный путь будет вставлен в документ.
    (Обратите внимание, что это работает только если файл сохраняется)
  8. 'Macro Manager - Расширение для создания и запуска макросов'

    post-12531-0-68331800-1483726742_thumb.gif
  9. 'Any Template - создание своих шаблонов'

    post-12531-0-29750600-1483727014_thumb.gif
  10. 'Brackets Color Palette - позволяет выбрать цвета из изображения'

    post-12531-0-72488100-1483727191_thumb.png
  11. 'Extension Highlighter - раскрашивает расширение файлов'

    post-12531-0-23729000-1483727589_thumb.gif
  12. 'Super Right Click - дополнительные возможности для правого клика мышки'

    post-12531-0-35126600-1483727892_thumb.png
  13. 'Photopea - переход на сайт https://www.photopea.com'

    post-12531-0-15888600-1483728254_thumb.png
  14. 'Brackets Image Convert - преобразования изображений с помощью пакета imagemagick'

    post-12531-0-63731400-1483729135_thumb.png
  15. 'No Distractions Advanced Toolbar View - всплывающая панел'

    по умолчанию прячет левую панель с древом файлов, но при подведении к левому краю древо само появляется (отличная фишка) Жмакнуть на картинку и подождать и будет кино :) post-12531-0-79237500-1483730145_thumb.gif
  16. 'Zoom wheel - Увеличение / уменьшение размера шрифта с помощью колесика мыши'

    post-12531-0-56287200-1483731098_thumb.gif
  17. 'QuickFormTool - плагин для быстрой вставки элементов формы в редакторе'

    post-12531-0-63818400-1483731845_thumb.gif
  18. 'Selected Char Counter - подсчитывание символов в выделенной строке'

    post-12531-0-08012300-1483732267_thumb.gif
  19. 'Railroad diagram of regular - может кому пригодится'

  20. 'Themes for Brackets - понравившиеся 17 тем оформления'

    post-12531-0-30559000-1483733538_thumb.pngpost-12531-0-86297700-1483733538_thumb.pngpost-12531-0-19798000-1483733539_thumb.pngpost-12531-0-61603100-1483733539_thumb.pngpost-12531-0-94414300-1483733539_thumb.pngpost-12531-0-36676400-1483733540_thumb.pngpost-12531-0-68916400-1483733540_thumb.pngpost-12531-0-95289900-1483733540_thumb.pngpost-12531-0-28274800-1483733541_thumb.pngpost-12531-0-62406000-1483733552_thumb.pngpost-12531-0-03912800-1483733553_thumb.pngpost-12531-0-44573400-1483733553_thumb.pngpost-12531-0-87610100-1483733553_thumb.pngpost-12531-0-39854900-1483733554_thumb.pngpost-12531-0-78127800-1483733554_thumb.pngpost-12531-0-10677900-1483733555_thumb.pngpost-12531-0-35011200-1483733555_thumb.png
  21. 'Color Merge - показывает все цвета в тексте (опять же формата #FFFFFF)'

    post-12531-0-73727800-1483734778_thumb.gif
  22. 'Color Marker - раскраска символа в соответствии с его цветом (формат #FFFFFF)'

    post-12531-0-81843300-1483735036_thumb.png
  23. 'brackets-compare - сравнивание файлов'

    post-12531-0-54275500-1483735269_thumb.pngpost-12531-0-70526400-1482773533_thumb.png
  24. 'Pixlr - полнофункциональная профессиональная фото и программное обеспечение для редактирования изображений в редакторе'

    возможно потребует установить Adobepost-12531-0-02994000-1483736355_thumb.png
  25. 'Quick Search - подсветка выбранного элемента во всем тексте'

    post-12531-0-16242300-1483694934_thumb.png
  26. 'Work Heatmap - при любом изменении в тексте появляется отличительная метка напротив строки в которой произошли изменения'

    post-12531-0-49371300-1482774203_thumb.png
  27. 'Preferences setup UI - настройки редактора стоящие по умолчанию расширяет на более широкие :) :) каламбурчик '

    post-12531-0-64249800-1483740192_thumb.png

 

********************************************************************************************************************************************************************************************************************

 

ВЫВОДЫ ПО РЕДАКТОРУ:

  • 'из плюсов:'

    - редактор отлично подходит для работы с конфигами ХВМ
    - очень удобный интерфейс (для любителей использования мышей) все под рукой, надо сделать минимум движений-кликов, чтобы добраться до нужной тебе фишки
    - для скролинга по документу, при работе в двухоконном режиме достаточно только переместить курсор в одно из окон (очень удобно)
    - осуществляет быстрый просмотр-редактирование цвета (см. минусы)
    - просмотр изображения(й) которое присутствует в проекте с информацией о его размере
    - показывает ошибки возникшие при редактировании файла (см. минусы)
    - есть сравнение файлов, требуется установить плагин brackets-compare
    - есть подсветка выделенного текста во всем документе + дополнительной подсветкой на полосе прокрутки текста (требуется установить плагин Quick Search)
    - есть плагин Work Heatmap, фишка которого заключается, что он ставит маркер в начале строки в которой произошли какие либо изменения (данная функция интерактива)
    - прямо из редактора можно добавлять-удалять как директории так и файлы
    - для наглядности сделано несколько секторов работы с документом
  • 'из минусов:'

    - быстрое просмотр-редактирование цвета возможно только в цветовом коде html - #FFFFFF (для устранения данного недочета скорее всего надо искать плагин, пока не искал)
    - при анализе ошибок возникших при редактировании файла нужно брать в расчет, что файлы расширения ХВМ это не равно файлам расширения JavaScript. Поэтому слепо доверять в этом редактору не следует
    - редактор работает на кодировке Unicode
Edited by MIAPAK
  • Upvote 6
  • Downvote 1

Share this post


Link to post

Short link
Share on other sites

еще полазаю дополнительную информацию скину 

  • Upvote 1

Share this post


Link to post

Short link
Share on other sites

Весьма интересный редактор -много расширений устанавливающихся отдельно(некоторые не локализованы),но так и не нашёл возможности сравнения 2х файлов (имхо ещё сыроват)

Share this post


Link to post

Short link
Share on other sites

но так и не нашёл возможности сравнения 2х файлов

 

Почему нет, есть

  1. 'Качаем плагин "brackets-compare" перезагрузить редактор'

    post-12531-0-76847800-1482783092_thumb.pngpost-12531-0-29715600-1482783121_thumb.png
  2. Файлы которые сравниваем должны располагаться в одном проекте
  3. 'Включаем второе окно. В итоге получаем двухоконный режим (Left и Right), где открыты наши сравниваемые тексты'

    post-12531-0-37583400-1482783683_thumb.png
  4. 'Активируем плагин "brackets-compare" '

    post-12531-0-66165700-1482783988_thumb.png
  5. 'Текст сравнен и можно его тут же корректировать. Если надо выйти из режима сравнения нажимаем еще раз на кнопку плагина "brackets-compare" '

    post-12531-0-36369300-1482784103_thumb.png
  6. Единственное в учет надо брать, что изменения можно вносить только в тот текст, что располагается в Left окне (т.е. с права на лево).

Does it support syntax highlighting?

 

'yes '

post-12531-0-65170300-1482784685_thumb.png

 

 

What about custom UDL files?

don't understand the question

Edited by MIAPAK
  • Upvote 1

Share this post


Link to post

Short link
Share on other sites

  1. Обновил шапку темы
  2. После двух недель пользования редактором сложилось такое мнение:

'из плюсов:'

- очень удобный интерфейс (для любителей использования мышей) все под рукой, надо сделать минимум движений-кликов, чтобы добраться до нужной тебе фишки

- для скролинга по документу, при работе в двухоконном режиме достаточно только переместить курсор в одно из окон (очень удобно)

- осуществляет быстрый просмотр-редактирование цвета (см. минусы)

- просмотр изображения(й) которое присутствует в проекте с информацией о его размере

- показывает ошибки возникшие при редактировании файла (см. минусы)

- есть сравнение файлов, требуется установить плагин brackets-compare

- есть подсветка выделенного текста во всем документе + дополнительной подсветкой на полосе прокрутки текста (требуется установить плагин Quick Search)

- есть плагин Work Heatmap, фишка которого заключается, что он ставит маркер в начале строки в которой произошли какие либо изменения (данная функция интерактива)

- прямо из редактора можно добавлять-удалять как директории так и файлы

- для наглядности сделано несколько секторов работы с документом

'из минусов:'

- быстрое просмотр-редактирование цвета возможно только в цветовом коде html - #FFFFFF (для устранения данного недочета скорее всего надо искать плагин, пока не искал)

- при анализе ошибок возникших при редактировании файла нужно брать в расчет, что файлы расширения ХВМ это не равно файлам расширения JavaScript. Поэтому слепо доверять в этом     редактору не следует

Edited by MIAPAK

Share this post


Link to post

Short link
Share on other sites

Обновил шапку - добавил описание плагинов к программе 

П.С. полдня убил и добрался от 01.2017 до 08.2015 :( :) :)

Share this post


Link to post

Short link
Share on other sites

Самое обидное, что не поддерживает ANSI. Было обидно, когда понравился редактор, настроил его и решил открыть свой проект... Получается редактор чисто под хвм... Кому нужен более адекватный - Sublime text 3 поставьте

  • Upvote 1

Share this post


Link to post

Short link
Share on other sites

 

 

что не поддерживает ANSI

сочувствую
 

Share this post


Link to post

Short link
Share on other sites

На моём калькуляторе запускается этот редактор неделю. Вернулся на Нотепад++

Share this post


Link to post

Short link
Share on other sites

Прикольно, мне даже стало интересно ты на своем калькуляторе играешь :):)

Прикольно, мне даже стало интересно как ты на своем калькуляторе играешь :):)

Share this post


Link to post

Short link
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...