[AmazonTranslate] VS CodeのCopilotとCopilot Chatの機能と活用方法

[AmazonTranslate] VS CodeのCopilotとCopilot Chatの機能と活用方法

<p class="code-line" data-line="0">I have introduced VS Code&#39;s Copilot and Copilot Chat, and I&#39;ve been assigned a Business Plan sheet, but since I haven&#39;t been able to make much use of it, I investigated what kind of functions they have.</p>
<p class="code-line" data-line="2">Copilot also includes Copilot that can be used on GitHub and Copilot that can be used from CLI, but here we focus on Copilot, which can be used from VS Code.</p>
<p class="code-line" data-line="4"><a href="https://marketplace.visualstudio.com/items/?itemName=GitHub.copilot-chat" target="_blank" rel="nofollow noopener noreferrer">Also, it is assumed that the extensions <a href="https://marketplace.visualstudio.com/items/?itemName=GitHub.copilot" target="_blank" rel="nofollow noopener noreferrer">GitHub Copilot and Copilot</a> Chat are pre-installed.</a></p>
<h2 id="code-completion" class="code-line" data-line="6">Code completion</h2>
<p class="code-line" data-line="8"><a href="https://code.visualstudio.com/docs/copilot/ai-powered-suggestions" target="_blank" rel="noreferrer noopener nofollow">https://code.visualstudio.com/docs/copilot/ai-powered-suggestions</a> <a style="display: none;" href="https://code.visualstudio.com/docs/copilot/ai-powered-suggestions" target="_blank" rel="nofollow noopener noreferrer">https://code.visualstudio.com/docs/copilot/ai-powered-suggestions</a></p>
<p class="code-line" data-line="10">You&#39;ll notice this as soon as you use it, and it&#39;s no problem even if you say it&#39;s a familiar feature.</p>
<p class="code-line" data-line="12"><img src="https://devio2024-media.developers.io/image/upload/v1744878319/2025/04/17/mm3qoi9fszifzy7f1sfq.gif"></p>
<p class="code-line" data-line="14">I can see other suggestions with <code>Control + Enter</code>, but I&#39;ve hardly used them myself.</p>
<p class="code-line" data-line="16"><img src="https://devio2024-media.developers.io/image/upload/v1744878340/2025/04/17/tyfdduhbimmj89wf4x7q.png"></p>
<p class="code-line" data-line="18">Also, a feature called Next Edit NES (NES) was added relatively recently. This is easy to understand because the next <a href="https://x.com/code/status/1887548027377697122" target="_blank" rel="nofollow noopener noreferrer">official X comes</a> with a video.</p>
<p class="code-line" data-line="20"><a href="https://x.com/code/status/1887548027377697122" target="_blank" rel="noreferrer noopener nofollow">https://x.com/code/status/1887548027377697122</a> <a style="display: none;" href="https://x.com/code/status/1887548027377697122" target="_blank" rel="nofollow noopener noreferrer">https://x.com/code/status/1887548027377697122</a></p>
<p class="code-line" data-line="22">You can easily add settings in the editor.</p>
<p class="code-line" data-line="24"><img src="https://devio2024-media.developers.io/image/upload/v1744878358/2025/04/17/ma9cgevr5tkjwuvys9x2.png"></p>
<p class="code-line" data-line="26">I&#39;ve enabled it for a while, but it hasn&#39;t worked very effectively within the range I&#39;ve tried, so I&#39;ve disabled it now.</p>
<table class="code-line" data-line="28">
<thead class="code-line" data-line="28">
<tr class="code-line" data-line="28">
<th>Item addition proposal</th>
<th>Spelling correction suggestions</th>
</tr>
</thead>
<tbody class="code-line" data-line="30">
<tr class="code-line" data-line="30">
<td><img src="https://devio2024-media.developers.io/image/upload/v1744878390/2025/04/17/b3st1pumq3bipfv3uwwe.png"></td>
<td><img src="https://devio2024-media.developers.io/image/upload/v1744878382/2025/04/17/ivpfngtztss3gi5ysx5h.png"></td>
</tr>
</tbody>
</table>
<p class="code-line" data-line="32">Examples of NES usage are also described in the VS Code official documentation, so if you tried it like yourself but it didn&#39;t work, so if you want to know usage examples, check the following link.</p>
<p class="code-line" data-line="34"><a href="https://code.visualstudio.com/docs/copilot/ai-powered-suggestions#_use-cases-for-next-edit-suggestions" target="_blank" rel="noreferrer noopener nofollow">https://code.visualstudio.com/docs/copilot/ai-powered-suggestions#_use-cases-for-next-edit-suggestions</a> <a style="display: none;" href="https://code.visualstudio.com/docs/copilot/ai-powered-suggestions#_use-cases-for-next-edit-suggestions" target="_blank" rel="nofollow noopener noreferrer"> </a>https://code.visualstudio.com/docs/copilot/ai-powered-suggestions#_use-cases-for-next-edit-suggestions</p>
<p class="code-line" data-line="36">Also, the model used for this <a href="https://docs.github.com/en/copilot/using-github-copilot/ai-models/changing-the-ai-model-for-copilot-code-completion" target="_blank" rel="nofollow noopener noreferrer">Code Completion uses GPT-4O Copilot by</a> default, but it can be changed. For business plans, Editor preview features must be enabled. However, in my environment, Editor preview features are effective, but at the time of writing, only GPT-4O was an option.</p>
<p class="code-line" data-line="38"><img src="https://devio2024-media.developers.io/image/upload/v1744883888/2025/04/17/vvroll663glekmyrztan.png"></p>
<h2 id="smart-actions" class="code-line" data-line="40">Smart actions</h2>
<p class="code-line" data-line="42"><a href="https://code.visualstudio.com/docs/copilot/copilot-smart-actions" target="_blank" rel="noreferrer noopener nofollow">https://code.visualstudio.com/docs/copilot/copilot-smart-actions</a> <a style="display: none;" href="https://code.visualstudio.com/docs/copilot/copilot-smart-actions" target="_blank" rel="nofollow noopener noreferrer">https://code.visualstudio.com/docs/copilot/copilot-smart-actions</a></p>
<h3 id="%E3%82%B3%E3%83%9F%E3%83%83%E3%83%88%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%81%AE%E7%94%9F%E6%88%90" class="code-line" data-line="44">Generating a commit message</h3>
<p class="code-line" data-line="46">This is also a familiar feature, but I think there are people who don&#39;t use it because the messages that are generated are in English.</p>
<p class="code-line" data-line="48"><img src="https://devio2024-media.developers.io/image/upload/v1744883907/2025/04/17/xbpurlodfgebnba7vht0.png"></p>
<p class="code-line" data-line="50">Translating this message into Japanese can be easily configured in the VS Code configuration file.</p>
<div class="code-block-container">
<pre class="language-json"><code>{
&quot;GitHub.copilot.chat.commitMessageGeneration.instructions”: [{“text”: “Please generate commit messages in Japanese&quot;}]}
 
 
 
 
 
