Monaco Editor教程（二二）：monaco编辑器完整配置翻译及重点配置解析

前言

本篇文章讲解一下创建Monaco编辑器时所有完整配置，算是一个比较浅显的入门文章。
但由于一个Monaco的配置项多达150个，整篇文章耗费了我5天的下班时间，请读者自行点赞收藏。这里结合实际的项目业务场景介绍一些常用的，有可能修改的默认配置参数。Monaco已经默认了很多配置参数的值，而这些默认值应该适合大多数场景。

配置概览

目前最新的monaco版本是0.34.1。创建编辑器的参数类型为IStandaloneEditorConstructionOptions。
访问地址为。注意要选中左上角的Inherited与Externals。这样就可以看到所有的参数。
目前有150个，只比0.34.0版本多了2个。（文末有所有的参数及简单的中文解释）

不说别的，150个配置项，一个一个看过去，都要一天。更何况，有些配置项还是二维对象。像之前介绍的minimap。整体而言，文章的属性讲解内容可能没有明显的顺序可言。甚至有些零碎片面化，请耐心地读下去。

另外有些属性，官方的解释也很粗浅，更没有配备对应的示例，解释的不对，欢迎热心的读者在评论区纠正。对于重要，常用配置项，会配置一个简单示例。

常用配置

automaticLayout
autoClosingDelete
autoClosingBrackets
autoClosingOvertype
autoClosingQuotes
autoIndent

bracketPairColorization
codeActionsOnSaveTimeout
codeLens
columnSelection
comments
contextmenu
copyWithSyntaxHighlighting
cursorBlinking

definitionLinkOpensInPeek
detectIndentation
dimension
dragAndDrop
dropIntoEditor

extraEditorClassName
find
folding
foldingImportsByDefault
fontFamily
fontSize
fontWeight
formatOnPaste
formatOnType

glyphMargin
gotoLocation
guides
inlayHints
insertSpaces
language
lineHeight
lineNumbers
links
linkedEditing

matchBrackets
matchOnWordStartOnly
model
mouseWheelZoom
padding
quickSuggestions
readOnly
linkedEditing
renderWhitespace
rulers

scrollbar
showUnused
showFoldingControls
smartSelect
suggest

tabSize
theme
trimAutoWhitespace
value

wordBasedSuggestionsOnlySameLanguage
wordSeparators
wordWrap
wordWrapColumn

涉及到的API

获取配置 getOption getOptions(): IComputedEditorOptions
获取编辑器的配置有二个方法，
getOption()与getOptions()
getOption()需要传入一个id作为参数，此id是一个枚举值，monaco对每一个配置参数设置了一个枚举值，
所有的配置参数，所对应的枚举值在此处可以查询得到。https://microsoft.github.io/monaco-editor/api/enums/monaco.editor.EditorOption.html

另外就是getOptions()，它返回的是所有的配置参数，是一个数组，但看这个数组你是很难找到想要找的配置参数的。

更新配置 updateOptions

updateOptions(newOptions: IEditorOptions & IGlobalEditorOptions): void
直接传入新的配置参数即可更新。调用了该方法后，会触发下面的变更配置的事件。

更新配置触发的事件 onDidChangeConfiguration

与之对应的，语言模型Model也有对应的一系列方法。
model配置改变后触发的事件
onDidChangeOptions

更新model配置的方法
updateOptions

获取model的配置
getOptions

完整的配置参数

acceptSuggestionOnCommitCharacter?: boolean
是否开启使用一个字符来完成自动补全

acceptSuggestionOnEnter?: “on” | “off” | “smart”
是否开启使用Enter键来完成自动补全

accessibilityHelpUrl?: string
在编辑器的辅助功能帮助对话框中按下Ctrl+H（Windows和Linux）或Cmd+H（OSX）时打开的URL。（没体验）

accessibilityPageSize?: number
控制编辑器中在由屏幕阅读器读取的行数。（屏幕阅读器下使用）

accessibilitySupport?: “on” | “off” | “auto”
配置编辑器的辅助功能支持。默认为“auto”。最好将此设置为“自动”。（屏幕阅读器下使用）

ariaContainerElement?: HTMLElement
用于ARIA消息的容器元素。默认为document.body。（暂时不知用处）

ariaLabel?: string
编辑器文本区域的aria标签（聚焦时）。

