GitHub Copilotでバイブコーディング：エージェントモードとMCPサポートがVS Codeユーザーに提供開始
このブログでは、GitHub Copilotの多数のリリースについてご紹介します。これらのリリースにより、GitHub Copilotは世界をリードするモデルを活用し、ツールやサービスのコンテキストを強化することで、よりエージェントとしての能力を高めます。 Visual Studio Codeのエージェントモードを全ユーザーに提供します。このモードはMCPをサポートしており、必要なあらゆるコンテキストや機能へのアクセスを可能にします。さらに、オープンソースでローカルで動作するGitHub MCPサーバーをリリースします。これにより、MCPをサポートするさまざまなLLMツールにGitHubの機能を追加できるようになります。 マルチモデルの選択肢として、Anthropic Claude 3.5、3.7 Sonnet、3.7 Sonnet Thinking、Google Gemini 2.0 F
Clineに全部賭ける前に 〜Clineの動作原理を深掘り〜
はじめに AIのコーディングアシスタントとして最近、急速に注目を集めているCline。VSCode上でAIと連携し、コード生成からバグ修正、さらにはターミナル操作まで自動化できるこのツールは、多くのエンジニアの生産性を劇的に向上させています。 mizchiさんの『CLINEに全部賭けろ』という記事では、 AIから引き出せる性能は、自分の能力にそのまま比例する AI自体を管理するパイプライン設計を自分のコアスキルにする必要がある ともあるように、エンジニアはClineという強力なツールの最大限を使えるようになっていくべきです。 「AIの上手な使い方」が今のエンジニアにとって必須スキルになりつつあるため、単にClineを使うだけでなく、その仕組みを理解することで得られるメリットは数多くあります。例えば、現時点でのClineの得手・不得手を理解することでAIに対して的確に指示ができたり、clin
【二強時代】本格派のAIエディタ「Windsurf」の進化が著しいので徹底解説します。Cursorにも迫る勢いがある機能性です
4.1. どちらを選ぶべきか？ Windsurf推し： 普段開発をあまりしない&VSCodeに慣れていない人 全ファイル解析でコンテキスト指定の手間を減らしたい 価格を抑えたい（Pro$15） Cursor推し： 自分を軸にしたプログラミング（Tab補完やチャット）を多く使う人 細々としたUXにこだわりがある人 既存のVSCode環境との親和性を重視 流行りのclineとの二刀流をしたいならば、Cursorになる 5. 導入時に気をつけたいポイント・注意点 5.1. 大きなファイルや行数制限 コミュニティ報告によると、1ファイルあたり数千行を超えるようなコードをまとめて変換しようとすると、処理が長引いたり、まれにタイムアウトが起きることがあるようです。大きなファイルは適宜分割して扱うのが無難です。 5.2. ターミナル統合の安定性 Wave 2でかなり改善されたものの、短時間で大量コマンド
VSCodeの新機能「Copilot Edits」、GitHub Copilotが複数ファイルにわたるコード変更や生成に対応。「ダークモードとライトモードのテーマに対応して」など複雑な指示も可能に
VSCodeの新機能「Copilot Edits」、GitHub Copilotが複数ファイルにわたるコード変更や生成に対応。「ダークモードとライトモードのテーマに対応して」など複雑な指示も可能に マイクロソフトはVisual Studio Codeの2024年10月のアップデート版（version 1.95）を公開しました。 本バージョンでは、Copilot Chatセカンダリサイドバー、GitHubアカウントのマルチアカウント対応、Copilotコードレビューなどの新機能が追加されていますが、もっとも大きな新機能はCopilotがプロンプトの指示によって複数ファイルにわたるコードの変更や生成に対応する「Copilot Edits」でしょう。 Version 1.95 of @code is out now with Copilot Edits (in preview), docstri
ChatGPTプログラミングのすすめ
ChatGPTなどの大規模言語モデル (Large Language Model; LLM) にプログラミングやリファクタリングをさせる場合、目的に合ったものが作られているかを何らかの方法で検証する必要がある。 プログラムの正しさを完全に保証する方法はないが、ある程度の正しさを継続して担保するための方法を探ってみたので以下にまとめた。 ポイントは、ChatGPTの生成したプログラムの検証にもやはりChatGPTの力を借りることである。 実行可能性と入出力のチェック プログラムを生成するタスクである場合、いつでも「実行できるか？」というチェックが可能である。これは自然言語の生成と大きく異なる点だろう。実行可能性を確かめることは最低限のチェック項目になる。 エラーが出力された場合、自力で修正するか、もしくは、エラーの内容をChatGPTに提示して修正を依頼し、再度実行可能かを確かめる。 入力・
VSCodeでJavaScriptライブラリ(jQuery, Reactなど)の補完が効くようにする - HemiSight
Visual Studio CodeのJavaScriptの補完機能は標準状態でも非常に強力です。TypeScriptを導入することにより静的言語レベルの補完機能をも使うことができるようになるのですが、小規模な開発の場合、わざわざモダンなフロントエンド開発環境を用意するのは面倒に思うことがあるかもしれません。 以下の内容はnpmが利用できる前提です。npmを導入していない方は今すぐ導入しましょう。導入が済んだら、早速試しにjQueryの補完が効くか試してみましょう。 新しいターミナルを開く プロジェクトディレクトリでターミナルを開き（メニューの「ターミナル」→「新しいターミナル」）、以下のコマンドを実行します。 npm install @types/jquery そうなんです。TypeScriptをお使いの方はお馴染みかもしれませんが、TypeScriptの型定義ファイルをインストールする
Live Sass Compilerの出力先を各ファイルごとに分ける方法
Live Sass Compilerというvscodeのエクステンションがありますが、 ファイルを出力するとき複数あるscssファイルがまとめて一つになってしまう問題がありました。 基本的にscssファイルと同じ場所に出力することは少ないと思います。 通常のファイル構成 /root/ ├ /scss/ │ └ style.scss ├ /css/ │ └ style.css setting.json "liveSassCompile.settings.formats": [ { "format": "compressed", "extensionName": ".css", "savePath": "/css" } ], /css/style.cssとして出力される。 OK setting.jsonの設定 Live Sass Compilerの設定は File > Preferences
SCSS まとめ３（コンパイル方法） - Qiita
SCSSまとめ集 基本文法 関数 コンパイル方法 目次 Live Sass Compilerを使用したコンパイル方法 コンパイル場所を指定する Live Sass Compilerのsetting.jsonについて 1. Live Sass Compilerを使用したコンパイル方法 公式サイト https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md エディタはVisual Studio Codeを使用。 拡張機能としてLive Sass Compilerをインストールする。 SCSSファイルを作成し、コードを記述した後、下の「Watch Sass」を押す。 同一フォルダにcssファイルとmapファイルが作成される。 mapファイルには、参考にしたscssファイルと出力されたcs
VSCodeでSass(Scss)を自動コンパイルする簡単な設定方法
Visual Studio Code 通称「VSCode」で、Sass（Scss）を自動でコンパイルしてCSSに変換する方法をご紹介します。 セーブするたび自動でコンパイルしてくれるので非常に楽です。 すでに「VSCode」はインストール済みという前提で手順を紹介していきます。 まだインストールしてないよ！という方は、下記リンクよりインストールしてください。 Sass（Scss）の自動コンパイルに使用するプラグイン・Live Sass Compiler ひとつプラグインを入れるだけで、自動でコンパイルできるようになるとは、、 VSCodeめちゃくちゃ便利ですね。 Live Sass Compilerのインストールから設定まで全ての手順1.Live Sass CompilerをVSCodeに追加する画面左、黄色の点線のボタンをクリック。 Extension（プラグイン）の一覧が表示されるので
VSCodeでのGitの基本操作まとめ - Qiita
はじめに 一年前に新人研修でGitを担当してTigの記事を書いたのですが，今年も同じくGitの研修を担当することになりました．新人さんたちにとってはターミナル環境はとっつきにくい人も多いようで，短い研修期間では操作自体に苦戦してしまい，Gitそのものを理解するというところに力を割けない人も少なくありませんでした． それを踏まえて今回はGUIで操作しやすい環境を検討したのですが，以下のポイントを踏まえてVSCodeを使うことに決めました． マルチプラットフォームで使える．（研修はWindows環境で行いますが，業務ではLinuxデスクトップ環境も使うので） Gitの基本的な内容はVSCode上でGUI操作が可能． Gitの内容とあわせて，プログラミング用のテキストエディタの一例として，導入しやすそうなVSCodeを紹介． VSCodeを使ったGitの基本的な操作を一通りまとめていきます． イ
サクッとAPIを叩く方法 (VS CodeでHTTPリクエストが送れちゃう拡張機能) - Qiita
概要 開発中のAPIを試したり、サードパーティのAPIをサクッと叩いてみたいといった時に皆さんどのようにしますか？ 私は、curlコマンドやPostmanをよく使っています。 ただ、もっと楽にHTTPリクエストを投げ、かつその時使用した情報を残すことができる方法を以前のチームメンバーに教えていただいたので、記事にしました。 REST Client 今回、紹介するのはVS CodeのエクステンションにあるREST Clientというものになります。 このREST ClientというのはVS Code上でHTTPリクエストを送信し、レスポンスを確認できる拡張機能となっています。 使用方法 使用方法はすごく簡単で、拡張子が「.http」か「.rest」というファイルで決められた構文に従いHTTPリクエストを記述するだけです。 下記にcrudの例を載せていきたいと思います。 また今回はREST A
いちばんやさしい webpack 入門
webpack is 何? webpack とは、一言で言うと JavaScript 向けのモジュールバンドラーです。 複数の JavaScript モジュールを一つ（またはいくつか）のファイルへバンドル（=bundle: 束にする、包む）してくれます。 複数の JS モジュールを（場合によっては CSS や画像などのアセット類も）一つにまとめる すでに新規開発の終了も伝えられる webpack ですが、「STATE OF JS 2022」ではいまだに利用率 No.1 の地位にあります。 webpack 後継のモジュールバンドラーとしては、すでに Turbopack の開発開始がアナウンスされています。しかし、これがプロダクションレベルに達するまでは webpack がおそらく使い続けられることになるでしょう。 使うメリットは何？ モジュールを 1 つ（もしくは少数）にまとめることでブラウ
ConoHa VPS + VSCode で、リモート開発環境を統一する
mr-t 会社員不適合ブロガー 大学院卒業後、大手電機メーカーに入るも働き方が合わず、1年4ヶ月で転職活動&大手企業に内定するも辞退し、石の上にも三年を決意し副業開始→お悩み相談所を開設 ■成果 大学院: 受賞3本など (うち1件は、300人に1人しか取れない賞を取る) 会社員: 昇給考課にて、100人に1人しか取れない評価をゲット ソフトウェアを開発していて、複数台のPCを持っているから開発環境がPCごとに違うから面倒だとか、電源切ったあとに開発環境を立ち上げるのに時間がかかってイライラしていないかい? Mr.Tもその一人だゾ 上記ステップごとに解説するで。 VPSを借りよう。月額1,500円程度と、1日あたり50円しかかからんで リモート開発環境を統一するためには、インターネットから接続できるところにサーバーを置いて、サーバーの上でプログラムを書けばいいということになる。 そのための手
vscode.dev(!)
October 20, 2021 by Chris Dias, @chrisdias Back in 2019, when the .dev top-level domain opened, we picked up vscode.dev and quickly parked it, pointing at our website code.visualstudio.com (or, if you are from the Boston area like me, we "pahked it"). Like a lot of people who buy a .dev domain, we had no idea what we were going to do with it. And we certainly didn't anticipate that it would end up
もうTypeScriptの補助輪を外そう 明日は//@ts-checkを使う
※近所（同じ港区内）のあのIT企業さんからお声をかけていただきました。登壇予定です。 ※某商業誌さんから執筆依頼がありましたが、有料ですと気が引けるのでお断りしました。 Vimで書いている人はもういないから、そろそろTypeScript（自転車の補助輪）を外していこうという話。 Visual Studio Code は下のリンクからインストールできる。これが前提。 VS Code で // @ts-check が利用できる。 ※Denoの話を知らない人は、これを読むと良い。 DenoがTypeScriptの使用をやめる5つの理由 （Denoは、Node.jsの作者であるライアン・ダールによって作成され、V8 JavaScriptエンジン及びRustプログラミング言語に基づいた、JavaScript及びTypeScriptのランタイム環境である。セキュリティと生産性に焦点を当てている） ※T
VS CodeでJavascriptの型判定を行う - Qiita
はじめに Qiita初投稿。ちょっと緊張するので、豆知識的な軽めな話題で始めてみます。 なんですが、以外にもQiitaでは記事を見かけなかった内容なので、誰かのお役に立てば。 2019/01/19 更新 ES6なしで複数ファイルにまたがった場合 を追加 ローカル変数の型宣言を追加 結論 VS Codeでは、jsファイルに//@ts-checkのコメントを追加すると、TypeScriptとして型チェックをしてくれる Type Checking JavaScript Files VS CodeでJavascriptで型チェックを行う 皆さんJavascriptでの開発中に、しょうもない型間違いでエラーが出ることはないでしょうか。私はあります。 Javascriptは割と適当に書いても動くのは楽でいいんですが、真面目に書き始めると細々したエラーが出てうんざりします。簡単な型間違いぐらいは動かすま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブログ移設のお知らせ
Microsoft、「AI Toolkit for VS Code」を発表／既存の「Windows AI Studio」をクロスプラットフォーム拡充、発展させる
https://pengi-n.co.jp/blog/vscode-extensions/
Web版「Visual Studio Code」がオフライン動作に対応 ～PWAとしてインストール可能に／指定サイズ以下のリポジトリコンテンツを自動DLして高度な検索・定義移動も利用できる