</code></pre>
</div>
<p class="code-line" data-line="62">Alternatively, you can specify a file in Markdown format.</p>
<div class="code-block-container">
<pre class="language-json"><code>{
&quot;&quot;GitHub.copilot.chat.commitMessageGeneration.instructions”: [{“file”: “.copilot/settings/commit-message-generation.md&quot;}]}
 
 
 
 
 
</code></pre>
</div>
<h3 id="%E3%83%AA%E3%83%8D%E3%83%BC%E3%83%A0%E3%82%B7%E3%83%B3%E3%83%9C%E3%83%AB" class="code-line" data-line="74">rename symbol</h3>
<p class="code-line" data-line="76">This function is officially written as <a href="https://code.visualstudio.com/docs/copilot/copilot-smart-actions#_rename-symbols" target="_blank" rel="nofollow noopener noreferrer">Rename symbols</a>, and this is somewhat useful.</p>
<p class="code-line" data-line="78"><code>As a result of worrying about variable names, don&#39;t you do things like add <code>foo</code>, hoge, etc., and try to name them properly later?</code> <code>In such cases, select a variable name and press F2 to suggest correction candidates for the selected variable name.</code> It&#39;s not impossible even with Copilot Chat, but if the only purpose is to rename, this one is overwhelmingly easier.</p>
<p class="code-line" data-line="80"><img src="https://devio2024-media.developers.io/image/upload/v1744884032/2025/04/17/sbfwdszoxukivxdvv5zy.png"></p>
<h3 id="%E3%81%9D%E3%81%AE%E4%BB%96" class="code-line" data-line="82">others</h3>
<p class="code-line" data-line="84">The rest are similar functions, so I&#39;ll introduce them all at once. Basically, this is a function that comes up when you right-click and select Copilot.</p>
<p class="code-line" data-line="86"><img src="https://devio2024-media.developers.io/image/upload/v1744884057/2025/04/17/kxbszp6o4rcz2p4tmzm7.png"></p>
<table class="code-line" data-line="88">
<thead class="code-line" data-line="88">
<tr class="code-line" data-line="88">
<th>choices</th>
<th>commentary</th>
</tr>
</thead>
<tbody class="code-line" data-line="90">
<tr class="code-line" data-line="90">
<td>explain</td>
<td>Run <code>@workspace</code> /explain in Copilot Chat.</td>
</tr>
<tr class="code-line" data-line="91">
<td>FIX</td>
<td><code>Run /fix inline in Copilot Chat.</code></td>
</tr>
<tr class="code-line" data-line="92">
<td><a href="https://code.visualstudio.com/docs/copilot/copilot-smart-actions#_review-code" target="_blank" rel="nofollow noopener noreferrer">Review and comment</a></td>
<td>They will do a code review for a range of choices. Custom instructions are possible.</td>
</tr>
<tr class="code-line" data-line="93">
<td><a href="https://code.visualstudio.com/docs/copilot/copilot-smart-actions#_generate-documentation" target="_blank" rel="nofollow noopener noreferrer">Generate Docs</a></td>
<td>It generates documentation like JSDoc, etc. However, custom instructions are not possible.</td>
</tr>
<tr class="code-line" data-line="94">
<td><a href="https://code.visualstudio.com/docs/copilot/copilot-smart-actions#_generate-tests" target="_blank" rel="nofollow noopener noreferrer">Generate Tests</a></td>
<td>Create tests for the selected code. Custom instructions are possible.</td>
</tr>
</tbody>
</table>
<p class="code-line" data-line="96">Review and Comment can be reviewed <a href="https://marketplace.visualstudio.com/items/?itemName=GitHub.vscode-pull-request-github" target="_blank" rel="nofollow noopener noreferrer">on a PR basis if the Github extension is included</a>.</p>
<p class="code-line" data-line="99"><img src="https://devio2024-media.developers.io/image/upload/v1744884071/2025/04/17/ntxcnclwiptcwl3txrps.png"></p>
<h2 id="copilot-chat" class="code-line" data-line="101">Copilot Chat</h2>
<h3 id="custom-instructions" class="code-line" data-line="103">Custom instructions</h3>
<p class="code-line" data-line="105"><a href="https://code.visualstudio.com/docs/copilot/copilot-customization#_define-codegeneration-custom-instructions" target="_blank" rel="noreferrer noopener nofollow">https://code.visualstudio.com/docs/copilot/copilot-customization#_define-codegeneration-custom-instructions</a> <a style="display: none;" href="https://code.visualstudio.com/docs/copilot/copilot-customization#_define-codegeneration-custom-instructions" target="_blank" rel="nofollow noopener noreferrer"> </a>https://code.visualstudio.com/docs/copilot/copilot-customization#_define-codegeneration-custom-instructions</p>
<p class="code-line" data-line="107">You can set additional contexts to be added each time. <code>.GitHub/copilot-instructions.md</code> is the default configuration file, but multiple settings can be made as follows.</p>
<div class="code-block-container">
<pre class="language-json"><code>{
&quot;&quot;GitHub.copilot.chat.codegeneration.instructions”: [{“file”: “.gitub/copilot-instructions.md”},
{
“file”: “.copilot/rules/01”
 
 
-memory-bank.md”
},
{
“file”: “.copilot/rules/02-base.md”}, {“file”: “.copilot/rules/03-git.md”
},
{“file”:”
 
 
 
.copilot/rules/04-coding.md</code>”}],}
 
 
 
