When you use GitHub Copilot and Prettier together in VS Code, you may notice that code generated by Copilot is sometimes malformed or indented incorrectly. This happens because both extensions try to modify the document at the same time. One extension writes code while the other reformats it, causing overlapping edits that corrupt the file. This article explains why the race condition occurs and provides a reliable fix to prevent it.
Key Takeaways: Resolving the Copilot-Prettier Race Condition
- VS Code settings.json > editor.formatOnSave: Set to true and disable formatOnPaste to separate formatting from inline suggestions.
- VS Code settings.json > editor.codeActionsOnSave: Add “source.organizeImports”: true to run Prettier only after Copilot finishes typing.
- VS Code settings.json > editor.formatOnType: Set to false to prevent Prettier from reformatting mid-suggestion.
Why the Race Condition Happens
GitHub Copilot and Prettier both respond to document changes in VS Code. Copilot inserts code as you type or accept an inline suggestion. Prettier watches for those same changes and immediately reformats the document. When both extensions act on the same edit event, their modifications collide. One extension may write a closing bracket while the other removes it, leaving the file in an inconsistent state. This is a classic race condition where the order of execution is not guaranteed. The result is often a broken syntax, extra spaces, or missing characters that require manual correction.
The root cause is that VS Code triggers formatting on the same event that Copilot uses to insert code. By default, Prettier can be configured to format on save, on type, or on paste. If any of these triggers fire while Copilot is in the middle of generating a suggestion, the two extensions compete for the document buffer. The problem is more common in large files or files with complex syntax, where the formatting operation takes longer.
Steps to Prevent the Race Condition
The fix involves configuring VS Code so that Prettier formats the document only after Copilot has finished its work. Use the following steps to adjust your user or workspace settings.
- Open VS Code Settings
Click the gear icon in the lower-left corner and select Settings. Alternatively, press Ctrl+, on Windows or Cmd+, on Mac. - Search for format on save
In the search bar at the top, type “format on save”. Locate the setting Editor: Format On Save and check the box to enable it. - Disable format on type
Search for “format on type”. Uncheck the Editor: Format On Type setting. This prevents Prettier from reformatting the document while you are typing or while Copilot is generating an inline suggestion. - Disable format on paste
Search for “format on paste”. Uncheck the Editor: Format On Paste setting. This avoids reformatting when Copilot pastes a code block into the document. - Configure code actions on save
Search for “code actions on save”. Click Edit in settings.json. Add or modify the following entry:"editor.codeActionsOnSave": {
"source.organizeImports": true
}
This ensures that Prettier runs as a code action after the save event, not during the edit event. - Set Prettier as default formatter
Search for “default formatter”. Select Prettier from the dropdown for the Editor: Default Formatter setting. This ensures only Prettier handles formatting, not the built-in formatter or other extensions. - Restart VS Code
Close and reopen VS Code to apply all setting changes. Test by accepting a Copilot suggestion and saving the file. The formatting should apply without corruption.
If the Race Condition Still Occurs
Copilot suggestions are still malformed after the fix
If the problem persists, check whether another extension is also formatting the document. Extensions like ESLint, Stylelint, or editorconfig can trigger additional formatting events. Disable all non-essential extensions temporarily. If the issue stops, re-enable extensions one by one to identify the conflicting one.
Prettier does not run on save
If formatting is not applied when you save, verify that Prettier is installed and enabled. Open the Extensions panel, search for Prettier, and ensure it is not disabled. Also confirm that the workspace settings file does not override the user settings. Open .vscode/settings.json in your project and check for conflicting values.
Copilot stops suggesting code
If disabling format on type causes Copilot to stop providing suggestions, this is not a direct side effect. Copilot does not depend on format on type. However, if you disabled inline suggestions accidentally, check the Copilot extension settings. Open the Extensions panel, click Copilot, and ensure Enable Inline Suggestions is checked.
Copilot Inline Suggestions vs Prettier Format on Save: Comparison
| Item | Copilot Inline Suggestions (default) | Prettier Format on Save (recommended) |
|---|---|---|
| Trigger event | Key press or pause after typing | File save (Ctrl+S) |
| Conflict risk | High when combined with format on type or format on paste | Low because formatting runs after Copilot finishes writing |
| User experience | Code appears instantly but may require manual cleanup | Code is consistently formatted after save |
| Recommended vs not | Use as is | Enable for stable formatting |
By disabling format on type and format on paste, you prevent Prettier from reacting to the same edit event that Copilot uses. Format on save runs after the document is stable. This separation eliminates the race condition entirely. If you prefer real-time formatting, you can enable format on type and accept occasional manual fixes. But for most users, the save-based approach provides a reliable workflow without corrupted code.