Maximizing VS Code Copilot Customization for Modern TypeScript Development

Have you ever wished your AI coding assistant truly understood your project's architecture, coding standards, and tech stack? 🤔 With GitHub Copilot's customization features in VS Code, you can transform this AI tool from a generic coding assistant into a teammate that intimately knows your codebase. This guide will walk you through optimizing Copilot for modern TypeScript development, helping you boost productivity and code quality.

Understanding Copilot Customization Options

GitHub Copilot in VS Code offers three powerful ways to customize your experience:

1. Repository instructions (.github/copilot-instructions.md)
2. Instruction files (user and workspace .instructions.md)
3. Prompt files (user and workspace .prompt.md)

Each serves a unique purpose in your development workflow. Let's explore how to set these up and use them effectively.

Setting Up Your Customization Environment

Before diving into specific customization methods, you'll need to enable these features in VS Code:

// settings.json
{
  "github.copilot.chat.codeGeneration.useInstructionFiles": true,
  "chat.promptFiles": true,
  "chat.instructionsFilesLocations": [".github/instructions"],
  "chat.promptFilesLocations": [".github/prompts"]
}

These settings tell VS Code to use your custom instructions and where to find your prompt files.

Master File: .github/copilot-instructions.md

The .github/copilot-instructions.md file is your primary customization tool. It automatically attaches to every Copilot Chat request in your workspace.

Creating Your First Repository Instructions

1. Create a .github folder at your project root
2. Add a copilot-instructions.md file inside it
3. Fill it with details about your project

Here's an example tailored for TypeScript/React/Next.js development:

# Project Instructions for Copilot

## Tech Stack
- TypeScript 5.x
- React 18.x with functional components and hooks
- Next.js 14 with App Router
- Tailwind CSS with shadcnUI components
- MongoDB for database

## Coding Standards
- Use TypeScript's strict mode
- Follow functional programming principles
- Components should be modular and reusable
- Use camelCase for variables and functions
- Use PascalCase for components and interfaces
- Prefer arrow functions over function declarations
- Always specify return types for functions
- Use Tailwind utility classes for styling

## Project Structure
- app/: Next.js App Router pages
- components/: Reusable React components
- lib/: Utility functions and shared logic
- types/: TypeScript interface definitions
- styles/: Global styles and Tailwind configuration
- the project uses `bun` as the package manager, so you can install the dependencies using the following command: `bun add`

## Important Files
- [tailwind.config.js](../tailwind.config.js): Configuration for Tailwind CSS.
- [tsconfig.json](../tsconfig.json): TypeScript configuration.
- [package.json](../package.json): Project dependencies and scripts.
- [components.json](../components.json): Configuration for UI components.
- [.prettierrc.js](../.prettierrc.js): Prettier configuration.

This file helps Copilot understand your project context, leading to more accurate suggestions.

Instruction Files: Targeted Guidance

While the repository instructions apply globally, instruction files let you target specific files or scenarios. You can create user-level instructions (available across all workspaces) or workspace instructions (specific to the current project).

Creating a Workspace Instruction File

1. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
2. Type "Chat: New Instruction File" and select it
3. Choose a location and name for your file

Here's an example for TypeScript components:

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

# TypeScript Component Instructions

When writing or modifying TypeScript components:

1. Always use functional components with React hooks
2. Include proper type definitions for props using interfaces
3. Export interfaces alongside components
4. Use destructured props with default values where appropriate
5. Follow this component structure:
   - Import statements
   - Interface definitions
   - Component function
   - Helper functions
6. For shadcnUI components, follow their usage patterns and extend when needed

The applyTo property ensures these instructions only apply to TypeScript and TSX files.

Prompt Files: Reusable AI Commands

Prompt files contain standalone prompts that you can reuse for common tasks. They're perfect for standardizing code generation tasks.

Creating a Workspace Prompt File

1. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
2. Type "Chat: New Prompt File" and select it
3. Choose a location and name for your file with the .prompt.md extension

Here's an example for generating React form components:

---
mode: 'agent'
tools: ['codebase', 'context7']
description: 'Generate a new React form component'
---

# React Form Generator

Create a new React form component with the following specifications:
- Use TypeScript and React hooks
- Include form validation with react-hook-form
- Use shadcnUI components for inputs
- Style with Tailwind CSS
- Add proper accessibility attributes
- Include error handling and loading states
- Follow our project structure and coding standards

Use context7 tool for the latest documentation of react-hook-form , shadcnUI, and Tailwind CSS(version 4)

The form should handle the following fields:
${input:fields}

The form submission should call this API endpoint:
${input:endpoint}

The mode: 'agent' setting tells Copilot to work autonomously, planning steps and making edits to implement your request.

Using Your Custom Prompts

Now that you've set up your customization files, let's see how to use them:

Running a Prompt File

1. Press Cmd+P (Mac) or Ctrl+P (Windows/Linux)
2. Type >Chat: Run Prompt
3. Select your prompt file from the list

Alternatively, you can:

• Type / followed by your prompt name in the Chat view
• Open the prompt file and click the play button in the editor

Verifying Instruction Usage

Custom instructions aren't directly visible in the Chat view, but you can verify they're being used by checking the References list in a Copilot response. If your instructions were included, you'll see the instruction file listed as a reference.

Practical Strategies for Different Scenarios

To maximize your productivity with Copilot customization:

1. For project-wide standards: Use .github/copilot-instructions.md to define coding styles, architecture, and tech stack details
2. For language-specific patterns: Create instruction files with applyTo properties targeting specific file extensions
3. For repetitive tasks: Build prompt files for common operations like component generation or test creation
4. For complex features: Use agent mode in prompt files to let Copilot work autonomously

Advanced Example: Full-Stack Form Creation

Let's see a more advanced prompt file that leverages Copilot's agent capabilities:

---
mode: 'agent'
tools: ['codebase']
description: 'Generate a full-stack form component'
---

# Full-Stack Form Generator

Create a complete form implementation including:

1. React component with TypeScript using shadcnUI and Tailwind
2. Form validation schema with zod
3. API route in Next.js App Router to process the submission
4. MongoDB schema and connection handling
5. Error handling and success feedback

The form should collect the following information:
${input:formFields}

After generating the code, make sure it follows our project structure:
- Place the form component in components/forms/
- Place the API route in app/api/
- Place the validation schema in lib/validations/
- Place the MongoDB schema in lib/models/

Test the implementation by:
1. Creating the necessary files
2. Ensuring it compiles without errors
3. Verifying API route functionality

Conclusion

Customizing GitHub Copilot in VS Code transforms it from a general-purpose AI assistant into a specialized teammate that understands your project's unique requirements. By strategically using repository instructions, targeted instruction files, and reusable prompt files, you can dramatically improve Copilot's accuracy and usefulness for your TypeScript development.

The key is to view Copilot not just as a tool for writing code, but as a collaborative partner that needs context to perform at its best. The time invested in creating good customization files pays dividends in development speed, code quality, and consistency.

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

References

• GitHub Docs - Adding repository custom instructions for GitHub Copilot
• VS Code Docs - Customize chat responses in VS Code
• GitHub Blog - Copilot ask, edit, and agent modes
• VS Code Blog - Context is all you need

Please share this article with your team and let me know your thoughts! What customization strategies have worked best for you? I'd love to hear about your experiences with Copilot in your TypeScript projects.