推荐一款超好用的编辑器

现在很多平台上都有需要用到代码编辑器的地方，开源的编辑器也很多，比如被大家熟知的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>

一些主要的配置都已经在代码里面进行注释了哟，是不是好用又简单呢？

最后

最后大家赶紧在自己的项目中用起来吧，希望国产编辑器也能崛起，下次我们将会继续分享一些其他好玩的开源插件，赶紧关注起来吧！