Manage Code Editor Settings

To customize a code editor to your liking or to enforce consistent code formatting styles for everyone who works on an App UI, use the Editor Settings option in a code editor’s context menu. Doing this brings up the settings.json file, which you can use to control how a code editor functions:

Description of code-editor-settings.png follows

Description of the illustration code-editor-settings.png

Use settings.json to control tab width, font size, and more. By default, only a handful of settings show, but you can include several more properties as listed here. Enter double quotation marks (“) in the editor to see the available options:

Description of settings-json1.png follows

Description of the illustration settings-json1.png

Setting Description Default
editor.acceptSuggestionOnEnter Whether insight suggestions should be accepted on pressing the Enter key, in addition to the Tab key:
  • on: Accept a suggestion with Enter as well as Tab
  • off: Accept a suggestion only with Tab
  • smart: Accept a suggestion with Enter only when the change is textual
 on
editor.accessibilityPageSize Number of lines read out by a screen reader None
editor.accessibilitySupport Whether the editor should be optimized for use with screen readers:
  • on: Keep editor optimized for usage with a screen reader
  • off: Do not optimize editor for usage with a screen reader
  • auto: Optimize editor only when a screen reader is detected
 on
editor.autoIndent Control automatic indentation while typing:
  • none: Do not automatically insert indentation
  • advanced: Keep the current line's indentation, honor language-defined brackets, and invoke special onEnterRules defined by languages
  • full: Keep the current line's indentation, honor language-defined brackets, invoke special onEnterRules defined by languages, and honor indentationRules defined by languages
  • brackets: Keep the current line's indentation and honor language-defined brackets
  • keep: Keep the current line's indentation
 advanced
editor.cursorBlinking Control cursor blinking:
  • blink, smooth, phase, or expand: Provide various degrees of the blinking animation
  • solid: No blinking
 blink
editor.cursorStyle Control the appearance of the cursor:
  • line: A line at the current position
  • line-thin: A thinner version of line at the current position
  • block: A solid block that covers the current character
  • block-outline: A block that outlines the current character
  • underline: An underline at the current position
  • underline-thin: A thinner version of underline at the current position
 line
editor.cursorWidth When cursorStyle is set to line, controls the width of the line 2
editor.cursorSurroundingLines Minimum number of lines visible above and below the cursor, starting with 0 0
editor.cursorSurroundingLinesStyle Whether cursorSurroundingLines should be enforced:
  • default: Enforce cursorSurroundingLines only when cursor is changed using the mouse
  • all: Enforce cursorSurroundingLines always
 default
editor.dragAndDrop Enable or disable drag and drop of a selection: true or false false
editor.emptySelectionClipboard Whether copying without selection should copy the current line: true or false true
editor.folding Enable or disable code folding: true or false. The folding margin disappears when folding is disabled.
 true
editor.fontFamily Font family to use in the editor monospace
editor.fontSize Control text font size in pixels, starting with 10. A value under 10 may be difficult to read. 14
editor.fontWeight Weight of the font used in the editor: normal, bold, or numbers between 1 and 1000 normal
editor.formatOnPaste Whether pasted content should be automatically formatted: true or false false
editor.formatOnType Whether a line should be automatically formatted while typing: true or false false
editor.insertSpaces Insert spaces (instead of tabs) when the Tab key is used for indentation true
editor.letterSpacing Control spacing between letters, in pixels None
editor.lineHeight Control height of a line None
editor.matchBrackets Whether matching brackets should be highlighted when the cursor is at a brace: always, never, or near always
editor.mouseWheelScrollSensitivity Numbers of lines to scroll when the mouse wheel is used 1
editor.mouseWheelZoom Whether pressing the Control key and the mouse wheel should change font size: true or false false
editor.multiCursorModifier Modifier to be used with a mouse click to create multiple cursors:
  • alt: Maps to the Alt key on Windows and to the Option key on Mac
  • ctrlCmd: Maps to the Control key on Windows and the Command key on Mac
 alt
editor.occurrencesHighlight Whether to track cursor and highlight other occurrences of the current word or variable: true or false true
editor.renderLineHighlight Controls how the current line is highlighted:
  • all: Highlight the current line as well as the gutter
  • line: Only highlight the current line
  • gutter: Only highlight the current line's gutter
  • none: Do not highlight the current line
 all
editor.renderWhitespace Control how the editor should render whitespace characters:
  • none: Do not render whitespace characters
  • boundary: Render whitespace characters except for single spaces between words
  • selection: Render whitespace characters only on selected text
  • trailing: Render only trailing whitespace characters
  • all: Render all whitespace characters
 selection
editor.selectOnLineNumbers Whether the line should be selected if the line number is clicked: true or false true
editor.showFoldingControls Control when folding controls show:
  • always: Always show the folding controls
  • mouseover: Show the folding controls only when the mouse is over the gutter
 mouseover
editor.showUnused Whether unused variables should be faded out: true or false None
editor.suggestFontSize Font size for insight suggestions None
editor.suggestLineHeight Line height for insight suggestions None
editor.suggestOnTriggerCharacters Whether insight should be triggered by special characters: true or false true
editor.suggestSelection Controls how suggestion history works:
  • first: Always select the first suggestion
  • recentlyUsed: Select recent suggestions
  • recentlyUsedByPrefix: Select suggestions based on previous prefixes that have completed those suggestions
 None
editor.tabCompletion Enable or disable completion by pressing the Tab key:
  • on: Insert the best matching suggestion when pressing Tab
  • off: Disable Tab completion
  • onlySnippets: Tab complete snippets when their prefixes match
 None
editor.tabSize Number of spaces a tab is equal to, starting with 1 2
editor.theme Changes the editor’s color theme: redwood, vs, vs-dark, or hc-black redwood
editor.wordWrap Controls word wrap in the editor:
  • on: Wrap lines at the viewport width
  • off: Do not wrap lines
  • wordWrapColumn: Wrap lines at wordWrapColumn
  • bounded: Wrap lines at the minimum of viewport and wordWrapColumn
 off
editor.wordWrapColumn Number of columns to use when wordWrap is set to wordWrapColumn, starting with 20 None
editor.wrappingIndent Controls how a wrapped line is rendered:
  • none: No indentation. Wrapped lines begin at column 1
  • same: Wrapped lines use the same indentation as the parent
  • indent: Wrapped lines get +1 indentation toward the parent
  • deepIndent: Wrapped lines get +2 indentation toward the parent
 same
editor.minimap.enabled Show or hide the code minimap. true
editor.minimap.size Control the size of the minimap:
  • proportional: The minimap has the same size as the editor contents (and might scroll)
  • fill: The minimap will stretch or shrink as necessary to fill the height of the editor (no scrolling)
  • fit: The minimap will shrink as necessary to never be larger than the editor (no scrolling)
 fit
editor.minimap.side Where to render the minimap: right or left right
editor.minimap.renderCharacters Render characters on a line as opposed to color blocks: true or false true
editor.minimap.scale Scale for rendering the minimap, starting with 1 1