当初很多平台上都有须要用到代码编辑器的中央，开源的编辑器也很多，比方被大家熟知的codemirror，就是一款大家用的比拟多的编辑器，然而明天咱们举荐的是另外一款超好用的代码编辑器，那就是微软开源的Monaco代码编辑器，目前在开源网站上曾经收割了29.6K的star。

明天咱们就尝试在本人的我的项目中引入这一款编辑器，以VUE为例。

成果预览

废话不多说，先上成果，这是官网的成果：

而后这是本人用下来的成果：

如果不思考其它因素，只是单纯用他来进行代码的编辑，基本上与间接应用vscode进行开发是截然不同的体验。

应用教程

  • 引入依赖文件

首先咱们须要把对应的依赖文件下载下来，能够从官网下载，当然还是举荐应用npm进行下载：

npm install monaco-editor@0.33.0
  • 初始化组件

而后咱们须要再对应的文件中进行初始化：

<template>   <div    ref="container"  ></div></template><script>import * as monaco from 'monaco-editor'import 'monaco-editor/esm/vs/editor/contrib/hover/hover'import { language as JavaLanguage } from 'monaco-editor/esm/vs/basic-languages/java/java.js'export default {  name: 'CodeEditor',  mounted() {    this.init()  },  data () {    return {      // 编辑器对象      monacoEditor: {},            // 编辑器配置选项            defaultOpts: {        value: this.content,        fontSize: 14,        globalName: "self",        acceptSuggestionOnCommitCharacter: true, // 承受对于提交字符的倡议        acceptSuggestionOnEnter: 'on', // 承受输出倡议 "on" | "off" | "smart"         accessibilityPageSize: 10, // 辅助性能页面大小 Number 阐明：管制编辑器中可由屏幕阅读器读出的行数。正告：这对大于默认值的数字具备性能含意。        accessibilitySupport: 'on', // 辅助性能反对 管制编辑器是否应在为屏幕阅读器优化的模式下运行。        autoClosingBrackets: 'always', // 是否主动增加完结括号(包含中括号) "always" | "languageDefined" | "beforeWhitespace" | "never"        autoClosingDelete: 'always', // 是否主动删除完结括号(包含中括号) "always" | "never" | "auto"        autoClosingOvertype: 'always', // 是否敞开改写 即应用insert模式时是笼罩前面的文字还是不笼罩前面的文字 "always" | "never" | "auto"        autoClosingQuotes: 'always', // 是否主动增加完结的单引号 双引号 "always" | "languageDefined" | "beforeWhitespace" | "never"        autoIndent: 'None', // 管制编辑器在用户键入、粘贴、挪动或缩进行时是否应主动调整缩进        automaticLayout: true, // 主动布局        codeLens: false, // 是否显示codeLens 通过 CodeLens，你能够在专一于工作的同时理解代码所产生的状况 – 而无需来到编辑器。 能够查找代码援用、代码更改、关联的 Bug、工作项、代码评审和单元测试。        codeLensFontFamily: '', // codeLens的字体款式        codeLensFontSize: 14, // codeLens的字体大小        colorDecorators: false, // 出现内联色调装璜器和色彩选择器        comments: {          ignoreEmptyLines: true, // 插入行正文时疏忽空行。默认为真。          insertSpace: true // 在行正文标记之后和块正文标记内插入一个空格。默认为真。        }, // 正文配置        contextmenu: true, // 启用上下文菜单        columnSelection: false, // 启用列编辑 按下shift键位而后按↑↓键位能够实现列抉择 而后实现列编辑        autoSurround: 'never', // 是否应主动盘绕抉择        copyWithSyntaxHighlighting: true, // 是否应将语法突出显示复制到剪贴板中 即 当你复制到word中是否放弃文字高亮色彩        cursorBlinking: 'Solid', // 光标动画款式        cursorSmoothCaretAnimation: true, // 是否启用光标平滑插入动画  当你在疾速输出文字的时候 光标是间接平滑的挪动还是间接"闪现"到以后文字所处地位        cursorStyle: 'UnderlineThin', // "Block"|"BlockOutline"|"Line"|"LineThin"|"Underline"|"UnderlineThin" 光标款式        cursorSurroundingLines: 0, // 光标盘绕行数 当文字输出超过屏幕时 能够看见右侧滚动条中光标所处地位是在滚动条两头还是顶部还是底部 即光标盘绕行数 盘绕行数越大 光标在滚动条中地位越居中        cursorSurroundingLinesStyle: 'all', // "default" | "all" 光标盘绕款式        cursorWidth: 2, // <=25 光标宽度        minimap: {          enabled: false // 是否启用预览图        }, // 预览图设置        folding: true, // 是否启用代码折叠        links: true, // 是否点击链接        overviewRulerBorder: false, // 是否应围绕概览标尺绘制边框        renderLineHighlight: 'gutter', // 以后行突出显示方式        roundedSelection: false, // 选区是否有圆角        scrollBeyondLastLine: false, // 设置编辑器是否能够滚动到最初一行之后        readOnly: this.opts.readOnly, // 是否为只读模式        theme: 'vs'// vs, hc-black, or vs-dark      },    }  },  methods: {    init () {            this.monacoEditor = monaco.editor.create(this.$refs.container, editorOptions)        }  }}</script>

一些次要的配置都曾经在代码外面进行正文了哟，是不是好用又简略呢？

最初

最初大家连忙在本人的我的项目中用起来吧，心愿国产编辑器也能崛起，下次咱们将会持续分享一些其余好玩的开源插件，连忙关注起来吧！