</pre>
</div>
<p class="code-line" data-line="131">They can also be split like Cline and other tools, so it would be easier to manage if you split them in Copilot Chat as well. <a href="https://dev.classmethod.jp/articles/cline-context-model-guide/" target="_blank" rel="nofollow noopener noreferrer">This example has taken Cline&#39;s settings as is</a>.</p>
<p class="code-line" data-line="133">I&#39;ve confirmed the behavior of <code>loading it.gitub/copilot-instructions.md</code> without specifying it, but I&#39;ve specified it just in case.</p>
<h3 id="prompt-files" class="code-line" data-line="135">Prompt files</h3>
<p class="code-line" data-line="137"><a href="https://code.visualstudio.com/docs/copilot/copilot-customization#_reusable-prompt-files-experimental" target="_blank" rel="noreferrer noopener nofollow">https://code.visualstudio.com/docs/copilot/copilot-customization#_reusable-prompt-files-experimental</a> <a style="display: none;" href="https://code.visualstudio.com/docs/copilot/copilot-customization#_reusable-prompt-files-experimental" target="_blank" rel="nofollow noopener noreferrer"> </a>https://code.visualstudio.com/docs/copilot/copilot-customization#_reusable-prompt-files-experimental</p>
<p class="code-line" data-line="139">Markdown files in <code>the.gitub/suggestions</code> directory can be treated as reusable prompt files.</p>
<p class="code-line" data-line="141">You can use it by selecting Prompt from Add Context on the UI and selecting the prompt file you want to use.</p>
<h3 id="context%E3%81%AE%E8%BF%BD%E5%8A%A0" class="code-line" data-line="143">Adding Context</h3>
<p class="code-line" data-line="145"><a href="https://code.visualstudio.com/docs/copilot/chat/copilot-chat-context" target="_blank" rel="noreferrer noopener nofollow">https://code.visualstudio.com/docs/copilot/chat/copilot-chat-context</a> <a style="display: none;" href="https://code.visualstudio.com/docs/copilot/chat/copilot-chat-context" target="_blank" rel="nofollow noopener noreferrer">https://code.visualstudio.com/docs/copilot/chat/copilot-chat-context</a></p>
<p class="code-line" data-line="147">Context can also be added using <a href="https://docs.github.com/en/copilot/using-github-copilot/copilot-chat/asking-github-copilot-questions-in-your-ide#chat-variables" target="_blank" rel="nofollow noopener noreferrer">Chat variables</a> or directly from the UI.</p>
<p class="code-line" data-line="149">The active file currently being viewed is automatically added to the context, but if not needed, clicking the eye icon excludes it.</p>
<p class="code-line" data-line="151">If you try to send it directly from the UI, you can check what kind of things can be passed as context as a list, which is convenient.</p>
<p class="code-line" data-line="153"><img src="https://devio2024-media.developers.io/image/upload/v1744884087/2025/04/17/qlbtbs0cbdizzygj54sq.png"></p>
<p class="code-line" data-line="155">There are no images in this list, but if you want to send an image, you can hand it over by dragging the image into the chat frame.</p>
<p class="code-line" data-line="157"><code>Also, since Copilot can automatically find an appropriate file by enabling the function of <code>GitHub.copilot.chat.codesearch.enabled and adding #codebase, Copilot can automatically find an appropriate file</code>, so it seems good when you don&#39;t know which file is appropriate.</code></p>
<h3 id="chat-mode" class="code-line" data-line="159">Chat mode</h3>
<p class="code-line" data-line="161">Copilot Chat has 3 modes.</p>
<ul class="code-line" data-line="163">
<li class="code-line" data-line="163">Ask</li>
<li class="code-line" data-line="164">Edit</li>
<li class="code-line" data-line="165">agent</li>
</ul>
<p class="code-line" data-line="167">I&#39;ll take a look at each one.</p>
<h4 id="ask" class="code-line" data-line="169"><strong>Ask</strong></h4>
<p class="code-line" data-line="171"><a href="https://code.visualstudio.com/docs/copilot/chat/chat-ask-mode" target="_blank" rel="noreferrer noopener nofollow">https://code.visualstudio.com/docs/copilot/chat/chat-ask-mode</a> <a style="display: none;" href="https://code.visualstudio.com/docs/copilot/chat/chat-ask-mode" target="_blank" rel="nofollow noopener noreferrer">https://code.visualstudio.com/docs/copilot/chat/chat-ask-mode</a></p>
<p class="code-line" data-line="173">You can have contextual conversations. It depends on the instructions, but if you ask questions about implementation methods casually, I have the impression that they output specific code rather than designing together.</p>
<p class="code-line" data-line="175">Many keywords can be used in Ask mode.</p>
<table class="code-line" data-line="177">
<thead class="code-line" data-line="177">
<tr class="code-line" data-line="177">
<th>appellation</th>
<th>keyword</th>
<th>rubrics</th>
</tr>
</thead>
<tbody class="code-line" data-line="179">
<tr class="code-line" data-line="179">
<td><a href="https://docs.github.com/en/copilot/using-github-copilot/copilot-chat/asking-github-copilot-questions-in-your-ide#chat-participants" target="_blank" rel="nofollow noopener noreferrer">Chat discussions</a></td>
<td><code>@</code></td>
<td>Natural language reasoning is also possible, but by using this function, questions can be explicitly specified and narrowed down to a specific domain. You can add it with <a href="https://docs.github.com/en/copilot/building-copilot-extensions/about-building-copilot-extensions" target="_blank" rel="nofollow noopener noreferrer">Copilot Extensions</a>.</td>
</tr>
<tr class="code-line" data-line="180">
<td><a href="https://docs.github.com/en/copilot/using-github-copilot/copilot-chat/asking-github-copilot-questions-in-your-ide#slash-commands" target="_blank" rel="nofollow noopener noreferrer">Slash commands</a></td>
<td><code>/</code></td>
<td>Shortcuts for several instructions are possible.</td>
</tr>
<tr class="code-line" data-line="181">
<td><a href="https://docs.github.com/en/copilot/using-github-copilot/copilot-chat/asking-github-copilot-questions-in-your-ide#chat-variables" target="_blank" rel="nofollow noopener noreferrer">Chat variables</a></td>
<td><code>#</code></td>
<td>It is possible to add specific contexts that you specify.</td>
</tr>
</tbody>
</table>
<p class="code-line" data-line="183">There is an official cheat sheet for these keywords, so if you want to check the list, please use one of the official documents for each.</p>
<ul class="code-line" data-line="185">
<li class="code-line" data-line="185"><a href="https://docs.github.com/en/copilot/using-github-copilot/copilot-chat/github-copilot-chat-cheat-sheet" target="_blank" rel="nofollow noopener noreferrer">GitHub Copilot Chat cheat sheet (official GitHub documentation)</a></li>
<li class="code-line" data-line="186"><a href="https://code.visualstudio.com/docs/copilot/reference/copilot-vscode-features" target="_blank" rel="nofollow noopener noreferrer">GitHub Copilot in VS Code cheat sheet (official VS Code documentation)</a></li>
</ul>
<p class="code-line" data-line="188"><code>Chat participants&#39; @github no longer appears when I install GiHub&#39;s MCP in my environment.</code></p>
<h4 id="edit" class="code-line" data-line="190"><strong>Edit</strong></h4>
<p class="code-line" data-line="192"><a href="https://code.visualstudio.com/docs/copilot/chat/copilot-edits" target="_blank" rel="noreferrer noopener nofollow">https://code.visualstudio.com/docs/copilot/chat/copilot-edits</a> <a style="display: none;" href="https://code.visualstudio.com/docs/copilot/chat/copilot-edits" target="_blank" rel="nofollow noopener noreferrer">https://code.visualstudio.com/docs/copilot/chat/copilot-edits</a></p>
<p class="code-line" data-line="194">Now that the agent mode has been implemented, I feel that it is basically limited in situations where it can be used. In <a href="https://code.visualstudio.com/docs/copilot/chat/copilot-edits" target="_blank" rel="nofollow noopener noreferrer">the official documentation, the following details are described</a> as advantages of Edit mode.</p>
<ul class="code-line" data-line="196">
<li class="code-line" data-line="196">Scope of editing: when you only need to edit the code and the scope of the change is clearly known</li>
<li class="code-line" data-line="197">Processing time: when a quicker response is required</li>
<li class="code-line" data-line="198">Deterministic results: when you want predictable and consistent editing results</li>
<li class="code-line" data-line="199">Requests: If you want to keep the number of requests to a minimum</li>
</ul>
<p class="code-line" data-line="201">Also, you cannot switch from Ask or Agent mode to Edit mode in the middle of a conversation, and vice versa.</p>
<h4 id="agent" class="code-line" data-line="203"><strong>agent</strong></h4>
<p class="code-line" data-line="205"><a href="https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode" target="_blank" rel="noreferrer noopener nofollow">https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode</a> <a style="display: none;" href="https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode" target="_blank" rel="nofollow noopener noreferrer">https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode</a></p>
<p class="code-line" data-line="207">It is a mode that performs various tasks autonomously. I got the impression that auto-approve is enabled in Cline&#39;s ACT mode. Compared to Cline, there are no checkpoints, so I was a little worried about how difficult it was to return to past actions.</p>
<p class="code-line" data-line="209"><a href="https://code.visualstudio.com/docs/copilot/chat/mcp-servers" target="_blank" rel="nofollow noopener noreferrer">It&#39;s currently in Preview, but you can also use MCP.</a></p>
<h3 id="inline-chat" class="code-line" data-line="211">Inline chat</h3>
<p class="code-line" data-line="213"><a href="https://code.visualstudio.com/docs/copilot/chat/inline-chat" target="_blank" rel="noreferrer noopener nofollow">https://code.visualstudio.com/docs/copilot/chat/inline-chat</a> <a style="display: none;" href="https://code.visualstudio.com/docs/copilot/chat/inline-chat" target="_blank" rel="nofollow noopener noreferrer">https://code.visualstudio.com/docs/copilot/chat/inline-chat</a></p>
<p class="code-line" data-line="215">Inline chat can be displayed with <code>Command+i</code>. There aren&#39;t many situations where I want to use it inline, but since it can be used in a terminal, it seems convenient when you want to check terminal commands without hassle.</p>
<p class="code-line" data-line="217"><img src="https://devio2024-media.developers.io/image/upload/v1744884369/2025/04/17/fxrnfopjtrl0j4ptetns.png"></p>
<h3 id="workspace-index" class="code-line" data-line="219">Workspace index</h3>
<p class="code-line" data-line="221"><a href="https://code.visualstudio.com/docs/copilot/reference/workspace-context#_managing-the-workspace-index" target="_blank" rel="noreferrer noopener nofollow">https://code.visualstudio.com/docs/copilot/reference/workspace-context#_managing-the-workspace-index</a> <a style="display: none;" href="https://code.visualstudio.com/docs/copilot/reference/workspace-context#_managing-the-workspace-index" target="_blank" rel="nofollow noopener noreferrer"> </a>https://code.visualstudio.com/docs/copilot/reference/workspace-context#_managing-the-workspace-index</p>
<p class="code-line" data-line="223">By using indexes, Copilot improves responses to relevant questions from the code base.</p>
<p class="code-line" data-line="225">There are 3 types of indexes.</p>
<table class="code-line" data-line="227">
<thead class="code-line" data-line="227">
<tr class="code-line" data-line="227">
<th>appellation</th>
<th>rubrics</th>
</tr>
</thead>
<tbody class="code-line" data-line="229">
<tr class="code-line" data-line="229">
<td>remote index</td>
<td>Build a remote index of <a href="https://docs.github.com/en/enterprise-cloud@latest/copilot/using-github-copilot/copilot-chat/asking-github-copilot-questions-in-github#asking-copilot-chat-questions-in-a-repository" target="_blank" rel="nofollow noopener noreferrer">your code base using GitHub Code Search</a>. This allows Copilot to search the entire code base very fast, even if the code base is very large.</td>
</tr>
<tr class="code-line" data-line="230">
<td>local index</td>
<td>An index stored on the local machine. This index also provides fast, high-quality search results, but cannot be created when there are more than 2,500 files. <a href="https://github.com/orgs/community/discussions/152490" target="_blank" rel="nofollow noopener noreferrer">I didn&#39;t know where it was made.</a></td>
</tr>
<tr class="code-line" data-line="231">
<td>Basic Indexes</td>
<td>It is used when there is no remote index and there are more than 2,500 files.</td>
</tr>
</tbody>
</table>
<p class="code-line" data-line="233">In my environment, a local index was automatically created without setting index creation in particular.</p>
<p class="code-line" data-line="235"><img src="https://devio2024-media.developers.io/image/upload/v1744936667/2025/04/18/ydxtdsoubj3730jzmiqo.png"></p>
<p class="code-line" data-line="237">When using a remote index, click Build remote index displayed in the image to begin creating a remote index.</p>
<h2 id="agent%E3%83%A2%E3%83%BC%E3%83%89%E3%81%A7%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%84%E3%81%A6%E3%82%82%E3%82%89%E3%81%86" class="code-line" data-line="239">Have them write code in agent mode</h2>
<p class="code-line" data-line="241">I asked for the task of adding Tooltips to <a href="https://dev.classmethod.jp/articles/cline-context-model-guide/#model%25E3%2581%25AE%25E6%25AF%2594%25E8%25BC%2583" target="_blank" rel="nofollow noopener noreferrer">the graph I tried with Cline</a>.</p>
<ul class="code-line" data-line="243">
<li class="code-line" data-line="243"><a href="https://github.com/hbsnow-sandbox/example-nextjs-d3/pull/13" target="_blank" rel="nofollow noopener noreferrer">Using Copilot Claude3.7 Custom Instructions</a></li>
<li class="code-line" data-line="244"><a href="https://github.com/hbsnow-sandbox/example-nextjs-d3/pull/14" target="_blank" rel="nofollow noopener noreferrer">Copilot Claude3.7 Custom instructions unused</a></li>
</ul>
<p class="code-line" data-line="246">The one that <a href="https://github.com/hbsnow-sandbox/example-nextjs-d3/pull/13" target="_blank" rel="nofollow noopener noreferrer">used Copilot Claude3.7 Custom</a> Instructions had the same results as Claude 3.5 created with Cline.</p>
<p class="code-line" data-line="248"><a href="https://github.com/hbsnow-sandbox/example-nextjs-d3/pull/14" target="_blank" rel="nofollow noopener noreferrer">If Copilot Claude3.7 Custom</a> Instructions is unused, functions that are no longer used in the middle of the instructions are left as is. Custom instructions are important, aren&#39;t they?</p>
<p class="code-line" data-line="250">The time it took didn&#39;t change in particular, but I was curious about what would happen when the difficulty level of the task was high because I basically couldn&#39;t confirm it on this side until I finished writing the code, so I didn&#39;t really understand the correctness of the direction. Also, since how much of the Context Window is displayed is not displayed on the UI, it is difficult to determine when to separate the current work.</p>
<p class="code-line" data-line="252">On the other hand, when compared to Cline, I feel that the biggest advantage is that it can be used without being aware of the price to some extent.</p>
<h2 id="mcp%E3%81%A7github%E3%81%AEissue%E3%81%AE%E4%B8%80%E8%A6%A7%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B" class="code-line" data-line="254">Check the list of GitHub issues on MCP</h2>
<p class="code-line" data-line="256">When a business plan sheet has been prepared by the company, Copilot is the easiest way to use MCP.</p>
<ol class="code-line" data-line="258">
<li class="code-line" data-line="258"><code>This is how to introduce MCP on GitHub, but first prepare a.vscode/mcp.json for the project.</code></li>
<li class="code-line" data-line="259">Copy and paste the json in the <a href="https://github.com/github/github-mcp-server" target="_blank" rel="nofollow noopener noreferrer">README</a>. <code>It&#39;s written, but since it&#39;s <code>a.vscode/mcp.json</code>, there&#39;s no need for the MCP key.</code></li>
<li class="code-line" data-line="260">Start Docker Desktop.</li>
<li class="code-line" data-line="261">Since token input is required, create a token and input it. If you don&#39;t know how to create a token, ask a question in Ask mode.</li>
</ol>
<p class="code-line" data-line="263">The implementation is now complete.</p>
<p class="code-line" data-line="265">I set Copilot Chat to agent mode and made the following request.</p>
<div class="code-block-container">
<pre>I want to create a table of <code class="code-line" data-line="267">tasks and subtasks from the issues list.
There is no need for PR on the table.
Please create a file in Markdown format so that you can understand which task the subtask is a subtask of.
</code></pre>
</div>
<p class="code-line" data-line="273">Then, as a result of searching for several files as shown in the following image, permission to use GitHub&#39;s MCP is asked. I&#39;m asking for permission from <code>get_me</code>, so it&#39;s a bit of a detour.</p>
<p class="code-line" data-line="275"><img src="https://devio2024-media.developers.io/image/upload/v1744884106/2025/04/17/egqccuudf2c55mfe8g2w.png"></p>
<p class="code-line" data-line="277"><code>It works well even if only the purpose is conveyed like this, but I know that it is necessary to execute GitHub&#39;s MCP list_issues this time.</code> <code>Therefore, when I specified list_issues as Context from Add Context, it simply executed what I wanted to do.</code></p>
<p class="code-line" data-line="279"><img src="https://devio2024-media.developers.io/image/upload/v1744884118/2025/04/17/v2dommv3mwlvgbimasuh.png"></p>
<details>
<summary>Actual output sample</summary>
<div class="details-content">
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">docs/task-list.md</span></div>
<pre class="language-md"><code># Task List
 
