- Open relevant files
- Context is the King
- Meaningful names matters
- Specificity
- Iterative Refinement
- Proper prompt with context and details.
- Give GitHub Copilot an example or two.
- Review generated code and Edit
GitHub Copilot generates better suggestions by analyzing the context from all the open files in your editor. Keeping relevant files open provides Copilot with a broader view of your project to enhance its recommendations. Also close the unrelated files.
Copilot output quality is directly proportional to your input prompt and input context. Write better and specific prompt. To provide desired context, open relevant files, attach relevant file with #file, use @workspace agent when needed.
The names of your variables and functions are crucial for GitHub Copilot to generate meaningful suggestions. Avoid generic names like foo or bar, as they lack clear intent. Descriptive names improve Copilot's understanding and output, just as they help coworkers understand your code better. Following good coding practices ensures you get valuable and accurate assistance from GitHub Copilot.
While GitHub Copilot helps you code and iterate faster, remember the old rule of programming still applies: garbage in, garbage out.
Be specific in your prompts to get more accurate and relevant suggestions. To receive the desired output, it is important to be specific and intentional in your inputs.
Refine your prompts based on the suggestions you receive. Sometimes the first suggestion may not be perfect. Iterating through multiple suggestions can help find the best fit.
The more contextually rich our input or prompt is, the better the prediction or output will be. Having examples, especially when processing data or manipulation strings, helps quite a bit.
Ex 1:
Create a basic markdown editor in Next.js with the following features:
- Use react hooks
- Create state for markdown with default text "type markdown here"
- A text area where users can write markdown
- Show a live preview of the markdown text as I type
- Support for basic markdown syntax like headers, bold, italics
- Use React markdown npm package
- The markdown text and resulting HTML should be saved in the component's state and updated in real time
Ex 2:
Write some code for grades.py
// In prompt no context
Implement a function in grades.py to calculate the average grade
// Little better than before but it doesn’t clearly define the input and output requirements.
Implement the function calculate\_average\_grade in grades.py that takes a list of grades as input and returns the average grade as a floating-point number
// Good prompt with proper context.
For instance, we wanted to extract the names from the array of data below and store it in a new array:
When we didn’t show GitHub Copilot an example:
// Map through an array of arrays of objects to transform data
const data = [ [ { name: 'John', age: 25 }, { name: 'Jane', age: 30 } ], [ { name: 'Bob', age: 40 } ] ];
const mappedData = data.map(x => [x.name](http://x.name/));
console.log(mappedData);
// Results: [undefined, undefined]
It generated an incorrect usage of map.
By contrast, when we did provide an example …
// Map through an array of arrays of objects
// Example: Extract names from the data array
// Desired outcome: ['John', 'Jane', 'Bob']
const data = [
[{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }],
[{ name: 'Bob', age: 40 }]
];
const mappedData = data.flatMap(sublist => sublist.map(person => person.name));
console.log(mappedData);
// Results: ['John', 'Jane', 'Bob']
Just as you would review a colleague’s code, you should always assess, analyze, and validate AI-generated code. Always review the generated code to ensure it meets your requirements and adheres to best practices.