Save Hours By Giving GitHub Copilot Custom Instructions for Code and Commit Generation ????

Let AI write code and commit the way you and your team describe! Prevent re-doing code style for AI-generated code!

I’ve always believed that writing great code isn’t just about getting things to work?—?creating a story in every line and commit.

I was recently diving into the documentation of GitHub Copilot, and I was thrilled to discover that you can teach it using your coding and commit message style.

In this post, I will show you how I set up custom instructions so that Github Copilot generates code similar to my coding style and writes commit messages that speak in our team’s language. Trust me, once you get this working, you’ll never look at your Git history the same way again!

What are custom instructions?

Custom instructions are like giving Github Copilot a guide detailing your coding preferences and committing message rules. Imagine having a teammate who already knows your quirks?—?whether you love using double quotes in JavaScript or insist on using conventional commit messages.

With custom instructions, whenever you ask Github Copilot for help, it automatically writes in your style and follows your guidelines. It’s not just about saving time; it’s about ensuring consistency throughout your project.

1. Create the settings?file

First, create a folder (if it’s not already there yet)?.vscode and create a settings.json file in it.

2. Setup custom instructions for code generation

Then, I create a file called code-style.md in the a docs folder in my repository. In that file, I outline my coding style for languages like JavaScript, CSS, and Vue.js.

# Code Style Guide

## General Guidelines
- Keep the code simple and readable.
- Use Prettier for code formatting.

## CSS
- Use class names that are descriptive and follow a consistent naming convention.
- Avoid using IDs for styling.
- Organize CSS properties in a logical order.

## Tailwind CSS
- Use utility-first classes to build components.
- Avoid using custom CSS when possible.
- Group related classes together for better readability.

## JavaScript
- Use `const` and `let` instead of `var`.
- Prefer arrow functions for anonymous functions.
- Use template literals for string concatenation.
- Always use semicolons.
- Follow the Prettier configuration for formatting.

## Vue.js
- Use single-file components (SFCs) with the `.vue` extension.
- Organize component structure in this order: `<script>` then `<template>` and lastly `<style>`.
- Use PascalCase for component names.
- Use kebab-case for component file names.
- Keep components small and focused.
- Use Vuex for state management.        

With these guidelines, Github Copilot generates code that seamlessly fits into my projects without needing constant tweaks.

3. Custom instructions for commit message generation

A clear, consistent commit message can be a lifesaver when understanding your codebase’s evolution. I create a commit-style.md file in the docs folder. Here's a peek at my commit style guide:

## Commit Style Guide
We follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) style for our commit messages. Here are some examples:

- `feat: add new user authentication module`
- `fix: resolve issue with data fetching.`
- `docs: update README with installation instructions`
- `style: format code with Prettier`
- `refactor: improve performance of data processing`
- `test: add unit tests for user service`
- `chore: update dependencies`        

This way, when I click the “Generate Commit Message” button, GitHub Copilot produces a message summarizing the changes using our style. This will keep our Git history clean and readable.

4. Reference the docs in the settings?file

To tie it all together, I add the path of the markdown files in the settings.json. Here is my configuration:

{
    "github.copilot.chat.codeGeneration.instructions": [
        {
            "file": "docs/code-style.md"https:// import instructions from file `code-style.md`
        }
    ],
    "github.copilot.chat.commitMessageGeneration.instructions ": [
        {
            "file": "docs/commit-message.md"https:// import instructions from file `commit-message.md`
        }
    ]
}        

With this setup, my code and commit messages automatically align with my standards. This simple change makes a huge difference in maintaining consistency throughout my projects.

Best Practices and Personal?Tips

Over time, I’ve learned that the key to getting the most out of custom instructions is to keep them simple and iterative. Start with the basics, then refine as you notice what works and what doesn’t.

By placing your custom instruction files in your repository, you ensure that everyone on your team is on the same page and speaking the same coding language.

I recorded a quick video that shows precisely what I describe in this blog—check it out below.

Conclusion

Custom instructions for GitHub Copilot have sped up my workflow. They allow me to write cleaner code and generate commit messages that communicate the story behind my changes.

You can find the Github Copilot custom instructions documentation in the Visual Studio Code docs.

If you haven’t explored this feature yet, I encourage you to do so. You might be surprised at how much time you can save and how consistent your project can become. I’d love to hear about your experiences with custom instructions.

Comment below, share your custom rules or give this post a thumbs up if you find it helpful. Let’s make coding a little more personal and a lot more productive!

Happy coding?—?and committing!