autoClosingBrackets?: EditorAutoClosingStrategy
自动输入一对括号的策略，默认由编程语言决定
可选值 “always” | “languageDefined” | “beforeWhitespace” | “never”

autoClosingDelete?: EditorAutoClosingEditStrategy
自动删除一对括号或引号的策略，默认由编程语言决定
可选值 “always” | “languageDefined” | “beforeWhitespace” | “never”

autoClosingOvertype?: EditorAutoClosingEditStrategy
当输入括号或引号时，是否成对输入，或其他策略

autoClosingQuotes?: EditorAutoClosingStrategy
是否自动关闭引号

autoDetectHighContrast?: boolean
如果启用，则在操作系统使用高对比度主题时，将自动更改为高对比度。默认为true。

autoIndent?: “none” | “advanced” | “full” | “brackets” | “keep”
控制当用户键入、粘贴、移动或缩进行时，编辑器是否应自动调整缩进。默认为高级。

autoSurround?: EditorAutoSurroundStrategy
自动环绕的选项。默认设置为始终允许自动环绕。当选中一个单词后，输入引号或括号是发将单词自动包裹其内。

automaticLayout?: boolean
启用时，编辑器器大小跟随容器dom大小而改变。默认为false。

bracketPairColorization?: IBracketPairColorizationOptions
配置括号对着色（默认情况下禁用）。

codeActionsOnSaveTimeout?: number
在保存代码后，多少毫秒执行codeActions。之前的文章有讲解什么是CodeActions，可以看这篇文章。

codeLens?: boolean
是否显示CodeLens，什么是CodeLens，有什么用，可以看这篇文章。

codeLensFontFamily?: string
codeLens的字体，默认编辑器的字体

codeLensFontSize?: number
codeLens的字体大小，默认编辑器的90% font size。

colorDecorators?: boolean
启用内联颜色装饰器和颜色选择器渲染。（没有出现颜色选择器，可能只在vscode中有用）

columnSelection?: boolean
是否开始列选择，默认false，开启后可以纵向选择文本。

comments?: IEditorCommentsOptions
控制编辑器中comments的行为。（不太明白comments具体指的是什么）

contextmenu?: boolean
是否允许自定义右键菜单

copyWithSyntaxHighlighting?: boolean
复制的内容是否语法高亮

cursorBlinking?: “blink” | “smooth” | “phase” | “expand” | “solid”
控制光标的动画样式，枚举值有"blink" | “smooth” | “phase” | “expand” | “solid”，默认blink。

cursorSmoothCaretAnimation?: boolean
启用平滑插入符号动画。默认为false。

cursorStyle?: “line” | “block” | “underline” | “line-thin” | “block-outline” | “underline-thin”
控制光标的样式，默认line。

cursorSurroundingLines?: number
控制光标周围可见的前导线和尾随线的最小数量。默认值为0。光标距离编辑器底部的行数，
需要配合cursorSurroundingLinesStyle: 'all' 使用。当设置比较大时，会自动滚动出下面的内容。

cursorSurroundingLinesStyle?: “default” | “all”
控制何时应强制执行光标SurroundingLines，默认情况下，当鼠标更改光标位置时，不强制执行光标surroundingLine。

cursorWidth?: number
控制光标的宽度，只有当cursorStyle: 'line'时生效

definitionLinkOpensInPeek?: boolean
控制定义链接是否可以在peek小部件中打开元素。默认为false。

detectIndentation?: boolean
控制在基于文件内容打开文件时是否自动检测tabSize和insertSpaces。默认为true。

dimension?: IDimension
编辑器的初始化尺寸，避免重新绘制

disableLayerHinting?: boolean
是否使用transform: translate3d(0px, 0px, 0px)禁用编辑器的margin与线条层.
使用transform: translate3d(0px, 0px, 0px)将作为浏览器创建一个额外的图层，默认为false。

disableMonospaceOptimizations?: boolean
是否禁用等宽字体的优化，默认false。

domReadOnly?: boolean
用于输入的文本区域是否应使用DOM readonly 属性。默认为false。

dragAndDrop?: boolean
控制编辑器是否可以拖放来移动 选中的文本。默认为false。

dropIntoEditor?: IDropIntoEditorOptions
控制拖放到编辑器中的一个额外资源行为，
如果开启，将显示放置位置的预览并触发onDropIntoEditor事件。

