Редактор кода - это инструмент, с помощью которого можно писать код и выполнять различные операции. Можно написать код в любом приложении, поддерживающем простой текст, но редактор кода лучше всего подходит для этой работы. Существует множество редакторов кода. Эти редакторы можно настроить в соответствии с конкретной рабочей ситуацией, языком программирования и практиками. Но все они имеют одну общую черту - они используются для разработки кода.

Существует множество онлайн-редакторов кода для браузеров, где вы можете написать код и предварительно просмотреть его. Например, w3schools, tutorialspoint и так далее. Если мы говорим о браузере, код, который написали программисты, анализируется браузером и представляется посетителю как контент.

В этой статье мы собираемся создать приложение, в котором пользователь может написать программу HTML в редакторе кода браузера, а его содержимое будет показано на другой стороне.

Установка

Мы собираемся запустить наше приложение с помощью CRA. Приступим к созданию нашего приложения.

npx create-react-app my-awesome-app
cd my-awesome-app
yarn start

Вы можете открыть http: // localhost: 3000 /, чтобы увидеть свое приложение.

Теперь мы собираемся создать наш редактор. В магазине npm доступны различные библиотеки редактора. Мы собираемся использовать react-ace. React-ace - это библиотека, содержащая набор компонентов React для Ace. Если вы не слышали о редакторе Ace, это встроенный редактор кода, написанный на Javascript. Вы можете легко встроить его в любое веб-приложение или проект javascript.

yarn add react-ace

Теперь приступим к написанию кода. Мы будем создавать редактор, для которого будет поддерживаться фрагмент HTML, а также будет базовое автозаполнение для HTML.

Давайте разберемся по разделам:

Здесь, в этом разделе, мы импортируем фрагменты HTML, тему Monaki для редактора, который будет использоваться позже.

import “ace-builds/src-min-noconflict/ext-language_tools”;
import “ace-builds/src-noconflict/mode-html”;
import “ace-builds/src-noconflict/snippets/html”;
import “ace-builds/src-noconflict/theme-monokai”`;

В этой области мы создаем ссылку, в которой будем отображать скомпилированный вывод. Если в редакторе происходят какие-либо изменения, запускается onEditorChange get, и результат отображается справа.

............
this.myRef = React.createRef();
this.onEditorChange = this.onEditorChange.bind(this) 
}
onEditorChange(newValue) {   ReactDOM.findDOMNode(this.myRef.current).innerHTML = newValue 
}
.........

Таким образом, мы встроили редактор кода в наше приложение и также получили предварительный просмотр его результата.

Бонусы

Было бы неплохо, если бы мы могли отображать ошибки в нашем редакторе в режиме реального времени, чтобы мы могли их исправить. Для этого мы можем использовать линтер. Это инструмент для выявления ошибок, он анализирует ваш код на стилистические и программные ошибки в соответствии с известными ему правилами. Если часть вашего кода нарушает стандартные правила, это может создать проблему.

Давайте добавим линтер в наше приложение.

const ace = require('ace-builds/src-noconflict/ace');
ace.config.set("basePath", "https://cdn.jsdelivr.net/npm/[email protected]/src-noconflict/");
ace.config.setModuleUrl('ace/mode/javascript_worker', "https://cdn.jsdelivr.net/npm/[email protected]/src-noconflict/worker-javascript.js");

Теперь, если есть ошибка, он покажет вам часть хорошей описательной информации об ошибке.

Подведем итог нашему коду:

Вывод

Таким образом, мы можем встроить редактор react-ace в наше приложение и предварительно просмотреть результат. Здесь мы учимся настраивать редактор, учимся включать различные функции, такие как сниппеты, базовое автозаполнение, а также учимся добавлять линтер для анализа, соответствует ли код стандартам или нет.

Есть много функций, которые здесь не описаны. Если вы хотите узнать больше об ace, читайте здесь.

Исходный код: https://github.com/sumn2u/realtime-html-server

Предварительный просмотр: https://sumn2u.github.io/realtime-html-server/