Maximizing VS Code Copilot Customization for Modern TypeScript Development

With the latest GitHub Copilot customization features in VS Code, you can turn Copilot into a true coding partner—one that understands your TypeScript architecture, coding standards, and even your team’s unique commit message style. This guide covers everything you need to know about customizing Copilot for modern TypeScript development, including repository-wide instructions, instruction files, prompt files, commit message prompts, and how to set them up globally or per-project.

Why Customize Copilot for TypeScript?

• Enforce your preferred React/TypeScript patterns
• Standardize commit messages
• Automate repetitive workflows and code scaffolding
• Share best practices across teams and projects

Developers using customized Copilot setups report up to 40% faster feature delivery and 25% fewer bugs.

The Four Pillars of Copilot Customization

1. Repository-Wide Instructions: High-level project context and coding guidelines in .github/copilot-instructions.md.
2. Instruction Files: Define coding standards and best practices for specific file types or patterns.
3. Prompt Files: Create reusable, interactive prompts for common coding tasks or agent workflows.
4. Commit Message Prompts: Control the structure and content of AI-generated commit messages.

Repository-Wide Instructions:

The infamous copilot-instructions.md file.

Before diving into file-specific customization, start by defining repository-wide guidelines using .github/copilot-instructions.md. This file provides Copilot with high-level context about your project, tech stack, and coding standards, ensuring suggestions are always aligned with your overall architecture and best practices.

Purpose:

• Automatically apply project-wide context to Copilot suggestions, ask, edit and agent modes.
• Provide a baseline for Copilot to understand your project’s structure and coding standards.
• Reference key configuration files (e.g., gatsby-config.ts, tailwind.config.js, tsconfig.json)
• Summarize global coding guidelines and performance/styling standards
• Point to more detailed instruction files for TypeScript, React, etc.

Example: .github/copilot-instructions.md

# Coding Guidelines

## Introduction
- This project is a portfolio website built with GatsbyJS for Sanyam Arya. It utilizes TypeScript, functional components, and functional programming principles.
- The project uses `bun` as the package manager.
- Key files: gatsby-config.ts, tailwind.config.js, tsconfig.json, postcss.config.js, package.json, gatsby-node.ts, gatsby-browser.js, components.json, .prettierrc.js, global.css

## Coding Guidelines
- Use a consistent project structure for components, hooks, services, types, utilities, and styling.
- Enable strict type-checking in tsconfig.json.
- For TypeScript and React specifics, see `Typescript.instructions.md` and `React_Typescript.instructions.md`.
- Optimize images, use Tailwind CSS, shadcnUI, lucide-react icons, and implement form validation with react-hook-form and zodResolver.
- Use SEO, PWA, and analytics plugins as configured.

How It Works:

• Copilot reads .github/copilot-instructions.md for high-level context before applying file-specific rules.
• This file complements .github/instructions/ and .github/prompts/ by providing a project-wide baseline.

Best Practice:

• Keep .github/copilot-instructions.md up to date as your project evolves.
• Reference your detailed instruction and prompt files from this document for clarity.

How to Set Up Copilot Customization

1. Workspace (Project) Customization

• Instruction Files:
  • Store in .github/instructions/
  • Example: .github/instructions/React_Typescript.instructions.md, .github/instructions/Tests.instructions.md
• Prompt Files:
  • Store in .github/prompts/
  • Example: .github/prompts/refactoring-plan.prompt.md, .github/prompts/fullstack-form.prompt.md
• VS Code Settings:

  {
    "chat.instructionsFilesLocations": [".github/instructions"],
    "chat.promptFilesLocations": [".github/prompts"]
  }

• Version Control:
  • Commit .github/instructions/ and .github/prompts/ to share with your team.

2. Global (User-wide) Customization

• Instruction & Prompt Files:
  • Store both in ~/Library/Application Support/Code/User/prompts (macOS; see VS Code docs for Windows/Linux path)
  • Both instruction and prompt files go in this directory
• Use Case:
  • Personal or organization-wide standards and prompts available in every workspace.

Note: Copilot merges global and workspace prompt/instruction files, so you get both your personal and project rules/prompts.

Instruction Files: Teaching Copilot Your Coding Standards

Instruction files are Markdown files that define coding guidelines and best practices for specific file types or patterns. Copilot uses these to align its suggestions with your standards.

Example: TypeScript & React Instruction File

---
applyTo: "**/*.tsx"
---

# React with TypeScript Coding Style Guide
- Always use functional components
- Use TypeScript interfaces for props
- Prefer arrow functions and hooks
- Specify return types for functions
- Use camelCase for variables, PascalCase for components

How to Create and Use Instruction Files:

1. Open the Command Palette: Ctrl+Shift+P
2. Run Chat: New Instructions File
3. Save in .github/instructions/ (for workspace) or ~/Library/Application Support/Code/User/prompts (for global)
4. Add your rules and patterns using the applyTo field

Prompt Files: Automating Common Workflows with AI

