Adobe Crackets - это простая и мощная интегрированная интегрированная среда разработки с открытым исходным кодом для HTML, CSS и JavaScript. Он поддерживает добавление плагинов для обеспечения дополнительных функциональных расширений. В настоящее время доступные плагины, такие как выявление ошибок, специфичный для браузера префикс CSS, аннотации JSDOC и т. Д. В следующем редакторе кратко представлены использование и настройки кронштейнов:
1. Настройки проекта
1. Откройте кронштейны, весь интерфейс очень прост, а верхняя строка меню предоставляет только файл File> Exit Editor. Слева - дерево файлов структуры организации проекта. Используйте Ctrl/Cmd+Shift+H, чтобы вызовать и закрыть дерево файлов. Правая сторона - это область редактирования, верхняя часть - панель инструментов, средняя часть - это область документа, а нижняя часть - это приглашенная область.
2. Откройте проект. Используйте команду File> Открыть папку, чтобы открыть папку проекта. Имя проекта дерева файлов слева обновляется с именем папки проекта, а дерево файлов обновляется до дерева файлов текущего проекта.
Нажмите на левую кнопку на названии проекта, чтобы вспять меню «Редактирование проекта». Меню редактирования будет отображать исторический проект и команду по редактированию проекта.
Команда открытия папки: откройте новый проект.
Команда настроек проекта: устанавливает веб -адрес текущего проекта, который будет использоваться во время отладки и предварительного просмотра страниц.
Настройка требований: должен быть веб -адрес, начиная с http: //.
Как показано на рисунке выше, при установке на http://127.0.0.1/demo/slide, соответствующая страница будет открыта через веб -адрес при предварительном просмотре.
Если не установить, страница будет открыта через адрес буквы диска файла.
2. Редактирование файлов
Нажмите index.html в дереве файлов и откройте документ index.html в основной области.
1. Brackest проверит, соответствует ли документ с спецификацией HTML. Как показано на рисунке ниже, на 20 линиях есть блок стиля, который необходимо размещать в узле головного узла.
2. Поместите курсор на имя метки атрибута класса или идентификатора, нажмите CTRL/CMD + E (EDIT) или редактирование выхода. Кроншеты будут искать все файлы CSS в рамках проекта, а затем откроют встроенный редактор, чтобы встроить его в файл HTML, что позволяет быстро изменить код CSS.
Когда тег Class/ID имеет несколько определений стилей, окно редактирования предоставляет кнопку переключения для переключения стиля дисплея, или вы можете использовать клавиши Alt + Up/Down Sharrow для переключения.
Следует отметить, что кронштейны будут обнаружить текущий документ HTML и все файлы CSS в рамках проекта, чтобы найти стили класса/идентификатора, даже если некоторые файлы CSS не указаны в текущем документе HTML.
3. Кроншеты также поддерживают быстрый предварительный просмотр/редактирование определений объектов JS. Поместите курсор на имя функции JS, нажмите CTRL/CMD + E (EDIT) или редактирование выхода.
4. Кроншеты имеют встроенный цветовой сборщик, обеспечивающий формы цветовой кодирования RGBA, HEX и HSLA. Поместите курсор на цветовой код, нажмите Ctrl/Cmd + E (Edit). Вам нужно использовать ключ ESC, чтобы выйти из окна Color Collector.
3. Мгновенный предварительный просмотр
Кронштейны обеспечивают мгновенный предварительный просмотр веб -страниц. При использовании этой функции кронштейны вызывает Chrome Browser, чтобы открыть текущую страницу. После изменения HTML, CSS, JavaScript и сохранения модифицированный контент немедленно реагирует на страницу в браузере, не обновляя страницу вручную. Это один из самых ярких моментов скобков. Благодаря двум кодерам монитора, вы можете отображать кронштейны и Chrome на разделенном экране, мгновенную модификацию мгновенных предварительных просмотров без переключения редактора/браузера и освежающих страниц.
Некоторые ограничения текущей функции предварительного просмотра в прямом эфире:
Он работает только с Chrome Browser в качестве целевого браузера, вы должны установить Chrome.
Он опирается на удаленную отладку в Chrome, которая включена флагом командной строки. На Mac, если вы уже используете Chrome, то запустите мгновенный предварительный просмотр, скобки спросят вас, хотите ли вы перезапустить Chrome, чтобы обеспечить дистанционную отладку.
Только один HTML -файл может быть предварительно просмотр одновременно - если вы переключите другой HTML -файл, кронштейны закроют исходный предварительный просмотр.
4. Некоторые ярлыки клавиш
Ctrl/Cmd+Shift+H может вызывать и закрыть дерево файла
Ctrl/Cmd + E Quick Preview/Edit CSS Style/Javascript Функция
CTRL/CMD + +/- Увеличить и из размера шрифта зоны редактирования
CTRL/CMD + 0 Сбросить размер шрифта области редактирования
CTRL/CMD + ALT + P Включите функцию мгновенного предварительного просмотра
Ctrl / Cmd + / Line Comments
Ctrl / Cmd + Alt + / Block Comments
Примечание. При комментировании кода CSS и HTML -кода вы можете использовать только клавиши ярлыков комментариев.