emptySelectionClipboard?: boolean
没有选中时进行复制，是否复制当前行。

extraEditorClassName?: string
追加到编辑器的class名

fastScrollSensitivity?: number
按Alt时快速滚动倍增器速度，默认值为5。

find?: IEditorFindOptions
控制查找组件的默认行为或表现，可以控制查找的是否正则，是否整词

fixedOverflowWidgets?: boolean
是否将超出编辑的组件 设置为fixed，默认false

folding?: boolean
是否能够代码折叠，默认true。

foldingHighlight?: boolean
是否为折叠区域启用高光。默认为true。

foldingImportsByDefault?: boolean
是否自动折叠import区域，（就是引入的外部依赖包） 默认为true。

foldingMaximumRegions?: number
最大的折叠区域， 默认5000，（这个应该是行数）

foldingStrategy?: “auto” | “indentation”
折叠的策略，“auto”使用为当前文档提供的策略，“indentation”使用基于缩进的折叠策略。默认为“auto”。

fontFamily?: string
字体

fontLigatures?: string | boolean
是否启用连体字，默认false。

fontSize?: number
字体大小

fontWeight?: string
字体加粗

formatOnPaste?: boolean
是否在复制后格式化，默认false。

formatOnType?: boolean
是否在输入时格式化，默认false。

glyphMargin?: boolean
是否渲染字型编辑，开启后，行号与编辑器的边框会增加间距。
默认vscode中为true，monaco-editor为false。

gotoLocation?: IGotoLocationOptions
配置跳转位置的行为，（没有多余的解释）

guides?: IGuidesOptions
配置编辑器一个引导的行为，如成对的括号，缩进。

hideCursorInOverviewRuler?: boolean
在概览标尺时，是否隐藏光标。默认false。

hover?: IEditorHoverOptions
配置hover的行为，可以配置，是否开始hover，延迟，是否严格模式。

inDiffEditor?: boolean
当前编辑器是否是对比编辑器

inlayHints?: IEditorInlayHintsOptions
控制内嵌内容的渲染和行为。如是否开启，字体，字体大小，padding。

inlineSuggest?: IInlineSuggestOptions
配置行内自动完成的行为。

insertSpaces?: boolean
当按下tab键时，是否插入空格，启用detectIndentation时，将根据文件内容覆盖此设置。
默认为true。

language?: string
编辑器从初始化时的语言模型，会根据该语言自动创建model，如果想避免自动创建model，可以设置model: null

largeFileOptimizations?: boolean
对大型文件进行特殊处理，以禁用某些内存密集型功能。默认为true。

letterSpacing?: number
字体间距

lightbulb?: IEditorLightbulbOptions
控制代码操作action的行为和渲染。

lineDecorationsWidth?: string | number
为线条装饰保留的宽度（以像素为单位）。线条装饰放置在行号和编辑器内容之间。您可以传入一个格式为浮点后跟“ch”的字符串。比例 1.3ch（英寸）。默认值为10。

lineHeight?: number
行高

lineNumbers?: LineNumbersType
控制行号的渲染。如果它是一个函数，则将在呈现行号时调用它，并呈现返回值。否则，如果是true，行号将正常呈现（相当于使用身份函数）。否则，将不会渲染行号。默认为on 打开。

lineNumbersMinChars?: number
通过保留水平空间以至少呈现一定数量的数字来控制行号的宽度，

linkedEditing?: boolean
链接是否可以编辑，默认为false。

links?: boolean
启用检测链接并使其可单击。默认为true。

matchBrackets?: “always” | “never” | “near”
启用匹配括号的突出显示。默认为 always。

matchOnWordStartOnly?: boolean
控制建议是否允许在单词中间进行匹配，而不是仅在单词开头进行匹配

maxTokenizationLineLength?: number
出于性能原因，超过此长度的行不会被标记化。默认值为20000。

minimap?: IEditorMinimapOptions
控制minimap的渲染和行为。

model?: ITextModel
编辑器初始时所关联的语言模型。

mouseStyle?: “default” | “text” | “copy”
鼠标指针的样式，默认text。

mouseWheelScrollSensitivity?: number
鼠标在横向或纵向滑动多少行，触发滑动事件，默认1。

