Add an opt-in shortcut to format JavaScript code in the editor
Maintainers usually reply within 1 day
@webdevbyjasmine is already working on this.
Since Oct 25, 2026.
Assessment
This issue has not been assessed yet.
Description
Motivation
The interview editor currently provides several editing helpers, including:
- automatic indentation;
- bracket pairing;
- line-comment toggling;
- editor font and theme controls.
However, it does not provide a way to reformat code that has become difficult to read.
A shortcut such as Shift+Alt+F is familiar to candidates who use VS Code and other code editors. It could be useful when a candidate wants to reformat code after moving a block or making several indentation changes.
Concern about interview behavior
Automatic formatting may make the exercise easier than a real technical interview, where a formatter may not be available. It should therefore not be enabled implicitly for every candidate.
The feature should be opt-in, and the first version should be deliberately limited rather than attempting to support every language immediately.
Proposed first version
Start with JavaScript only.
A possible first version could:
- add an opt-in editor setting for formatting;
- format the current JavaScript buffer with
Shift+Alt+F; - avoid adding another toolbar button;
- leave Python, C, C++ and Java unsupported initially;
- preserve the current buffer if formatting fails;
- show a clear non-blocking error when the formatter cannot parse the code;
- keep the candidate's selection or place the caret at a predictable location after formatting;
- send the formatted result through the existing editor update path.
The setting could be disabled by default so that existing interview behavior does not change.
Expected behavior
When the formatting option is enabled and the candidate presses Shift+Alt+F in a JavaScript editor:
- The current JavaScript code is formatted.
- The editor content is updated as one normal editor change.
- Syntax highlighting, line numbers and editor history remain synchronized.
- The formatted code is used by the existing test runner.
- If formatting fails, the original code remains unchanged and the candidate receives a visible error message.
When the option is disabled, pressing the shortcut should not format the code.
Acceptance criteria
- Formatting is disabled by default.
- The feature is available only for JavaScript in the first version.
- The shortcut is exposed through
aria-keyshortcutsor equivalent accessible help. - Formatting does not add a new toolbar button.
- Formatting failures do not replace or corrupt the candidate's code.
- The existing editor history can undo a formatting operation in one step.
- Syntax highlighting remains aligned after formatting.
- The line-number gutter is updated correctly.
- The formatted buffer is used by the existing JavaScript test runner.
- Python, C, C++ and Java behavior remains unchanged.
- The shortcut does not interfere with normal text input, browser shortcuts or the existing comment shortcut.
- The option's state is persisted if editor options are already persisted for the current workflow.
Current implementation
The editor is a native <textarea> with separate rendering layers for syntax highlighting and line numbers. Existing editor keyboard behavior is handled in:
web/editor.js, which contains editing helpers and keyboard-related predicates;web/interview.js, which handles editor events, history, rendering and publishing;web/interview.html, which contains the editor controls;web/editor-options.js, which stores editor option state.
There is currently no language formatter integrated into the browser editor.
Alternatives considered
Support every language immediately
Supporting Python, C, C++ and Java would require different formatters, different parser behavior and a larger browser-side dependency footprint. It would also make failure behavior harder to keep consistent across languages.
Add a toolbar button
A button would make the feature easier to discover, but the editor toolbar already contains the language selector, restore control, font controls, theme control and Run tests button. A shortcut-only first version would avoid making the toolbar more crowded.
Format automatically on save or before running tests
Automatic formatting could modify the candidate's code without an explicit action and could make interview behavior less predictable. An explicit shortcut is less surprising.
Open questions
- Should the formatter run in the browser, or should formatting be delegated to another service?
- Is JavaScript-only an acceptable first boundary?
- Should the option be available in both Practice and Interview modes?
- Should formatting the entire buffer be the only supported operation, or should a selected range be formatted?
- Should formatting be allowed during a live interview, or only in Practice mode?
- Is an opt-in formatter consistent with the project's intended interview experience?
- Dominant language
- Rust
- Stars
- 177
- Forks
- 100
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 217
Getting set up
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from sysprog21/codetrial
-
Audio output can be confirmed without playing a test soundPossibly taken @ChenYingHan1121 claimed this 8 days ago. Open
Difficulty 2/5 1-3 hours Newbie friendliness 62/100
sysprog21/codetrial#359 · 5 comments · 1 assignee ·
Maintainers usually reply within 1 day
-
Add a Copy code button to the final reportPossibly taken @yansawu claimed this 8 days ago. Open
Difficulty 2/5 1-3 hours Newbie friendliness 80/100
sysprog21/codetrial#318 · 6 comments · 2 reactions · 1 assignee ·
Maintainers usually reply within 1 day
-
Offer a way back to Setup from the lobbyPossibly taken @Patriciaath999 claimed this today. Open
sysprog21/codetrial#513 · 1 comment · 1 assignee ·
Maintainers usually reply within 1 day
-
Jim's stage covers the editor, and Hide avatar does not free the spacePossibly taken @Phonlin claimed this today. Open
sysprog21/codetrial#512 · 2 comments · 1 assignee ·
Maintainers usually reply within 1 day
-
Desktop app opens a blank window on Windows and sends tauri.localhost to the browserPossibly taken @Patriciaath999 claimed this today. Open
sysprog21/codetrial#510 · 1 comment · 1 assignee ·
Maintainers usually reply within 1 day
All issues in sysprog21/codetrial
Similar issues
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
Maintainers usually reply within 1 day
-
good first issue hardware help wanted no-box serve
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 64/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 64/100
Maintainers usually reply within 1 day
-
Query Log shows "Upstream" for CNAME cloaking, schedule, NXDOMAIN hijack and response IP blocksOpenbug good first issue query-log web
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
ferrous-networking/ferrous-dns#326 ·
Maintainers usually reply within 1 day