Editor Settings
Relevant source files
The following files were used as context for generating this wiki page:
Editor Settings govern the behavior, appearance, and functionality of the core CodeMirror editor within Acode. These configurations allow you to customize the coding environment, ranging from typography and indentation to advanced features like live autocompletion and linting markers.
You access these settings to optimize performance on mobile devices or to align the editor with specific workflow requirements, such as enabling "Format on Save" or adjusting touch-specific cursor handles.
Sources: user-guide/settings/editor-settings.md:1-3, user-guide/index.md:13-15
Access Methods
Users can open the Editor Settings through multiple entry points in the application interface.
| Method | Action |
|---|---|
| Main Menu | Tap the three-dot menu icon and select Settings > Editor Settings. |
| Keyboard Shortcut | Press Ctrl + , to open the global settings page. |
| Command Palette | Search for "Show Settings" using Ctrl + Shift + P. |
Sources: user-guide/settings.md:15-23, tutorials/command-palette.md:21-25
The diagram above illustrates the sequence of interactions to navigate to the editor configuration via the Command Palette.
Core Editor Options
The primary configuration block manages the fundamental behavior of the CodeMirror instance.
Typography and Spacing
| Setting | Description | Default |
|---|---|---|
| Font Size | Sets the CSS size string for editor text. | 12px |
| Editor Font | Selects the font family from installed fonts. | Roboto Mono |
| Line Height | Adjusts vertical spacing between lines (1.0 to 2.0). | 2 |
| Tab Size | Sets the visual width of tab characters (1 to 8). | 2 |
| Soft Tab | Inserts spaces instead of a tab character when enabled. | On |
Sources: user-guide/settings/editor-settings.md:7-14
Visual Aids and Indicators
| Setting | Description | Default |
|---|---|---|
| Show Line Numbers | Displays the gutter containing line counts. | On |
| Relative Line Numbers | Shows numbers relative to the current cursor position. | Off |
| Indent Guides | Renders vertical lines to indicate indentation levels. | On |
| Rainbow Brackets | Colors nested bracket pairs to improve readability. | On |
| Color Preview | Displays inline color swatches next to color hex/rgb codes. | On |
| Show Spaces | Renders markers for spaces, tabs, and trailing whitespace. | Off |
Sources: user-guide/settings/editor-settings.md:15-25
Functional Behavior
Editor behavior settings control how the system reacts to user input and file lifecycle events.
- Autosave: Automatically saves the buffer after a specified delay. It requires a value of
0(disabled) or>= 1000ms. - Format on Save: Triggers the active language formatter when a file is saved.
- Live Autocompletion: Provides real-time suggestion markers while typing.
- Text Wrap: Wraps long lines within the visible editor viewport.
- Lint Gutter: Displays diagnostic markers from active Language Servers (LSP).
Sources: user-guide/settings/editor-settings.md:7-22, user-guide/settings/editor-settings.md:38-39
This flowchart shows the logic flow during file saving operations, including the conditional formatting check.
Extended Configurations
The Editor Settings integrate with other modules to provide a cohesive development experience.
Scroll Settings
Accessed via a sub-page, this allows configuration of the Scrollbar Size. Users can select widths of 5, 10, 15, or 20 pixels. The default is 20px.
Sources: user-guide/settings/editor-settings.md:30-33
Themes and Highlighting
Editor themes control the syntax highlighting colors. These are managed separately in the Themes section under the "Editor" tab. Users can install additional highlighting schemes via the Plugin Registry.
Sources: user-guide/settings/themes.md:7-16
Formatters
The Formatter settings allow users to assign specific tools (Built-in or Plugin-based like Prettier) to individual programming languages. These formatters execute if "Format on Save" is enabled in the primary Editor Settings.
Sources: user-guide/settings/formatter.md:5-13
Technical Constraints
Recent updates have transitioned the editor to CodeMirror. Consequently, certain legacy options from the Ace editor era are no longer functional in the current flow:
- Print margin
- Elastic tabstops
- Textarea-for-IME
Sources: user-guide/settings/editor-settings.md:37-38
UI Interaction for Mobile
For touch-based devices, the Cursor Controller Size setting allows users to adjust the size of the touch handle. Available values include None, Small, Medium, and Large.
Sources: user-guide/settings/editor-settings.md:26
In summary, Editor Settings provide a granular interface for managing the CodeMirror environment. By balancing visual aids, typography, and automated behaviors like autosaving and formatting, you can tailor the editor to suit both mobile touch interfaces and traditional keyboard-based development.