mouseWheelZoom?: boolean
是否可以通过鼠标滚轮和Ctrl键，来进行编辑器缩放。默认false。

multiCursorMergeOverlapping?: boolean
合并重叠的选项。默认true。

multiCursorModifier?: “ctrlCmd” | “alt”
用于使用鼠标添加多个光标的修饰符。默认为’alt’

multiCursorPaste?: “spread” | “full”
配置粘贴行数等于光标数的文本时的行为。默认为“排列”。

occurrencesHighlight?: boolean
启用语义出现突出显示。默认为true。

overflowWidgetsDomNode?: HTMLElement
将溢出小部件放置在外部DOM节点内。默认为内部DOM节点。

overviewRulerBorder?: boolean
是否在概览标尺周围绘制边框。默认为true。

overviewRulerLanes?: number
概览标尺应渲染的垂直车道数。默认值为3。

padding?: IEditorPaddingOptions
编辑器内边距。

parameterHints?: IEditorParameterHintOptions
参数提示选项。

peekWidgetDefaultFocus?: “tree” | “editor”
控制默认情况下是否将内联编辑器聚焦在peek小部件中。默认为false。

quickSuggestions?: boolean | IQuickSuggestionsOptions
启用快速建议（阴影自动完成）默认值为true。

quickSuggestionsDelay?: number
快速建议显示延迟，默认10ms。

readOnly?: boolean
编辑器内容是否只读，默认false。

renameOnType?: boolean
已废弃，使用linkedEditing替换。

renderControlCharacters?: boolean
启用控制字符的呈现。默认为true。

renderFinalNewline?: boolean
渲染最后一行，当文件的结尾带有一个新行。默认true。

renderLineHighlight?: “all” | “line” | “none” | “gutter”
渲染当前行高亮，默认all

renderLineHighlightOnlyWhenFocus?: boolean
控制当前行高亮是否只在编辑器聚焦时生效。默认false

renderValidationDecorations?: “on” | “off” | “editable”
是否验证编辑器的注释，默认editable 可编辑时。

renderWhitespace?: “all” | “none” | “boundary” | “selection” | “trailing”
是否渲染空格，或何时渲染。默认selection，选中时。

revealHorizontalRightPadding?: number
当显示光标时，会向光标添加虚拟填充（px），将其变成矩形。这种虚拟填充确保光标在到达视口边缘之前显示出来。默认值为30（像素）。

roundedSelection?: boolean
选区的边框是否圆角，默认true。

rulers?: (number | IRulerOption)[]
在指定列处渲染垂直线。默认为空数组。

scrollBeyondLastColumn?: number
启用滚动可以超出最后一列许多列。默认值为5。

scrollBeyondLastLine?: boolean
启用滚动可以在最后一行之后移动一个屏幕大小。默认为true。

scrollPredominantAxis?: boolean
启用编辑器仅滚动主导轴。在轨迹板上垂直滚动时防止水平漂移。默认为true。

scrollbar?: IEditorScrollbarOptions
控制滚动条的渲染和行为

selectOnLineNumbers?: boolean
单击行号时是否应选择相应的行？默认为true。

selectionClipboard?: boolean
启用Linux主剪贴板。默认为true。

selectionHighlight?: boolean
是否开启选区高亮，默认true。

semanticHighlighting.enabled?: boolean | “configuredByTheme”
控制是否为支持语义高亮显示的语言显示语义高亮显示。true:为所有主题启用semanticHighlighting false：为所有主题“configuredByTheme”禁用semanticHighlighting：SemanticHighlight由当前颜色主题的semanticHigh lighting设置控制。默认为“byTheme”。

showDeprecated?: boolean
控制是否显示已弃用变量的删除线。

showFoldingControls?: “always” | “never” | “mouseover”
控制折叠动作是始终可见还是隐藏，除非鼠标位于边沟上方。默认为“mouseover”。

showUnused?: boolean
是否淡出未使用的变量。

smartSelect?: ISmartSelectOptions
智能选中的配置参数。

smoothScrolling?: boolean
是否启用动画滚动到特定位置。默认false

snippetSuggestions?: “none” | “top” | “bottom” | “inline”
是否开启代码块自动完成，默认 true。

stablePeek?: boolean
即使双击预览编辑器的内容或单击Escape，也要保持其打开状态。默认为false。

stickyScroll?: IEditorStickyScrollOptions
控制粘滞滚动选项的行为

