Хотя в Gridbox есть удобный встроенный инструмент (Инструменты ➝ Редактор кода), для написания объемных CSS-стилей, кастомных JS-скриптов и верстки сложных HTML-блоков профессионалы используют полноценные редакторы кода с автодополнением (IntelliSense), подсветкой ошибок и форматированием.
1 Скачивание и установка Visual Studio Code
Visual Studio Code (VS Code) — бесплатный, легковесный и самый популярный редактор кода в веб-разработке. Скачай установщик под свою операционную систему с официального сайта:
URL
https://code.visualstudio.com/Download2 Установка необходимых расширений (Extensions)
Для ускорения верстки и проверки синтаксиса открой в VS Code вкладку расширений (Ctrl + Shift + X) и установи следующие плагины:
Рекомендуемый стек плагинов
1. Prettier - Code formatter // Автоматическое выравнивание и форматирование кода2. Auto Rename Tag // Автоматическое переименование парных HTML-тегов3. Color Highlight // Наглядное отображение HEX/RGB цветов прямо в коде4. CSS Peek // Быстрый просмотр CSS-правил при наведении на класс5. Live Server // Локальный предпросмотр HTML-страниц в браузере3 Перенос готового кода в Gridbox
После подготовки и проверки сниппетов в локальном редакторе открой админку Gridbox и перенеси код в соответствующие вкладки:
Карта интеграции
• Стили (CSS) ➝ Инструменты ➝ Редактор кода ➝ вкладка CSS• Скрипты (JS) ➝ Инструменты ➝ Редактор кода ➝ вкладка JavaScript• Разметка (HTML) ➝ Плагин «Кастомный HTML» внутри нужной секции / колонки• Серверные правила ➝ Корневой файл .htaccess на хостингеСовет разработчику:
При переносе стилей и скриптов в редактор кода Gridbox никогда не оборачивай их в теги <style> или <script> — система скомпилирует и закеширует их автоматически.