В данной записи мы с вами рассмотрим новый редактор кода Brackets. Это очень удобный и компактный редактор кода, который подойдет как новичкам так и опытным программистам. Данный редактор легкий и простой как Sublime Text и многофункциональный как PHP Storme.
Ссылка на редактор — http://brackets.io
Первым большим плюсом является его доступность. Данный редактор бесплатный, поэтому вы легко можете его скачать с официального сайта.
Давайте я вам покажу основные моменты настройки редактора, а так же посмотрим его функционал.
Оформление
Во вкладке «Вид->Themes» вы можете изменить основные настройки оформления. По стандарту имеются две темы — Brackets Dark и Brackets Light, но в дальнейшем вы сможете установить тему из библиотеки.
Вы можете также изменить размер и семейство шрифта. Вы можете использовать любой шрифт который имеется в вашей системе.
Во вкладке Вид есть и другие настройки, которые позволяют изменить оформления редактора.
- вы можете разделить экран и открыть одновременно 2 файла. Для этого нужно выбрать Vertical Split или Horizontal Split.
- можно скрыть боковую панель нажав на соответствующий пункт меню
- увеличить или уменьшить размер шрифта
- нажмите на «Подсвечивать активную область» и редактор будет подсвечивать строку на которой находится курсов
- вы можете отключить или включить нумерацию строк
- «Заворачивать строки» данный параметр позволяет заворачивать длинные строки кода, которые вылазят за размеры окна редактора.
Добавление новых плагинов и тем
Плагины добавляются очень просто. Для того чтобы добавить новый плагин необходимо просто нажать на соответствующую кнопку на правой боковой панели.
После нажатия на кнопку у вас открывается окно в котором вы можете посмотреть доступные плагины и темы, а так же обновить уже имеющиеся. Помимо этого вы можете отключить не нужные стандартные дополнения выбрав вкладку Default.
Навигация
Это первый редактор который так подробно описывает файл в котором вы работаете. Здесь вы можете узнать количество строк и столбцов в файле, указать тип файла из списка, без труда поменять кодировку, а так же поменять тип курсора.
Быстрый просмотр и замена стилей элемента.
Выбираете элемент, нажимаете Ctrl + E и появляется окно со всеми стилями, которые применены к данному элементу. Вы можете их переписать или добавить новые и они сохраняться в том файле в котором они были прописаны.
Так же вы можете применять быстрое редактирования для CSS свойств. Здесь несколько видов окон быстрого редактирования, для каждого свойства представлено свое окно.
1)Нажав на кодировку цвета у таких свойств как background, color, border и так далее, и нажав клавиши Ctrl + E, у вас появляется окно с палитрой, где вы сможете выбрать нужный вам цвет
2) Вы можете нажать тоже сочетание клавиш выбрав значение свойства animate и тогда у вас выведется окно с графиком анимации.
Я испробовал не все свойства, поэтому не могу описать все окна которые предоставляет нам данный редактор для быстрого редактирования. Возможно на тот момент когда вы будете читать эту запись появятся обновления которые добавят новые окна.
Быстрый доступ к редактированию функции JavaScript
Данный редактор позволяет быстро править JS функции, аналогично правкам CSS.
Встроенная документация
Аналогично предыдущему правилу вы можете увидеть справку по CSS свойствам и по HTML тегам. Для этого нужно выбрать нужное свойство или тег и нажать клавиши Ctrl + K? после чего у вас появится окно в котором будет информация о данном элементе.
Возможность просмотра изменений после редактирования без перезагрузки страницы.
С помощью данной функции вы можете открывать файл и браузер на разных мониторах и просматривать изменения без перезагрузки страницы.
К сожалению на тот момент, когда я пишу эту запись, эта функция работает только для браузера Chrome.