stickyTabStops?: boolean
模拟使用空格缩进时制表符的选择行为。这意味着选择将粘贴到制表位。

stopRenderingLineAfter?: number
性能保护：停止渲染x个字符后的行。默认值为10000。使用-1永不停止渲染

suggest?: ISuggestOptions
自动完成的配置项。

suggestFontSize?: number
自动完成的字体大小。

suggestLineHeight?: number
自动完成的行高。

suggestOnTriggerCharacters?: boolean
启用建议框以在触发字符上弹出。默认为true。

suggestSelection?: “first” | “recentlyUsed” | “recentlyUsedByPrefix”
建议的历史记录模式。

tabCompletion?: “on” | “off” | “onlySnippets”
使用tab键来自动插入。

tabIndex?: number
编辑器文本域的tabindex属性

tabSize?: number
选项卡等于的空格数。启用detectIndentation时，将根据文件内容覆盖此设置。默认值为4。

theme?: string
用于渲染的初始主题。当前开箱即用的主题有：“vs”（默认）、“vs-dark”、“hc-black”、“hc-light”。您可以通过monaco.editor.defineTheme创建自定义主题。要切换主题，请使用monaco.editor.setTheme。注意：如果操作系统处于高对比度模式，主题可能会被覆盖，除非autoDetectHighContrast设置为false。

trimAutoWhitespace?: boolean
删除尾随的自动插入空格。默认为true。

unfoldOnClickAfterEndOfLine?: boolean
控制在折叠行之后单击空内容是否将展开该行。默认为false。

unicodeHighlight?: IUnicodeHighlightOptions
控制unicode高亮显示功能的行为（默认情况下，高亮显示不明确和不可见的字符）。

unusualLineTerminators?: “off” | “auto” | “prompt”
拆除异常线路终端，如线路分离器（LS）、段落分离器（PS）。默认为“prompt”。

useShadowDOM?: boolean
控制编辑器是否应使用shadow DOM。

useTabStops?: boolean
制表符tab停止后插入和删除空格。

value?: string
编辑器中自动创建的模型的初始值。若要不自动创建模型，请使用model:null。

wordBasedSuggestions?: boolean
控制自动完成的选项是否可以基于当前文档来计算。默认true。

wordBasedSuggestionsOnlySameLanguage?: boolean
控制是否应从打开的相同语言或任何语言的文档中包含基于单词的补全。

wordSeparators?: string
包含单词导航时使用的单词分隔符的字符串。默认值为 `~!@#$%^&*()-=+[{]}|;:'",.<>/?

wordWrap?: “on” | “off” | “wordWrapColumn” | “bounded”
控制编辑器的换行。当wordWrap=“off”时，线条将永远不会换行。当wordWrap=“on”时，线条将以视口宽度换行。当wordWrap=“wordWrapColumn”时，行将在wordWrapColumn处换行。当wordWrap=“bounded”时，线条将以最小值换行（视口宽度，wordWrapColumn）。默认为“关闭”。

wordWrapBreakAfterCharacters?: string
配置换行字符。在这些字符之后将引入一个中断。

wordWrapBreakBeforeCharacters?: string
配置换行字符。在这些字符之前将引入一个中断。

wordWrapColumn?: number
控制编辑器的换行。当wordWrap=“off”时，线条将永远不会换行。当wordWrap=“on”时，线条将以视口宽度换行。当wordWrap=“wordWrapColumn”时，行将在wordWrapColumn处换行。当wordWrap=“bounded”时，线条将以最小值换行（视口宽度，wordWrapColumn）。默认值为80。

wordWrapOverride1?: “on” | “off” | “inherit”
覆盖 wordWrap 配置。

wordWrapOverride2?: “on” | “off” | “inherit”
覆盖wordWrapOverride1配置

wrappingIndent?: “none” | “same” | “indent” | “deepIndent”
控制换行的缩进。可以是：“none”、“same”、“indent”或“deepIndent”。vscode中的默认值为“same”，monaco编辑器中的默认为“none”。

wrappingStrategy?: “simple” | “advanced”
控制要使用的换行策略。默认为“simple”。

总结

那么多属性 不是一下子能给记下来的，完整地翻译下来也只是有个印象而已。又一个很大的好处就是可以用中文搜索啦。哈哈哈。。。。