Prompt files are reusable templates for common development tasks. Use them to automate code generation, refactoring, or even multi-step agent workflows.

Example: Refactoring Plan Prompt

---
mode: "ask"
description: "Make a plan to refactor the codebase to improve readability, maintainability, and cyclomatic complexity."
---

Do you understand how the codebase is structured? I would like to make it cleaner and easy to read and understand by developers as well as for future maintainers.
- Analyze the codebase
- Focus on code structure, readability, testability, maintainability, and performance
- Reduce cyclomatic complexity
- Provide documentation and consistency

Prompt files can be run via the Command Palette or directly from the Copilot Chat sidebar. Save them in .github/prompts/ (for workspace) or ~/Library/Application Support/Code/User/prompts (for global).

Commit Message Customization: Consistency Without Effort

Default Copilot commit messages might not match your team’s standards. With commit message prompts, you can ensure every commit is meaningful and consistent.

How to Customize:

• Add instructions to your settings.json:

   "github.copilot.chat.commitMessageGeneration.instructions": [
    {
      "text": "Generate a concise, informative commit message using the Conventional Commit format with a Gitmoji: <gitmoji> <type>(<scope>): <subject>\n\n<body>\n\n<footer>"
    },
    {
      "text": "Types: feat, fix, docs, style, refactor, perf, test, chore. Use these to indicate the kind of change."
    },
    {
      "text": "Scope: Specify the part of the codebase affected (e.g., api, ui, auth).  Omit if the change is broad or system-wide."
    },
    {
      "text": "Subject: Write a short, imperative mood description of the change (e.g., 'Add feature', not 'Added feature'). Keep it under 50 characters.  Do not end with a period. Capitalize the first word."
    },
    {
      "text": "Body: Provide more detailed explanatory text, if necessary. Wrap at 72 characters. Explain what and why, not how. Allways use bullets for multiple points."
    },
    {
      "text": "Footer: Reference any issue numbers with a # prefix (e.g., Closes #123).  For breaking changes, start with BREAKING CHANGE: followed by an explanation."
    },
    {
      "text": "Use imperative mood in the subject line (e.g., Add, not Added)."
    },
    {
      "text": "Add a relevant Gitmoji at the beginning of the commit message to visually represent the commit type."
    }
  ],

Example Output:

🚀 feat(ui): Add new user profile page

• Adds a form for updating user details
• Implements validation with Zod

Closes #456

Example: Customizing Copilot for a TypeScript Project

1. Create Repository Instruction and Prompt Directories
   • .github/instructions/ for instruction files
   • .github/prompts/ for prompt files
2. Add File-Specific Instruction Files
   • .github/instructions/React_Typescript.instructions.md (for **/*.tsx)
   • .github/instructions/Tests.instructions.md (for **/*.spec.ts)
3. Save Prompt Files for Common Tasks
   • .github/prompts/refactoring-plan.prompt.md
   • .github/prompts/fullstack-form.prompt.md
4. Customize Commit Message Prompts
   • .github/instructions/commit-message.instructions.md
5. Set VS Code Settings
   • Reference both .github/instructions/ and .github/prompts/ in your settings

Best Practices

• Use global prompt/instruction files for personal or organization-wide standards and workflows.
• Use workspace prompt/instruction files for project- or team-specific rules.
• Reference both in your VS Code settings for maximum flexibility.
• Share workspace .github/instructions/ and .github/prompts/ via version control for team consistency.
• Restart VS Code if Copilot ignores your instructions.

How Copilot Customization Works (Diagram)

Recent Developments in Copilot Customization

• Agent Mode Improvements: Smarter, faster multi-file edits and automated workflows.
• Prompt/Instruction File Support: Now supports Markdown, can be shared in teams.
• Commit Message & PR Description Customization: Fine-grained control via settings or files.
• TypeScript Context Awareness: Copilot now better understands TypeScript projects, improving suggestions for inline completions and /fix commands.

Frequently Asked Questions

• Can I use multiple instruction files?
  Yes! You can target different file types or directories with applyTo patterns.
• How do I share customizations with my team?
  Commit your .github/prompts/ folder to version control.
• What if Copilot ignores my instructions?
  Double-check your settings, file locations, and applyTo patterns. Restart VS Code if needed.

Conclusion: Your Path to Copilot Mastery

Customizing VS Code Copilot for TypeScript development unlocks a new level of productivity, consistency, and code quality. By leveraging prompt and instruction files—globally and per-project—you turn Copilot into a true coding partner.

"The difference between a good developer and a great one isn't just writing code—it's optimizing your entire workflow." — Anonymous

Ready to take your TypeScript projects to the next level? 🚀 Share this article with your team, try out these customization strategies, and let me know your experiences. Hit the contact button below to connect and discuss your Copilot journey!

References

• Customize chat responses in VS Code
• Gain control over commit messages generated by GitHub Copilot
• Tips and tricks for Copilot in VS Code
• GitHub Copilot in VS Code April release (v1.100)

Please share this article with your team and let me know your thoughts—hit the contact button below to get in touch!