Monaco Editor结合Vue搭建好用的json格式化网站

已于 2023-03-01 23:08:09 修改
阅读量2.6k 收藏 7
点赞数 2
分类专栏： 前端 文章标签： vue.js json javascript monaco editor
于 2023-03-01 23:07:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fadedsun/article/details/129291804
版权

Monaco Editor

github地址

安装

> npm install monaco-editor

然后导入monaco

import * as monaco from "monaco-editor/esm/vs/editor/edcore.main"; // 引入monaco-editor

Html定义

<div id="monaco-editor" ref=&#
最低0.47元/天 解锁文章
monaco-editor 编辑器格式化json,sql
qq_42704945的博客
01-17 1万+
monaco-editor 微软的开源项目有点坑，纯英文的文档对很多刚开始前端的小朋友很不友好，刚好这段时间公司的项目遇到了文本编辑，发现这个居然是微软的vscode网页版，巧了，刚好开发工具正是vscode，秉着用了这么久我还不熟悉你这玩意的心态，就开始看着官方文档琢磨了，没想到这玩意是真的坑，文档不全的厉害，很多修改难弄的很。一路写下来真的是头疼的厉害 第一步：肯定是初始化这个插件 npm install monaco-editor -s import * as monaco from 'mona
Vue3/2使用monaco-editor,使用组合按键ctrl+d键，json文档格式化
gh313287387的博客
05-16 747
【代码】Vue3/2使用monaco-editor,使用组合按键ctrl+d键，json文档格式化。
Monaco Editor系列（十三）给静态文本添加高亮
最新发布
weixin_45855469的博客
03-09 623
前言：在一些富文本编辑器中，我们可能会想插入一段代码，但是只用于展示用途，只需要给代码高亮就可以，这个时候就不需要创建一个新的 Monaco Editor 实例，Monaco提供的有让静态文本按照特定语言高亮的API。
monaco-json:摩纳哥编辑器的JSON语言支持
05-06
摩纳哥JSON 摩纳哥编辑器的JSON语言插件。 编辑JSON文件时，它提供以下功能： 基于JSON模式或通过查看同一文件中的相似对象的代码完成 悬停，基于JSON模式 验证：语法错误和架构验证 格式设定 文件符号 语法高亮 匹配包含以下format: "color-hex"'的模式的所有属性的颜色修饰符format: "color-hex"' （非标准模式扩展名） 架构可以通过配置来提供。 请参阅以获取JSON插件提供的用于配置JSON语言支持的API。 JSON插件在内部使用节点模块，提供上述功能的实现。 也使用同一模块来增强JSON编辑体验。 问题 请在有关monaco-json问题。 正在安装 此npm模块捆绑并分发在npm模块中。 发展 git clone https://github.com/Microsoft/monaco-json npm install . 用
MonacoEditor 自动格式化sql json数据
听见涛声
10-21 7946
monaco-editor自动格式化 美化SQL json
Vue2的SQL编辑器 - monaco的基本使用
我码玄黄的博客
11-11 1680
本文在vue中实现了一个基本的SQL编辑器，包括语法高亮，关键字补全，表名，字段名补全等功能。
JSONEditor格式化
08-26
JSON Editor 格式化,需要使用Chrome浏览器
json格式化的网站
MARKPAIN的专栏
01-10 650
http://www.bejson.com/ 很强大的一个网站。 end
Json格式化网站
熊與貓v
06-28 1284
在浏览器中输入json，即可得到众多的json格式化网站 其中，推荐Be json格式化工具，该网站不仅支持Json的各种操作，还可以将json数据生成对应的JavaBean对象，数据的加解密等操作
一个json格式化的网站
geforce
08-25 969
http://jsonformatter.curiousconcept.com/#jsonformatter http://jsonviewer.stack.hu/
json 格式化的网站
蛤蟆仙人
06-25 150
http://www.bejson.com/go.html?u=http://www.bejson.com/index.php   http://jsonformat.com/
一个Json在线格式化的网站
weixin_30505043的博客
03-31 95
一个Json在线格式化的网站 网址： http://jsonformatter.curiousconcept.com/ 便于我们调试JSON非常的方便 posted on 2011-03-31 18:31 搏击的小船 阅读(...) 评论(.....
json 格式化工具/网站
亲测，只为展现最完美的有效！
10-18 1779
一、在线工具： 优点，快速，识别错误，标识错误位置 缺点：对于编辑不友好，没有快捷键可用 https://www.jsondecode.cc/ http://www.vmfor.com/json.html# 二、离线工具 1、HIjson 优点：功能丰富，错误提示友好 缺点：格式化会自动排序节点，并且不能取消；json编辑快捷键不够多 2、postman postMan是个请求测试工具，功能很强大，里面的json格式化很好用 优点：错误提示，格式化，json编辑快捷键 使用.
＜MonacoEditor＞ 自动换行格式化
chenyajundd的博客
08-23 1065
解决 MonacoEditor 库，出事进入时代码不换号问题，增加下面的配置，就可以了！
好用的json格式化网址
都是狠人的博客
05-27 2026
http://www.bejson.com/ https://www.json.cn/ 或者chrome的jsonview小工具
JSON在线解析及格式化验证 - JSON.cn网站
小丁的博客
05-13 625
JSON在线解析及格式化验证 - JSON.cn。https://www.json.cn/
JSON在线编辑网站
qq_44305130的博客
02-14 1412
调试API响应。
介绍几个json在线格式化网站
野猿新一
05-18 3500
http://www.bejson.com/jsonviewernew/ https://www.json.cn/ http://tool.chinaz.com/tools/jsonformat.aspx
react-monaco-editor格式化
qq_37233023的博客
01-04 7242
react-monaco-editor引入 import Monaca from 'react-monaco-editor'; 2、配置 const editorDidMountHandle = (editor: any, monaco: any) => { editor.getAction('editor.action.formatDocument').run() //格式化 } <Monaca height={monacaHeight} .
vue3 monaco-editor 类型是python 怎么手动格式化
09-25
在 Vue3 中，Monaco Editor 是一个用于富文本编辑的强大组件，它允许你在前端显示和操作多种语言的代码。如果你想让 Monaco Editor 在处理 Python 代码时自动格式化，通常你可以通过以下几个步骤实现： 1. **安装插件**：首先需要安装 Monaco 的 Python 语言支持插件，以及格式化引擎（如 Prettier 或 yapf）。可以使用 npm 或 yarn 进行安装： ``` npm install @monaco-editor/language-modes @monaco-editor/plugin-python prettier ``` 或者： ``` yarn add @monaco-editor/language-modes @monaco-editor/plugin-python prettier ``` 2. **配置插件**：在 Vue 组件中，你需要加载 Python 语言模式并启用格式化功能： ```js import { createMonacoEditor } from '@monaco-editor/vue'; import pythonLanguageMode from '@monaco-editor/language-modes/python'; import prettierFormatter from 'prettier/formatter.js'; // 创建 Monaco 编辑器实例时添加语言支持和格式化 const createMonacoWithFormat = (value) => { const editor = await createMonacoEditor({ value, languages: [pythonLanguageMode.id], options: { formatOnPaste: true, // 开启粘贴自动格式化 formatter: prettierFormatter, // 使用 Prettier 设置格式化规则 }, }); return editor; }; ``` 3. **使用编辑器**：在 Vue 实例中创建编辑器，并传递初始值给 `createMonacoWithFormat` 函数： ```html <template> <div ref="monacoEditor" /> </template> <script> export default { setup() { const editorRef = ref(null); onMounted(async () => { const editorValue = await getInitialPythonCode(); // 获取初始 Python 代码 const formattedEditor = createMonacoWithFormat(editorValue); editorRef.value = formattedEditor; }); function getInitialPythonCode() { // ...从后端获取或者本地存储的 Python 代码 return 'your_initial_python_code'; } }, }; </script> ``` 4. **更新格式**：如果需要在运行时手动格式化，可以在适当的时候调用 `editor.executeCommand('editor.action.formatDocument')`。 注意，Prettier 的设置可能会根据项目的 `.prettierrc` 文件进行，确保这部分设置正确并且适应你的 Python 项目风格。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值