说说VSCode使用的代码编辑器

3。在js文件中引入monaco编辑器，创建编辑器：import*asmonacofrom'monaco-editor/esm/vs/editor/editor.api.js'monaco.editor.create(document.getElementById('container'),{value:['functionx(){','\tconsole.log("Helloworld!");','}'].join('\n'),})打开在浏览器中，我们可以看到编辑器已经成功显示：Effect一般配置我们可以在create的第二个参数里传一个option参数。参数说明type默认值optionalvaluevalue编辑器字符串的初始值--主题编辑器的主题样式，除了提供的可选值外，还可以通过monaco.editor自定义主题字符串'vs''vs'。defineTheme,'vs-dark','hc-black'language编辑器的初始语言，例如可以设置为javascript,json等string--model和编辑器关联的初始模型ITextModel--lineNumbers控制渲染行数，如果是function，则返回的内容作为行数显示string/Function'on''on','off','relative','interval','(lineNumber:number)=>string'readOnly控制编辑器是否只读取booleanfalse-autoClosingBrackets自动关闭括号string'languageDefined''always'/'languageDefined'/'beforeWhitespace'/'never'autoClosingOvertype自动关闭括号orquotesstring-'always'/'auto'/'never'autoClosingQuotes自动关闭引号字符串'languageDefined''always'/'languageDefined'/'beforeWhitespace'/'never'autoIndent自动缩进字符串'advanced''none'/'keep'/'brackets'/'advanced'/'full'在webpack中使用JS代码：import*asmonacofrom'monaco-editor'self.MonacoEnvironment={getWorkerUrl:function(moduleId,label){if(label==='json'){return'./json.worker.bundle.js'}if(标签==='css'||标签==='scss'||标签==='less'){return'./css.worker.bundle.js'}if(label==='html'||label==='handlebars'||label==='razor'){return'./html.worker.bundle.js'}if(label==='typescript'||label==='javascript'){return'./ts.worker.bundle.js'}return'./editor.worker.bundle.js'},}monaco.editor.create(document.getElementById('container'),{value:['functionx(){','\tconsole.log("Helloworld!");','}'].join('\n'),language:'javascript',})然后需要在webpack入口添加配置：module.exports={mode:'development',entry:{app:'./index.js','editor.worker':'monaco-editor/esm/vs/editor/editor.worker.js','json.worker':'monaco-editor/esm/vs/language/json/json.worker','css.worker':'monaco-editor/esm/vs/language/css/css.worker','html.worker':'monaco-editor/esm/vs/language/html/html.worker','ts.worker':'monaco-editor/esm/vs/language/typescript/ts.worker',},output:{globalObject:'self',filename:'[name].bundle.js',path:path.resolve(__dirname,'dist'),},module:{规则:[{test:/\.css$/,使用:['style-loader','css-loader'],},{test:/\.ttf$/,use:['file-loader'],},],},}以上加载方式为ESM加载方式，默认,摩纳哥编辑器自带的所有语言都将包括在内。如果觉得这个配置麻烦，可以使用monaco-editor-webpack-plugin，通过只选择特定的语言或者只选择特定的编辑器功能，可以用来生成一个更小的编辑器包修改webpack.config.js来包含只是语言中支持语言的一个子集。constMonacoWebpackPlugin=require('monaco-editor-webpack-plugin')constpath=require('path')module.exports={入口：'./index.js'，输出：{路径：path.resolve(__dirname,'dist'),文件名:'app.js',},模块:{规则:[{test:/\.css$/,使用:['style-loader','css-loader'],},{测试：/\.ttf$/，使用：['file-loader'],},],}，插件：[newMonacoWebpackPlugin({languages:['typescript','html','css'],}),],}获取值editor.getValue()获取编辑器中的所有文本，并生成一个字符串返回，所有信息（换行、缩进、注释等）都会被保留。editor.getSelection()获取编辑器选中文本的范围，返回一个对象如下：{"startLineNumber":0,"startColumnNumber":0,"endLineNumber":0,"endColumnNumber":0}自定义语言monaco编辑器还可以支持自定义语言。以下代码演示了一个日志编辑器：//注册语言monaco.languages.register({id:'mySpecialLanguage'})//通过常规注册解析规则monaco.languages.setMonarchTokensProvider('mySpecialLanguage',{tokenizer:{root:[[/\[error.*/,'custom-error'],[/\[notice.*/,'custom-notice'],[/\[info.*/,'custom-info'],[/\[[a-zA-Z0-9:]+\]/,'custom-date'],],},})//仅为新主题monaco.editor定义符合此语言规则的那些。defineTheme('myCoolTheme',{base:'vs',inherit:false,rules:[{token:'custom-info',foreground:'808080'},{token:'custom-error',foreground:'ff0000',fontStyle:'bold'},{token:'custom-notice',foreground:'FFA500'},{token:'custom-date',foreground:'008800'},],颜色:{'editor.foreground':'#000000',},})//注册新语言的代码提示monaco.languages.registerCompletionItemProvider('mySpecialLanguage',{provideCompletionItems:()=>{varsuggestions=[{label:'simpleText',kind:monaco.languages.CompletionItemKind.Text,insertText:'simpleText',},{label:'testing',种类：monaco.languages.CompletionItemKind.Keyword，insertText：'testing(${1:condition})'，insertTextRules：monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet，}，{label：'ifelse'，种类：monaco.languages.CompletionItemKind.Snippet,insertText:['if(${1:condition}){','\t$0','}else{','\t','}'].join('\n'),insertTextRules:monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,documentation:'If-ElseStatement',},]return{suggestions:suggestions}},})monaco.editor.create(document.getElementById('container'),{主题:'myCoolTheme',value:getCode(),language:'mySpecialLanguage',})效果：通过这个例子，我我们可以在网页上友好的查看在线日志，在react中使用目前社区已经对@monaco-editor/react进行了封装，不需要使用webpack（或rollup/parcel/etc）配置文件/插件。importReactfrom'react'importEditorfrom'@monaco-editor/react'functionApp(){return}exportdefault应用详情请参考存储库npm[1]。使用tailwindcss的在线运行网站是https://play.tai??lwindcss.com/，使用monaco-editor，有智能语法提示，代码开源。总结本文简单介绍monaco-editor。当然，还有很多高级功能等着我们去探索和挖掘。文章中的列表并不全面。深入探索请参考官网[2]和Github[3]，希望以后开发者可以快速上手类似的代码编辑器实现。参考文献[1]npm：https://www.npmjs.com/package/@monaco-editor/react[2]官网：https://microsoft.github.io/monaco-editor/[3]Github：https://github.com/microsoft/monaco-editor