
This is a new website and is under active development. There will be some odd-looking layouts and colours while this is happening. Please bear with me and check back again to see any updates.
Article StatusIncomplete (Expect further updates)
I signed up for a personal license at US$10 per month with a view to deciding whether $100 per year is worth it for me as an open source developer who isnāt making any money from their outputs.
I was already making fairly extensive use of the public ChatGPT service to get answers to coding questions and code suggestions. I already noted a significant improvement in responses when the 4o
model went live.
As with most things related to GitHub, sign-up, configuration and integration with VSCode wasnāt hard but it was reasonably involved. Not all configuration settings were obvious. Nor are all of the VSCode integrations. So this is my first observation.
TipEven being familiar with ChatGPT and prompt engineering, you will need to invest time and energy learning how to use CoPilot.
VSCode Installation
- Only slightly confusing since there are not only many unofficial extensions to avoid, there are 2 official extensions but installing the main one also installs the other (chat).
- Further confusion if you install the extension before you complete the GitHub side of the CoPilot configuration. The VSCode integration didnāt want to work. I had to complete the config and restart VSCode though no errors or warnings were showing.
Summary: RTFM!. š
VSCode Chat Sidebar
- Relatively familiar interface similar to using ChatGPT but taking additional context from the specifically selected file and from other files open in the workspace.
- Adds some additional
/
commands to further steer the AI responses. - Allows switching between models 
Failures
-
With an Astro Markdown content file open, I asked both CoPilot and Claude
In the selected file, how can I tell Astro via the markdown to apply a specific class to the copilot-ctrl-i.png image?
. Both models completely failed to give a correct, workable answer. Both models started to go round in circles after a few attempts, trying to suggest the same, incorrect answers. -
When trying to get CoPilot to generate a
.d.ts
definition file for myuibuilder.module.js
library which is around 3,300 lines long, it failed to generate a complete file. When forced, it started to hallucinate methods that didnāt exist. It claims not to have a size limit on source reference files but when pressed it admitted that it may truncate references which it clearly does. I donāt think that the file size was that large so this is clearly a major issue to watch out for. -
I tried to get Copilot to generate an ESLINT v9 (current version) flat configuration file and it could not. It thought that v8 was the latest. V9 has been live since April 2024 (nearly 8 months at the time of writing). This clearly shows limitations of the
4o
model.
Summary: As with all LLM-based AI tools, they only really work when they have plenty of source material to work with. The more specialist the data/question, the less likely to are to get a decent answer.
VSCode Code Edit Integration
- When you write a comment in code, you may get some inline CoPilot code suggestions that appear ghosted.
- How to use those suggestions is far from obvious and behaviours seem a little flaky (though that might be partially due to other extensions interferring?).
- There is a mix of tab, Enter, and Shift-Enter keys to make things happen in the editor. Requires new muscle memory to be built up to avoid repeatedly pressing the wrong thing which may cancel when you want to insert or the other way around.
Successes
- When writing either documentation or web pages, CoPilot can nicely suggest some text. For example, on this siteās Privacy page, it provided a description of the giscus local storage entry and a link to the giscus home page. It also added the privacy pageās link here.
Failures
OMG! Why choose one of THE most common keyboard shortcuts, Ctrl-i to kick CoPilot into doing something in the editor! š I even asked a GitHub staffer and had it confirmed that there is no way to change it. However, you can
Help with GIT
Successes
- When youāve made a bunch of changes to code but not yet committed them, CoPilot can suggest a commit message for you. It mostly does a pretty good job even when you have multiple changes in the file.
Steering CoPilot Responses
When using GitHub CoPilot with VSCode, you can give it a set of fixed guidance instructions either through settings in VSCodeās setting or better still, using a .github/copilot-instructions.md
file. These instructions can be quite comprehensive and you can even ask CoPilot to improve them for you.
Example instructions file
This is the file Iām using to help steer responses for an Astro build repository. As you can see, it is a Markdown formatted file.
# Copilot Instructions
## Core Requirements
- Use Astro (v4.x or newer)- Follow project eslint configuration- Ensure WCAG 2.2 Level AA compliance- Apply Shift-Left security practices
## Code Style
### JavaScript/TypeScript
- For node.js, use features available to v18- For browsers, use features available to 90%+ browsers/users- No trailing semicolons- Single quotes for strings- Use const by default, let when needed- Prefer arrow functions- Use optional chaining- Add JSDoc if missing- Add TypeScript types/interfaces
### Documentation
- Include JSDoc for functions and classes- Add @param and @returns tags- Document thrown errors- Include usage examples for complex functions
### HTML/CSS
- Use semantic HTML elements- Only use features available to 90%+ browsers/users- Include ARIA attributes where needed- Mobile-first responsive design- Use CSS custom properties- Follow BEM naming convention- Include print styles
## Testing
- Write unit tests using Vitest- Include accessibility tests- Maintain >80% code coverage- Test error scenarios
## Performance
- Lazy load components when possible- Optimize images and assets- Keep bundle size minimal- Use proper caching strategies
## Security
- Sanitize user inputs- Validate data on server-side- Follow OWASP guidelines- Use Content Security Policy
VSCode Extensions that use CoPilot
In addition to the 2 GitHub official CoPilot extensions, here are a few more that I thought were interesting.
- Regex Previewer
- vscode-mermAId - AI enhanced diagrams using Mermaid.
- GenAIScript - very interesting idea from Microsoft for using JavaScript to generate scripts that create AI prompts and can analyse the returned data.
- Data Analysis for Copilot - Another interesting Microsoft extension that will analyse CSV files of data for you using Python. It can generate visualizations and output to a Python or Jupyter notebook file.
- GitHub Copilot Code Review Assistant - analyse changes between GitHub branches.
- CoCover - AI generate images for articles based on frontmatter title and description. You need to add API references for Dall-E 3.
You can search the VSCode extensions marketplace with the tag chat-participant
to see the full list.