Skip to content

lizuncong/monaco-editor-app

Repository files navigation

Monaco Editor App

本仓库用于演示Monoca Editor的用法。本项目已部署在 github page,可以通过https://lizuncong.github.io/monaco-editor-app/访问

运行

  • node 版本:14.18.1,npm 版本:6.14.15。如果发现安装的依赖不对,可以对齐下 node 和 npm 版本
  • 运行项目:
    • npm install
    • npm run start

简介

monaco editor 是 vscode 官方提供的一款在线代码编辑器插件,功能强大,但是 API 文档真心难看。因此我特开一个项目专门用于演示 monaco editor 的用法。虽然本项目基于 React 开发,但不影响在其他框架中使用,因为这里我也没有做二次封装,都是直接调用 monaco editor 的 API。

欢迎有兴趣的朋友给本项目提交 demo

目前实现的部分功能如下所示

初始化实例以及切换语言

image

代码格式化

通过 ctrl + s 快捷键组合可以格式化代码

image

重新布局

image

监听代码编辑

image

右键定制面板

image

主题颜色定制

image

HTML 标签回车自动闭合

image

HTML 标签未闭合检测

如果忘记闭合 html 标签,则会一直波浪号提示

image

hover 波浪号有提示

image

issues 集锦

About

基于monaco editor的在线代码编辑器,具备代码补全、标签自动闭合、主题定制等功能

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published