Summary
The issue at hand is the frequent appearance of inline formatting suggestions by GitHub Copilot in Visual Studio Code (VS Code), which can be misleading when using Prettier with the “format on save” feature. These suggestions are generally correct but are triggered because the file has not been saved and formatted yet.
Root Cause
The root cause of this issue is the interaction between GitHub Copilot and Prettier. Key points include:
- GitHub Copilot provides suggestions based on the current state of the code.
- Prettier formats the code on save, which can temporarily leave the code in a state that Copilot identifies as needing formatting adjustments.
- The combination of these two tools can lead to redundant suggestions that are resolved once the file is saved and Prettier formats the code.
Why This Happens in Real Systems
This happens in real systems due to the following reasons:
- Integration of multiple development tools: The use of both GitHub Copilot for code suggestions and Prettier for code formatting is common.
- Temporal state of code: The temporary state of the code before saving and formatting can trigger Copilot’s suggestions.
- Lack of direct communication between tools: Currently, there’s no direct mechanism for GitHub Copilot to know when Prettier will format the code, leading to overlap in functionality.
Real-World Impact
The real-world impact includes:
- Increased noise: Frequent, unnecessary suggestions can distract developers and decrease productivity.
- Trust in tooling: Over time, developers might start to ignore suggestions or lose trust in the tools, which can lead to missing important code improvements.
- Workflow adjustments: Developers might need to adjust their workflow to accommodate these suggestions, such as saving files more frequently or disabling certain features.
Example or Code (if necessary and relevant)
// Example of a code snippet that might trigger formatting suggestions
// due to indentation or spacing issues that Prettier would correct on save
function exampleFunction() {
let exampleVariable = 'example';
if (exampleVariable === 'example') {
console.log('This is an example');
}
}How Senior Engineers Fix It
Senior engineers can address this issue by:
- Configuring GitHub Copilot settings to reduce or customize the types of suggestions provided.
- Adjusting Prettier settings to format on paste or on file open, in addition to on save, to minimize the window where code is not formatted.
- Implementing a workflow that saves files frequently to minimize the temporal state where Copilot suggests formatting changes.
Why Juniors Miss It
Junior engineers might miss this issue due to:
- Lack of experience with the integration of multiple development tools.
- Unfamiliarity with tool settings and how they interact.
- Focus on coding rather than optimizing the development environment and workflow.