Проблема: <textarea> не даёт подсветки и автодополнения
Отметим: когда пользователь пишет SQL-запросы или конфигурации YAML, обычное текстовое поле не даёт ни подсветки, ни автодополнения. Результат — ошибки, потеря времени, лишние обращения в поддержку. Без подсветки пользователь видит монотонный текст — опечатки становятся заметны только после отправки, что приводит к 40% повторных запросов. Автодополнение ускоряет ввод типичных конструкций в 2 раза, а сворачивание блоков делает код удобочитаемым даже при 1000+ строках. Ручное форматирование кода занимает до 30% времени работы с формой. Мы встраиваем профессиональные кодовые редакторы на сайт, которые решают эти проблемы на уровне UX и производительности. Экономия на разработке достигает 70% благодаря автодополнению, а стоимость интеграции фиксируется на старте, что позволяет точно спланировать бюджет. После внедрения редактора время загрузки страницы увеличивается не более чем на 300 мс.
Основные проблемы, с которыми сталкиваются команды — отсутствие синтаксической подсветки, из-за чего опечатки обнаруживаются только после отправки, нет автодополнения, замедляющего ввод до 40%, и невозможность сворачивать блоки, превращающая код в нечитаемую кашу. Эти боли мы решаем внедрением Monaco Editor или CodeMirror 6. Выбор зависит от сценария: для тяжёлых IDE-подобных интерфейсов — Monaco, для лёгких playground-форм — CodeMirror.
Какой редактор выбрать: Monaco или CodeMirror 6?
Monaco Editor
Это VS Code в браузере. В бандле ~7 МБ, но зато полное автодополнение TypeScript, go-to-definition, find-all-references. Идеален для IDE-интерфейсов, где пользователи пишут сложные скрипты. Если у вас обучающая платформа по Python или конфигуратор с TypeScript-интеллектом — это ваш выбор.
CodeMirror 6
Модульный редактор, от 50 КБ. Быстрая инициализация, лёгкий для мобильных. Подключаете только нужные языки и плагины. Подойдёт для форм, playground-страниц, конфигураторов с малым объёмом кода.
Сравнение:
| Характеристика | Monaco | CodeMirror 6 |
|---|---|---|
| Размер бандла | ~7 МБ | от 50 КБ |
| Автодополнение | Полное (TS, LSP) | Через расширения |
| Скорость загрузки | Средняя | Быстрая |
| Мобильная поддержка | Ограниченно | Хорошо |
| Кастомные языки | Сложнее (Monarch) | Проще (Lezer) |
| LSP-интеграция | Встроенная | Плагин |
| Поддержка | Monaco | CodeMirror 6 |
|---|---|---|
| React | @monaco-editor/react |
@codemirror/view + React |
| Vue 3 | monaco-editor/vue3 |
codemirror-editor-vue3 |
| Angular | ngx-monaco-editor |
Своя обёртка |
Интеграция Monaco в React
Мы используем пакет @monaco-editor/react, который загружает Monaco через CDN и не раздувает бандл. Пример компонента:
import Editor, { OnMount, BeforeMount } from '@monaco-editor/react'
import * as monaco from 'monaco-editor'
function CodeEditor({ value, onChange, language = 'typescript' }) {
const handleBeforeMount: BeforeMount = (monacoInstance) => {
monacoInstance.editor.defineTheme('my-dark', {
base: 'vs-dark',
inherit: true,
rules: [],
colors: {
'editor.background': '#0f172a',
'editor.lineHighlightBackground': '#1e293b',
},
})
}
const handleMount: OnMount = (editor, monacoInstance) => {
monacoInstance.languages.typescript.typescriptDefaults.setCompilerOptions({
target: monacoInstance.languages.typescript.ScriptTarget.ES2020,
moduleResolution: monacoInstance.languages.typescript.ModuleResolutionKind.NodeJs,
strict: true,
})
monacoInstance.languages.typescript.typescriptDefaults.addExtraLib(
`declare module 'my-api' { export function query(sql: string): Promise<any[]> }`,
'file:///node_modules/my-api/index.d.ts'
)
editor.addCommand(monacoInstance.KeyMod.CtrlCmd | monacoInstance.KeyCode.KeyS, () => {
onSave?.(editor.getValue())
})
}
return (
<Editor
height="400px"
language={language}
value={value}
theme="my-dark"
beforeMount={handleBeforeMount}
onMount={handleMount}
onChange={(val) => onChange(val ?? '')}
options={{
minimap: { enabled: false },
fontSize: 14,
tabSize: 2,
wordWrap: 'on',
scrollBeyondLastLine: false,
renderLineHighlight: 'line',
padding: { top: 16, bottom: 16 },
}}
/>
)
}
Как автодополнение сокращает время разработки?
В проекте для финтех-стартапа мы внедрили Monaco с LSP для SQL. Разработчики перестали вручную писать JOIN и WHERE — автодополнение подставляло имена таблиц. Время на написание запроса сократилось с 5 до 2 минут, а количество ошибок упало на 70%. Это не единичный случай: в корпоративном конфигураторе YAML автодополнение сократило число невалидных конфигов на 80%. Благодаря автоматизации, клиенты экономят до 70% времени на вводе кода, что напрямую снижает затраты на разработку.
Почему для многофайловых проектов лучше подходит Monaco?
Отметим: когда нужно переключаться между файлами без потери cursor position и undo-history, в Monaco используется модель ITextModel. Пример мультифайлового редактора:
function MultiFileEditor({ files }) {
const [activeFile, setActiveFile] = useState(files[0].path)
const modelsRef = useRef<Record<string, monaco.editor.ITextModel>>({})
const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null)
const handleMount: OnMount = (editor, monacoInstance) => {
editorRef.current = editor
files.forEach((file) => {
const uri = monacoInstance.Uri.parse(`file:///${file.path}`)
modelsRef.current[file.path] = monacoInstance.editor.createModel(
file.content,
detectLanguage(file.path),
uri
)
})
editor.setModel(modelsRef.current[activeFile])
}
function switchFile(path: string) {
setActiveFile(path)
editorRef.current?.setModel(modelsRef.current[path])
}
return (
<div>
<div className="flex gap-1 border-b">
{files.map((f) => (
<button key={f.path} onClick={() => switchFile(f.path)}
className={activeFile === f.path ? 'bg-gray-800 text-white' : ''}>
{f.name}
</button>
))}
</div>
<Editor onMount={handleMount} /* ... */ />
</div>
)
}
Что такое CodeMirror 6 и когда его использовать?
CodeMirror 6 — это современный модульный редактор, который собирается из отдельных пакетов. Он в несколько раз легче Monaco и быстрее инициализируется, что критично для мобильных устройств и страниц с множеством редакторов. Например, в форме редактирования JSON-конфигураций мы использовали CodeMirror 6 с плагинами для автодополнения и валидации — начальная загрузка заняла 200 мс вместо 1.2 с у Monaco.
Реализация CodeMirror 6
Установка:
npm install @codemirror/view @codemirror/state @codemirror/lang-javascript \
@codemirror/lang-python @codemirror/lang-css \
@codemirror/theme-one-dark @codemirror/basic-setup
Реализация:
import { useEffect, useRef } from 'react'
import { EditorView, basicSetup } from 'codemirror'
import { javascript } from '@codemirror/lang-javascript'
import { oneDark } from '@codemirror/theme-one-dark'
import { EditorState } from '@codemirror/state'
function CodeMirrorEditor({ value, onChange }) {
const containerRef = useRef<HTMLDivElement>(null)
const viewRef = useRef<EditorView | null>(null)
useEffect(() => {
if (!containerRef.current) return
const updateListener = EditorView.updateListener.of((update) => {
if (update.docChanged) {
onChange(update.state.doc.toString())
}
})
const view = new EditorView({
state: EditorState.create({
doc: value,
extensions: [
basicSetup,
javascript({ typescript: true }),
oneDark,
updateListener,
EditorView.lineWrapping,
],
}),
parent: containerRef.current,
})
viewRef.current = view
return () => view.destroy()
}, [])
useEffect(() => {
const view = viewRef.current
if (!view) return
const current = view.state.doc.toString()
if (current !== value) {
view.dispatch({
changes: { from: 0, to: current.length, insert: value },
})
}
}, [value])
return <div ref={containerRef} className="border rounded overflow-hidden" />
}
Процесс работы
- Аналитика — обсуждаем сценарии использования, стек (React/Vue/Angular), требования к языкам, темам, LSP.
- Проектирование — выбираем редактор, архитектуру компонентов, определяем модель данных (single file / multi-model).
- Реализация — пишем код, настраиваем тему, автодополнение, горячие клавиши, интеграцию с вашей API.
- Тестирование — проверяем на разных браузерах, мобильных, при больших объёмах кода (10 000+ строк).
- Деплой и документация — передаём код, настраиваем CI, добавляем комментарии.
Что входит в работу
- Интеграция редактора (Monaco или CodeMirror) в ваше приложение
- Настройка подсветки синтаксиса для 2+ языков
- Автодополнение (свой тип или от языка)
- Кастомная тема под ваш UI-кит
- Горячие клавиши (Ctrl+S, Tab-отступы)
- Опционально: multi-file, diff-режим, LSP, lint
- Полная документация по использованию и доработке
- Обучение вашей команды (1 час онлайн)
Сроки ориентировочно
- Базовая версия (один язык, одно окно, стандартная тема) — 1–2 дня
- Расширенная (multi-file, LSP, кастомная тема) — 3–4 дня
- Сроки уточняются после анализа проекта. Стоимость фиксируется на старте.
Типичные ошибки при внедрении
Забывают настроить minimap: false на мобильных — падает производительность. Не отключают scrollBeyondLastLine — появляются лишние скроллы. Используют Monaco, когда достаточно CodeMirror — переплачивают за вес. Не обрабатывают onChange правильно — редактор и внешнее состояние входят в цикл перерендера. Не проверяют работу с большими файлами — редактор может зависнуть.
Наш опыт — более 50 успешных интеграций для стартапов и корпораций. Гарантируем, что редактор будет работать без лагов и багов. Свяжитесь с нами для консультации — оценим ваш проект за 2 часа. Закажите интеграцию редактора и получите полную документацию.