This document lists the relationships between tasks and subtasks within a project.

## Task List
 
| Task Number | Task Name | Description | Creation Date | Status |
 
|------------|--------|--------|--------|--------|--------|------| #8 | Implement Tooltips similar to Line in Bar graphs | ToolTips are displayed when mouse hover on LINE graphs It is now possible to do it. I want this to implement a similar function for Bar graphs. | 2025-04-11 | incomplete | #9 | test task 1 |
parent test task 01 text | 2025-04-15 | incomplete |
 
## subtask list | subtask number | subtask name | parent task number | parent task name | description | creation date | status | |----------------|-------
 
 
-------|--------------|------------|------|--------|--------|------| #11 | test task 1 subtask 2 | test task 1 | test task 1 subtask 2 text | 2025-04-15 | unfinished
| ## task hierarchy
 
 
 
</code> #9</pre>
</div>
<p class="code-line" data-line="303">Implement a tooltip similar to Line on the #8 Bar graph #9 test task 1 └ └ ── #11 test task 1 subtask 2 <br> <br></p>
<div class="code-block-container">
<pre><code class="code-line" data-line="306">
## Last
 
updated April 17, 2025
</code></pre>
</div>
</div>
</details>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" class="code-line" data-line="314">summary</h2>
<p class="code-line" data-line="316">I looked up Copilot in VS Code, and I was very surprised that it has evolved so much compared to the past.</p>
<p class="code-line" data-line="318">There are plenty of models to choose from, and there is no need to use MCP while worrying about the price, so the ease of use is different, but it seems good to try this out first as an introduction.</p>

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.