GitHub Copilot in WebStorm: the best configuration to supercharge your day

WebStorm is my preferred IDE for working with JavaScript and TypeScript, and GitHub Copilot has become an essential part of my workflow. But just installing the plugin and using it on autopilot leaves a lot on the table. In this guide I’ll show you the configuration I use, with the shortcuts that save the most time and the options that keep Copilot from fighting with WebStorm’s native autocomplete.

Before you start: requirements

To follow this tutorial, you’ll need:

• WebStorm 2024.3.6 or later (I recommend 2026.1, which brought the supercharged TypeScript engine)
• A GitHub account with an active Copilot license (Individual, Business, or Enterprise)
• Internet connection (Copilot runs in the cloud)
• Java 17+ bundled with WebStorm itself (comes by default)

If you’re still on an old version, update before continuing. Versions below 2024.3.6 have a known conflict between Copilot and the native Full Line Code Completion, and Tab ends up fighting between the two.

Step 1: install the official plugin

1. Open WebStorm
2. Go to Settings (Cmd + , on Mac / Ctrl + Alt + S on Windows/Linux)
3. Navigate to Plugins
4. Click the Marketplace tab
5. Type GitHub Copilot in the search
6. Click Install on the official GitHub plugin
7. Restart WebStorm when prompted

In some versions the GitHub Copilot Chat plugin comes separately. If that’s the case, install it too: it’s the one that delivers the chat window, inline chat, and Agent Mode, which are the most powerful parts of Copilot today.

Step 2: log in with your GitHub account

After WebStorm restarts, you’ll see the Copilot icon in the bottom bar.

1. Click the Copilot icon in the bottom right corner
2. Choose Login to GitHub
3. A window will show a device code: copy it
4. WebStorm opens your browser at github.com/login/device
5. Paste the device code and authorize access
6. Come back to WebStorm and wait for confirmation

When the icon turns green, Copilot is active.

Step 3: resolve the conflict with Full Line Code Completion

This is the step that makes the biggest difference and almost nobody mentions. WebStorm has a native, local full-line autocomplete that competes with Copilot for the same key (Tab). If you leave both enabled without adjusting anything, Tab sometimes accepts one, sometimes the other, and you lose confidence in the flow.

You have two good options.

Option A (my favorite): disable Full Line Code Completion

1. Settings > Editor > General > Inline Completion
2. Uncheck Enable local full line completion suggestions
3. Apply and close

This way Tab always accepts the Copilot suggestion, no doubt about it.

Option B: keep both, but separate the keys

If you like Full Line because it’s instant and works offline, you can keep both:

1. Settings > Keymap
2. Look for Insert Inline Completion (this is the native WebStorm one)
3. Remap it to a non-conflicting shortcut, like Cmd + Shift + ] (Mac) / Ctrl + Shift + ] (Windows/Linux)
4. Leave Apply completions to Editor (Copilot) on Tab

Step 4: fine-tuning the plugin

Go to Settings > Tools > GitHub Copilot > Completions and adjust:

Further down, in the Languages section, you can enable/disable per language. My recommendation:

• Enabled: JavaScript, TypeScript, JSX, TSX, Vue, Astro, HTML, CSS, SCSS, JSON, Markdown, YAML, Shell
• Disabled: lockfile files (package-lock.json, yarn.lock, pnpm-lock.yaml): Copilot only gets in the way here

If you’d rather edit the github-copilot.xml file directly, you can use wildcards. But the GUI handles 99% of cases.

Step 5: enable Copilot Chat and Agent Mode

Chat is where half the productivity lives. Open it with Ctrl + Shift + C or via the right sidebar (Copilot icon).

Inside the chat window you’ll see three modes:

• Ask: answers questions and explains code (great for understanding legacy)
• Edit: makes targeted changes in files you specify
• Agent: Copilot decides which files to touch and executes entire tasks

To enable Agent Mode:

1. Settings > Tools > GitHub Copilot > Chat
2. Check Enable Agent Mode
3. Check Enable Agent Skills (still in preview, but already worth it)
4. Choose the default model (Claude Sonnet and GPT are both great for front-end)

Step 6: custom instructions, the secret to stop Copilot from hallucinating

Custom instructions are a file Copilot reads before every response. You write your project’s rules there, the libraries it uses, the coding patterns, and Copilot actually starts following them.

Configuring it for the project

1. In your project root, create the .github/ folder (if it doesn’t exist)
2. Inside it, create the copilot-instructions.md file
3. Put your project’s rules, for example:

# Copilot Instructions

This project is a Hugo site with posts in Portuguese, English, and Spanish.

## Stack
- Hugo (static site generator)
- SCSS with Dart Sass
- Vanilla JavaScript (no frameworks)
- WebP-optimized images

## Coding standards
- 2-space indentation
- Single quotes for strings in JS
- kebab-case file names

Copilot will read this every time you open the chat or request a suggestion via Agent Mode.

Configuring it globally

If you want rules that apply to all projects:

1. Settings > Tools > GitHub Copilot > Customizations
2. In the Global Custom Instructions section, paste your rules
3. Apply

AGENTS.md and CLAUDE.md

Starting in 2026.2, Copilot also reads nested AGENTS.md and CLAUDE.md files in your project. If you’re already using Claude Code or Cursor, reuse the same file. Enable it in Settings > Tools > GitHub Copilot > Customizations > Enable nested AGENTS.md and CLAUDE.md.

