业务场景：编辑自动化脚本，开放自动编辑，需要采用一款编辑器，之前有在其他项目看到，发现这款适用于前端的编辑器真心不错，良心推荐！

这是官方地址 https://microsoft.github.io/monaco-editor/  可以体验下强大之处（基本包涵了大部分的idea和vscode的功能）

废话不多说，直接上手vue项目对接，步骤如下：

1安装 

npm install monaco-editor-vue       

npm install monaco-editor-webpack-plugin

注意查看版本editor-vue版本略高于plugin版本，官网issue下有关于版本对应信息

2在项目中引入

2.1在build文件中，类如webpack.conf.json文件中添加plugin插件

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

 在plugins添加支持的插件（基本支持下面大部分语言）

 

new MonacoWebpackPlugin({
      languages: ['abap', 'apex', 'azcli', 'bat', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dockerfile', 'fsharp', 'go', 'graphql', 'handlebars', 'html', 'ini', 'java', 'javascript', 'json', 'kotlin', 'less', 'lua', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sql', 'st', 'swift', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']
    })

3在需要的地方引入组件

components: {
  MonacoEditor
}

基础标签

<MonacoEditor
  v-model="shellForm.content" 
  :options="editorOptions"  --参数
  height="500"
  width="90%"
  theme="vs-dark"  --风格
  language="shell"  --语言
/>

在js的data中配置

editorOptions: {
  readOnly: false, --是否只读
  minimap: {
    enabled: true   --是否开启小地图
  },
  fontSize: 15    --字体大小
}

基础配置完了，查看效果（这是shell脚本）

基本满足业务需求！

补充：https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html#editoroptions   editoroptions参数相关

 https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditor.html  统一