Skip to content

Interface: MonacoEditorProps

Vue component props for Monaco Editor.

Properties

PropertyTypeDescription
acceptSuggestionOnCommitCharacter?booleanMonacoEditorComponentOptions.acceptSuggestionOnCommitCharacter
acceptSuggestionOnEnter?"on" | "smart" | "off"MonacoEditorComponentOptions.acceptSuggestionOnEnter
accessibilityHelpUrl?stringMonacoEditorComponentOptions.accessibilityHelpUrl
accessibilityPageSize?numberMonacoEditorComponentOptions.accessibilityPageSize
accessibilitySupport?"on" | "off" | "auto"MonacoEditorComponentOptions.accessibilitySupport
ariaContainerElement?HTMLElementMonacoEditorComponentOptions.ariaContainerElement
ariaLabel?stringMonacoEditorComponentOptions.ariaLabel
ariaRequired?booleanMonacoEditorComponentOptions.ariaRequired
autoClosingBrackets?EditorAutoClosingStrategyMonacoEditorComponentOptions.autoClosingBrackets
autoClosingComments?EditorAutoClosingStrategyMonacoEditorComponentOptions.autoClosingComments
autoClosingDelete?EditorAutoClosingEditStrategyMonacoEditorComponentOptions.autoClosingDelete
autoClosingOvertype?EditorAutoClosingEditStrategyMonacoEditorComponentOptions.autoClosingOvertype
autoClosingQuotes?EditorAutoClosingStrategyMonacoEditorComponentOptions.autoClosingQuotes
autoDetectHighContrast?booleanMonacoEditorComponentOptions.autoDetectHighContrast
autoIndent?"none" | "advanced" | "full" | "brackets" | "keep"MonacoEditorComponentOptions.autoIndent
automaticLayout?booleanMonacoEditorComponentOptions.automaticLayout
autoSurround?EditorAutoSurroundStrategyMonacoEditorComponentOptions.autoSurround
bracketPairColorization?IBracketPairColorizationOptionsMonacoEditorComponentOptions.bracketPairColorization
codeActionsOnSaveTimeout?numberMonacoEditorComponentOptions.codeActionsOnSaveTimeout
codeLens?booleanMonacoEditorComponentOptions.codeLens
codeLensFontFamily?stringMonacoEditorComponentOptions.codeLensFontFamily
codeLensFontSize?numberMonacoEditorComponentOptions.codeLensFontSize
colorDecorators?booleanMonacoEditorComponentOptions.colorDecorators
colorDecoratorsActivatedOn?"clickAndHover" | "click" | "hover"MonacoEditorComponentOptions.colorDecoratorsActivatedOn
colorDecoratorsLimit?numberMonacoEditorComponentOptions.colorDecoratorsLimit
columnSelection?booleanMonacoEditorComponentOptions.columnSelection
comments?IEditorCommentsOptionsMonacoEditorComponentOptions.comments
contextmenu?booleanMonacoEditorComponentOptions.contextmenu
copyWithSyntaxHighlighting?booleanMonacoEditorComponentOptions.copyWithSyntaxHighlighting
cssModeConfiguration?ModeConfigurationMonaco CSS language mode configuration. Controls which CSS language features are enabled in the editor. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.css.ModeConfiguration.html
cssOptions?OptionsMonaco CSS language options. Allows customization of CSS language service behavior. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.css.Options.html
cursorBlinking?"blink" | "smooth" | "phase" | "expand" | "solid"MonacoEditorComponentOptions.cursorBlinking
cursorSmoothCaretAnimation?"on" | "off" | "explicit"MonacoEditorComponentOptions.cursorSmoothCaretAnimation
cursorStyle?| "line" | "block" | "underline" | "line-thin" | "block-outline" | "underline-thin"MonacoEditorComponentOptions.cursorStyle
cursorSurroundingLines?numberMonacoEditorComponentOptions.cursorSurroundingLines
cursorSurroundingLinesStyle?"default" | "all"MonacoEditorComponentOptions.cursorSurroundingLinesStyle
cursorWidth?numberMonacoEditorComponentOptions.cursorWidth
defaultColorDecorators?"auto" | "always" | "never"MonacoEditorComponentOptions.defaultColorDecorators
definitionLinkOpensInPeek?booleanMonacoEditorComponentOptions.definitionLinkOpensInPeek
detectIndentation?booleanMonacoEditorComponentOptions.detectIndentation
dimension?IDimensionMonacoEditorComponentOptions.dimension
disableLayerHinting?booleanMonacoEditorComponentOptions.disableLayerHinting
disableMonospaceOptimizations?booleanMonacoEditorComponentOptions.disableMonospaceOptimizations
domReadOnly?booleanMonacoEditorComponentOptions.domReadOnly
dragAndDrop?booleanMonacoEditorComponentOptions.dragAndDrop
dropIntoEditor?IDropIntoEditorOptionsMonacoEditorComponentOptions.dropIntoEditor
emptySelectionClipboard?booleanMonacoEditorComponentOptions.emptySelectionClipboard
experimentalWhitespaceRendering?"off" | "svg" | "font"MonacoEditorComponentOptions.experimentalWhitespaceRendering
extraEditorClassName?stringMonacoEditorComponentOptions.extraEditorClassName
extraLibs?MonacoExtraLibrariesAdditional libraries to be loaded into the Monaco editor. This is useful for adding custom types or definitions that are not included by default. The libraries should be provided in filename: content pairs.
fastScrollSensitivity?numberMonacoEditorComponentOptions.fastScrollSensitivity
fileUri-
find?IEditorFindOptionsMonacoEditorComponentOptions.find
fixedOverflowWidgets?booleanMonacoEditorComponentOptions.fixedOverflowWidgets
folding?booleanMonacoEditorComponentOptions.folding
foldingHighlight?booleanMonacoEditorComponentOptions.foldingHighlight
foldingImportsByDefault?booleanMonacoEditorComponentOptions.foldingImportsByDefault
foldingMaximumRegions?numberMonacoEditorComponentOptions.foldingMaximumRegions
foldingStrategy?"auto" | "indentation"MonacoEditorComponentOptions.foldingStrategy
fontFamily?stringMonacoEditorComponentOptions.fontFamily
fontLigatures?string | booleanMonacoEditorComponentOptions.fontLigatures
fontSize?numberMonacoEditorComponentOptions.fontSize
fontVariations?string | booleanMonacoEditorComponentOptions.fontVariations
fontWeight?stringMonacoEditorComponentOptions.fontWeight
formatOnPaste?booleanMonacoEditorComponentOptions.formatOnPaste
formatOnType?booleanMonacoEditorComponentOptions.formatOnType
fsNVEFileSystemThe NVEFileSystem instance to use as the file system for the Monaco Editor.
glyphMargin?booleanMonacoEditorComponentOptions.glyphMargin
gotoLocation?IGotoLocationOptionsMonacoEditorComponentOptions.gotoLocation
guides?IGuidesOptionsMonacoEditorComponentOptions.guides
handlebarModeConfiguration?ModeConfigurationMonaco Handlebars language mode configuration. Controls which Handlebars language features are enabled in the editor. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.html.ModeConfiguration.html
handlebarOptions?OptionsMonaco Handlebars language options. Allows customization of Handlebars language service behavior. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.html.Options.html
hideCursorInOverviewRuler?booleanMonacoEditorComponentOptions.hideCursorInOverviewRuler
hover?IEditorHoverOptionsMonacoEditorComponentOptions.hover
htmlModeConfiguration?ModeConfigurationMonaco HTML language mode configuration. Controls which HTML language features are enabled in the editor. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.html.ModeConfiguration.html
htmlOptions?OptionsMonaco HTML language options. Allows customization of HTML language service behavior. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.html.Options.html
inDiffEditor?booleanMonacoEditorComponentOptions.inDiffEditor
inlayHints?IEditorInlayHintsOptionsMonacoEditorComponentOptions.inlayHints
inlineCompletionsAccessibilityVerbose?booleanMonacoEditorComponentOptions.inlineCompletionsAccessibilityVerbose
inlineSuggest?IInlineSuggestOptionsMonacoEditorComponentOptions.inlineSuggest
insertSpaces?booleanMonacoEditorComponentOptions.insertSpaces
javascriptCompilerOptions?CompilerOptionsMonaco JavaScript compiler options. Allows customization of JavaScript language service and transpilation behavior. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.typescript.CompilerOptions.html
javascriptDiagnosticsOptions?DiagnosticsOptionsMonaco JavaScript diagnostics options. Allows customization of JavaScript validation and diagnostics behavior. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.typescript.DiagnosticsOptions.html
javascriptModeConfiguration?ModeConfigurationMonaco JavaScript language mode configuration. Controls which JavaScript language features are enabled in the editor. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.typescript.ModeConfiguration.html
jsonDiagnosticsOptions?DiagnosticsOptionsMonaco JSON diagnostics options. Allows customization of JSON validation and diagnostics behavior. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.json.DiagnosticsOptions.html
jsonModeConfiguration?ModeConfigurationMonaco JSON language mode configuration. Controls which JSON language features are enabled in the editor. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.json.ModeConfiguration.html
largeFileOptimizations?booleanMonacoEditorComponentOptions.largeFileOptimizations
lessModeConfiguration?ModeConfigurationMonaco LESS language mode configuration. Controls which LESS language features are enabled in the editor. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.css.ModeConfiguration.html
lessOptions?OptionsMonaco LESS language options. Allows customization of LESS language service behavior. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.css.Options.html
letterSpacing?numberMonacoEditorComponentOptions.letterSpacing
lightbulb?IEditorLightbulbOptionsMonacoEditorComponentOptions.lightbulb
lineDecorationsWidth?string | numberMonacoEditorComponentOptions.lineDecorationsWidth
lineHeight?numberMonacoEditorComponentOptions.lineHeight
lineNumbers?LineNumbersTypeMonacoEditorComponentOptions.lineNumbers
lineNumbersMinChars?numberMonacoEditorComponentOptions.lineNumbersMinChars
linkedEditing?booleanMonacoEditorComponentOptions.linkedEditing
links?booleanMonacoEditorComponentOptions.links
matchBrackets?"always" | "never" | "near"MonacoEditorComponentOptions.matchBrackets
matchOnWordStartOnly?booleanMonacoEditorComponentOptions.matchOnWordStartOnly
maxTokenizationLineLength?numberMonacoEditorComponentOptions.maxTokenizationLineLength
minimap?IEditorMinimapOptionsMonacoEditorComponentOptions.minimap
mouseStyle?"default" | "text" | "copy"MonacoEditorComponentOptions.mouseStyle
mouseWheelScrollSensitivity?numberMonacoEditorComponentOptions.mouseWheelScrollSensitivity
mouseWheelZoom?booleanMonacoEditorComponentOptions.mouseWheelZoom
multiCursorLimit?numberMonacoEditorComponentOptions.multiCursorLimit
multiCursorMergeOverlapping?booleanMonacoEditorComponentOptions.multiCursorMergeOverlapping
multiCursorModifier?"alt" | "ctrlCmd"MonacoEditorComponentOptions.multiCursorModifier
multiCursorPaste?"full" | "spread"MonacoEditorComponentOptions.multiCursorPaste
occurrencesHighlight?"off" | "singleFile" | "multiFile"MonacoEditorComponentOptions.occurrencesHighlight
onAfterCreate?(instance: IStandaloneCodeEditor) => void-
onInit?(monaco: any, editor: any) => void | Promise<void>-
overflowWidgetsDomNode?HTMLElementMonacoEditorComponentOptions.overflowWidgetsDomNode
overviewRulerBorder?booleanMonacoEditorComponentOptions.overviewRulerBorder
overviewRulerLanes?numberMonacoEditorComponentOptions.overviewRulerLanes
padding?IEditorPaddingOptionsMonacoEditorComponentOptions.padding
parameterHints?IEditorParameterHintOptionsMonacoEditorComponentOptions.parameterHints
pasteAs?IPasteAsOptionsMonacoEditorComponentOptions.pasteAs
peekWidgetDefaultFocus?"tree" | "editor"MonacoEditorComponentOptions.peekWidgetDefaultFocus
placeholder?stringMonacoEditorComponentOptions.placeholder
quickSuggestions?boolean | IQuickSuggestionsOptionsMonacoEditorComponentOptions.quickSuggestions
quickSuggestionsDelay?numberMonacoEditorComponentOptions.quickSuggestionsDelay
razorModeConfiguration?ModeConfigurationMonaco Razor language mode configuration. Controls which Razor language features are enabled in the editor. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.html.ModeConfiguration.html
razorOptions?OptionsMonaco Razor language options. Allows customization of Razor language service behavior. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.html.Options.html
readOnly?booleanMonacoEditorComponentOptions.readOnly
readOnlyMessage?IMarkdownStringMonacoEditorComponentOptions.readOnlyMessage
renderControlCharacters?booleanMonacoEditorComponentOptions.renderControlCharacters
renderFinalNewline?"on" | "off" | "dimmed"MonacoEditorComponentOptions.renderFinalNewline
renderLineHighlight?"none" | "line" | "all" | "gutter"MonacoEditorComponentOptions.renderLineHighlight
renderLineHighlightOnlyWhenFocus?booleanMonacoEditorComponentOptions.renderLineHighlightOnlyWhenFocus
renderValidationDecorations?"on" | "off" | "editable"MonacoEditorComponentOptions.renderValidationDecorations
renderWhitespace?"none" | "all" | "boundary" | "selection" | "trailing"MonacoEditorComponentOptions.renderWhitespace
revealHorizontalRightPadding?numberMonacoEditorComponentOptions.revealHorizontalRightPadding
roundedSelection?booleanMonacoEditorComponentOptions.roundedSelection
rulers?(number | IRulerOption)[]MonacoEditorComponentOptions.rulers
screenReaderAnnounceInlineSuggestion?booleanMonacoEditorComponentOptions.screenReaderAnnounceInlineSuggestion
scrollbar?IEditorScrollbarOptionsMonacoEditorComponentOptions.scrollbar
scrollBeyondLastColumn?numberMonacoEditorComponentOptions.scrollBeyondLastColumn
scrollBeyondLastLine?booleanMonacoEditorComponentOptions.scrollBeyondLastLine
scrollPredominantAxis?booleanMonacoEditorComponentOptions.scrollPredominantAxis
scssModeConfiguration?ModeConfigurationMonaco SCSS language mode configuration. Controls which SCSS language features are enabled in the editor. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.css.ModeConfiguration.html
scssOptions?OptionsMonaco SCSS language options. Allows customization of SCSS language service behavior. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.css.Options.html
selectionClipboard?booleanMonacoEditorComponentOptions.selectionClipboard
selectionHighlight?booleanMonacoEditorComponentOptions.selectionHighlight
selectOnLineNumbers?booleanMonacoEditorComponentOptions.selectOnLineNumbers
semanticHighlighting.enabled?boolean | "configuredByTheme"MonacoEditorComponentOptions.semanticHighlighting
showDeprecated?booleanMonacoEditorComponentOptions.showDeprecated
showFoldingControls?"always" | "never" | "mouseover"MonacoEditorComponentOptions.showFoldingControls
showUnused?booleanMonacoEditorComponentOptions.showUnused
smartSelect?ISmartSelectOptionsMonacoEditorComponentOptions.smartSelect
smoothScrolling?booleanMonacoEditorComponentOptions.smoothScrolling
snippetSuggestions?"none" | "top" | "bottom" | "inline"MonacoEditorComponentOptions.snippetSuggestions
stablePeek?booleanMonacoEditorComponentOptions.stablePeek
stickyScroll?IEditorStickyScrollOptionsMonacoEditorComponentOptions.stickyScroll
stickyTabStops?booleanMonacoEditorComponentOptions.stickyTabStops
stopRenderingLineAfter?numberMonacoEditorComponentOptions.stopRenderingLineAfter
suggest?ISuggestOptionsMonacoEditorComponentOptions.suggest
suggestFontSize?numberMonacoEditorComponentOptions.suggestFontSize
suggestLineHeight?numberMonacoEditorComponentOptions.suggestLineHeight
suggestOnTriggerCharacters?booleanMonacoEditorComponentOptions.suggestOnTriggerCharacters
suggestSelection?"first" | "recentlyUsed" | "recentlyUsedByPrefix"MonacoEditorComponentOptions.suggestSelection
tabCompletion?"on" | "off" | "onlySnippets"MonacoEditorComponentOptions.tabCompletion
tabFocusMode?booleanMonacoEditorComponentOptions.tabFocusMode
tabIndex?numberMonacoEditorComponentOptions.tabIndex
tabSize?numberMonacoEditorComponentOptions.tabSize
theme?MonacoEditorThemesMonacoEditorComponentOptions.theme
trimAutoWhitespace?booleanMonacoEditorComponentOptions.trimAutoWhitespace
typescriptCompilerOptions?CompilerOptionsMonaco TypeScript compiler options. Allows customization of TypeScript language service and transpilation behavior. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.typescript.CompilerOptions.html
typescriptDiagnosticsOptions?DiagnosticsOptionsMonaco TypeScript diagnostics options. Allows customization of TypeScript validation and diagnostics behavior. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.typescript.DiagnosticsOptions.html
typescriptModeConfiguration?ModeConfigurationMonaco TypeScript language mode configuration. Controls which TypeScript language features are enabled in the editor. See: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.typescript.ModeConfiguration.html
unfoldOnClickAfterEndOfLine?booleanMonacoEditorComponentOptions.unfoldOnClickAfterEndOfLine
unicodeHighlight?IUnicodeHighlightOptionsMonacoEditorComponentOptions.unicodeHighlight
unusualLineTerminators?"off" | "auto" | "prompt"MonacoEditorComponentOptions.unusualLineTerminators
useShadowDOM?booleanMonacoEditorComponentOptions.useShadowDOM
useTabStops?booleanMonacoEditorComponentOptions.useTabStops
wordBasedSuggestions?"off" | "currentDocument" | "matchingDocuments" | "allDocuments"MonacoEditorComponentOptions.wordBasedSuggestions
wordBasedSuggestionsOnlySameLanguage?booleanMonacoEditorComponentOptions.wordBasedSuggestionsOnlySameLanguage
wordBreak?"normal" | "keepAll"MonacoEditorComponentOptions.wordBreak
wordSegmenterLocales?string | string[]MonacoEditorComponentOptions.wordSegmenterLocales
wordSeparators?stringMonacoEditorComponentOptions.wordSeparators
wordWrap?"on" | "off" | "wordWrapColumn" | "bounded"MonacoEditorComponentOptions.wordWrap
wordWrapBreakAfterCharacters?stringMonacoEditorComponentOptions.wordWrapBreakAfterCharacters
wordWrapBreakBeforeCharacters?stringMonacoEditorComponentOptions.wordWrapBreakBeforeCharacters
wordWrapColumn?numberMonacoEditorComponentOptions.wordWrapColumn
wordWrapOverride1?"on" | "off" | "inherit"MonacoEditorComponentOptions.wordWrapOverride1
wordWrapOverride2?"on" | "off" | "inherit"MonacoEditorComponentOptions.wordWrapOverride2
wrappingIndent?"none" | "same" | "indent" | "deepIndent"MonacoEditorComponentOptions.wrappingIndent
wrappingStrategy?"advanced" | "simple"MonacoEditorComponentOptions.wrappingStrategy