Essential shortcuts (the ones I use every day)

Inline suggestions

Important for ABNT2 keyboard users: the official Copilot defaults are Option + ], Option + [, and Option + \, but on Brazilian keyboards those combinations produce typographic characters («, », and others) and never reach Copilot. The fix is to add Shift to the combo (making it Shift + Option + ...), which is what I used in the table above. On a US keyboard, you can use the defaults without the extra Shift.

Inline chat (the most powerful one)

Inline chat replaces 90% of Copy/Paste to ChatGPT. You select a block of code, hit Ctrl + Shift + I, type “convert this to strict TypeScript” and you’re done.

Full chat

My custom shortcuts

It’s worth going into Settings > Keymap and searching for copilot. The plugin only exposes a handful of bindable actions (copilot.chat.show, copilot.chat.inline, copilot.openCopilot, copilot.applyInlays, copilot.cycleNextInlays, copilot.cyclePrevInlays, and copilot.requestCompletions), but they cover 100% of what can actually be sped up. The other commands (explain, fix, tests, doc) are slash commands you type inside the chat, not keybindings.

What I keep in my keymap:

If any shortcut is already in use, WebStorm warns you and you can choose whether to remove the old one. Cmd + Shift + K normally opens Push… in Git: I don’t use Push via keyboard, so I freed that up for Copilot, but if you do, pick another combo.

Once the chat is open, slash commands handle the rest:

• /explain explains the selected code
• /fix tries to fix errors reported by TS or ESLint
• /tests generates unit tests
• /doc generates JSDoc documentation
• /simplify proposes a shorter version

Tricks that multiply productivity

Comments become prompts

Write a clear comment above a function and Copilot generates the implementation. For example:

// Returns the list of posts published in the last 30 days,
// sorted by date descending, with a max of 10 items.
// Uses the internal API in services/posts.ts
function recentPosts(): Promise<Post[]> {
  // Copilot fills in from here
}

The more specific the comment (including paths to relevant files), the better the result.

Use # to reference files in chat

Inside the chat, type #package.json or #services/posts.ts and Copilot loads the file into context. Saves you from describing the structure manually.

Agent Mode for large refactors

When you need to rename a function across 20 files, change the signature of a hook, or migrate from one library to another, open the chat in Agent Mode, describe the goal, and let it propose the changes. You review file by file before accepting.

Inline chat for self-code-review

Before opening a PR, select a method’s diff, hit Ctrl + Shift + I, and ask “review this code looking for edge cases and missing tests”. Catches a lot of silly stuff before it hits GitHub.

Slash commands inside chat

Inside inline chat or the normal chat, type:

• /tests: generates unit tests for the selected code
• /doc: generates JSDoc documentation
• /fix: tries to fix errors reported by TS or ESLint
• /explain: explains the selected code
• /simplify: proposes a shorter version

Fine-tuning by project type

React / Next.js

• Enable the official Copilot Chat plugin for hook-specific suggestions
• In copilot-instructions.md, specify whether you use App Router or Pages Router
• Mention if you’re using Server Components (changes suggestions a lot)

Vue / Nuxt

• WebStorm 2026.1 integrates the updated @vue/typescript-plugin
• If you’re on Nuxt, mention which version in custom instructions
• Disable Copilot inside pure <style> blocks if you find it hallucinating CSS too much

Astro

• Mention in custom instructions whether it’s SSG or SSR
• Enable Copilot for .astro files (usually needs to be manually turned on)

Common issues and solutions

Tab doesn’t accept suggestions

Almost always Full Line Code Completion fighting. Go back to Step 3 and apply one of the two options.

Copilot is slow

1. Check your connection (the plugin talks to GitHub’s API on every keystroke)
2. Settings > Tools > GitHub Copilot > Completions, uncheck Show completions automatically and use Shift + Option + \ (Mac) / Shift + Alt + \ (Windows/Linux) on demand
3. Make sure you don’t have 30 tabs open fighting for the Language Server

The Copilot icon is red

1. Click it to see the error
2. If it says Not signed in, log in again
3. If it says Network error, check proxy/VPN. In Settings > Appearance & Behavior > System Settings > HTTP Proxy, verify the configuration
4. If it says Quota exceeded, you hit the monthly limit of the Free or Individual plan

Copilot suggests old code

Update the plugin and restart. The newer versions switched the default model and quality has improved a lot.

Chat doesn’t open

The GitHub Copilot Chat plugin might not be installed. Go back to Step 1 and install the chat plugin separately.

Final checklist

After following the tutorial, check that:

• GitHub Copilot plugin installed and up to date
• GitHub Copilot Chat plugin installed
• Logged in with the correct GitHub account
• Full Line Code Completion disabled (or remapped)
• Copilot enabled for your project’s languages
• Agent Mode enabled in Settings
• .github/copilot-instructions.md file created
• Custom shortcuts configured in Keymap
• Green icon in the bottom bar

With that locked in, you’ve got WebStorm running Copilot in the most productive way possible. The next step is just practicing. Within a week you’ll be writing comments that generate entire functions and using inline chat to refactor without leaving the keyboard.

And if you also write Go, have you seen my other guide? GitHub Copilot in GoLand: the best configuration to write Go faster.