最新版本的 Monaco Editor 已经使用了 ES2022 的语法,所以老项目可能会出现编译不过的问题。所以我把版本调低了一些。 在最初调试编辑器的时候出现了无法编辑的情况,后来发现是同事用到了default-passive-events这个库来关闭 chrome 的Added non-passive event listener to a scroll-blocking <some> event. Consider ...
在exclude参数中添加worker.js,然后在chunkFilter中去除提示Unexpected token: name «__insane_func», expected: punc «;»错误的文件。不对这些文件进行压缩就可以正常编译。 module.exports = { optimization: { minimizer: [ new UglifyJSPlugin({ //目的是为了编译环境清除控制台以及关闭注释 exclude: ...
1—— 模块引入monaco(非推荐模式,编译慢折磨人): npm install monaco-editor npm install monaco-editor-webpack-plugin --dev 1.1 —— 编辑vue.config.js: constMonacoWebpackPlugin=require('monaco-editor-webpack-plugin')module.exports={// 省略N多个设置,请勿直接复制使用,仅展示Monaco需要的以及基本结构...
setLocaleData(zh_CN); 接着重新编辑文件,你会发现编译控制台提示报错,在monaco-editor/esm/vs/editor/contrib下缺少goToDefinition文件夹。其实还缺少了一个referenceSearch。如何解决?首先说明一下,这两个文件夹其实并没有缺少,只是在monaco-editor@0.19.0版本以上,微软把这些文件统一放到了gotoSymbol这个文件夹,你可...
本文采用的是webpack编译,所以以下都是基于webpack来说明。 基本功能 首先,我们需要安装monaco npm install monaco-editor-S 然后在自己的文件中引入monaco,这里不需要全部引入,只需要引入自己需要使用的功能模块即可。 HTML JS import*asmonacofrom'monaco-
Monaco Editor 是一款开源的在线代码编辑器。它和大热的 VSCode 都是微软家的娃。跟微软混,省心,尽管.Net ……… 如同当年LiveScript傍大款Java,即使如今Monaco Editor没有蹭 VSCode 热度, 也随之走红了。 Monaco与VSCode 微软之前有个项目叫做Monaco Workbench,后来这个项目变成了VSCode,而Monaco Editor(下文简称monac...
npm应该会同时帮你再安装monaco-textmate、onigasm、monaco-editor这几个包,monaco-editor自不必说,我们自己都装了,其他两个可以自行检查一下,如果没有的话需要自行安装。 工具介绍 简单介绍一下这几个包。 onigasm 这个库就是用来解决上述浏览器不支持C语言编写的Oniguruma的问题,解决方法是把Oniguruma编译为WebAs...
语法检测,就需要编写对应的语法编译逻辑,这个不同语言不同的写法,一些也有现成的。这边主要介绍下怎么和编辑器交互,显示错误信息 错误信息hover显示需要插件 import 'monaco-editor/esm/vs/editor/contrib/hover/hover.js'; //清楚mark monaco.editor.setModelMarkers(model, 'eslint', []); ...
最新版本的 Monaco Editor 已经使用了 ES2022 的语法,所以老项目可能会出现编译不过的问题。所以我把版本调低了一些。 在最初调试编辑器的时候出现了无法编辑的情况,后来发现是同事用到了 default-passive-events 这个库来关闭 chrome 的 Added non-passive event listener to a scroll-blocking <some> event. Consi...
基于Monaco Editor 做了个 Vue 3 模版编译调试工具(主要是给自己用),包括了双向的 source mapping(选择源码,自动高亮对应的生成码)+ 模版语法错误提示: http://t.cn/AimHaOdy