Claude Codeとplaywright mcpを連携させると開発体験が向上するのでみんなやろう
どうもこんにちは、Claude Codeで遊び始めて2週間くらいが立ちましたがまだまだ模索中です 最近覚えた新しいテクニックが playwright-mcp(https://github.com/microsoft/playwright-mcp) を使ってブラウザ操作を全てclaude code経由でやるというものです playwrightはpuppeteerと同じく、chromeなどのブラウザをjsで操作するやつなのですが、puppeteerよりも使い勝手が良い&更新が超高頻度なのでよく使っています ※ただし、mcpサーバーのplaywrightは本家と比べると機能がイマイチなのでそこは発展を待ちましょう さて、mcpサーバーをclaudeに追加する設定ですが、claude自身に質問すると大嘘をつくので（ここらへんしんどさ感じますよね）原典を当たる必要があります mcpの追加 具体的には
Claude Code時代のソフトウェアエンジニア生存戦略｜suthio
Claude Codeが変えた開発の風景Claude Codeを使い始めて約1ヶ月経ちますが「Claude Codeを使ってから、開発の概念が根本的に変わった」と僕は思ってる。 ClineやCursor Agentの登場でもでも相当変わったと思う。でもClaude Codeはそれ以上の変化だと僕は感じている。何が根本的に違うのか。 自走力の高いClaude Code - ファイルを読み、修正し、テストを実行し、エラーを解決する。まるでペアプロしているような体験。 コードを書く能力が高いClaude 4 Opus - 複雑なロジックも正確に実装できる圧倒的なコード生成能力。 Claude MAXでの定額化 - API料金を気にせず使い倒せる。この「料金を気にしなくていい」という心理的な解放が、開発のアプローチを根本から変える。 従量課金のメンタルモデルから定額使い放題のメンタルモデルへという
Visual Studio Codeが本体にAI関連機能を組み込みへ、「オープンソースのAIエディタ」になると表明
Visual Studio Codeが本体にAI関連機能を組み込みへ、「オープンソースのAIエディタ」になると表明 Visual Studio Code（VS Code）の開発チームは、今後VS Code本体にAI関連機能を組み込んでいき、VS Codeのあらゆる機能面でAIの組み込みを容易にしていくことで、VS Codeを「オープンソースのAIエディタ」にしていく方向性を明らかにしました。 Today, we're announcing plans to make VS Code an open source AI editor. We believe AI development should stay true to VS Code's core principles: open, collaborative, and community-driven. Let's build th
Cline＋ローカル版DeepSeek R1でAIコーディングを使い放題にする（高スペックマシン向け）｜しぴちゃん
しぴぴぴ！ Vtuberのしぴちゃん (https://www.youtube.com/@CP-chan) です。 配信ではゲームの話しかしてませんが、今回はAIに関する連載ということでローカル環境（手元のマシン）で動かせるAIの話をしていきます。 第一弾 DeepSeek R1をほぼ準備なしからローカルGPUで動かす 第二弾 本記事 Cline＋ローカル版DeepSeek R1でAIコーディングを使い放題にする（高スペックマシン向け） 第三弾 GPUなしでも動く！ローカルLLMとllama.vscodeでコード補完 今回は連載の第二弾です。 LLMをローカルにインストールする大きなメリットとして、API制限や従量課金から解放されてLLMが「使い放題」になるという点があります。 DeepSeekは一世代前のV3ならWebで使ってもそんなに高くないのですが (https://api-docs
VSCodeでコード整形
どうも、クラゲジュニアです。 VSCodeで以下のショートカットキーを使うことで、簡単にコード整形されます。 Windows：Shift + Alt + F Mac：shift + option + F 整形前 <!doctype html> <html> <head> <meta charset="utf-8"> <title>BlueJelly</title> <script type="text/javascript" src="bluejelly.js"></script> </head> <body> <div id="text1">Hello, BlueJelly!</div> <button id="button1">ボタン</button> <script> //Global const ble=new BlueJelly(); //onLoad window.onload
本当は教えたくない、VScode拡張の最強プログラミングアシスタントAI Phind(導入・使い方) - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? みなさんプログラムは書いていますでしょうか。この一年でChatGPTができ、CopilotにCopilot Chatなど色々なAIツールが出ていますが今回お勧めするのはPhindというAIアシスタントです。 Phindとは Phind(Phind.com)とは端的にいえばGPT-4を超えるコーディング能力に特化した言語AIです 参考リンク：大規模言語モデル「Phind」がコーディングにおいてGPT-4を上回る リンク内で言われているように、WebからChatGPTやGoogleのように簡単に使うことができますが、Phindの真髄はここで
コード生成を実現するVS Codeの拡張機能 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは。職業「戸倉彩」です。 Visual Studio Code(以下、VS Code)は、その拡張性の高さで世界中の開発者から支持されています。特に、「コード生成」を行なってくれる拡張機能は、プログラミング作業の効率化に大きく貢献しています。今回は、VS Codeで利用できるコード生成拡張機能を3つ選定し、紹介していきます。 ※本記事は、2023年12月1日時点で公開されている情報に基づいています。 1. GitHub Copilot / GitHub Copilot Chat GitHub Copilot - Visual S
VS Codeの新機能がすごく便利！ ツリービューのスティッキースクロール機能をオンにすると格段に使いやすくなります
先日アップデートされた、VS Code v1.86で、スティッキースクロールがツリービューでも使用できるようになったので、紹介します。 エディタのスティッキースクロール（紹介記事）ができるようになった時もその便利さに喜びましたが、ツリービューでもできるようになり、深い階層でもすべての親を常に表示しておくことができます。 ツリービューのスティッキースクロールを使用するには、デフォルトではオフになっているので、機能をオンにする必要があります。 ※オンになっている人もいるようですね。
VS Codeのサイドバーの表示をキーボードで切り替えるには
連載「Visual Studio Code TIPS」 Visual Studio Code（以下、VS Code）のサイドバーには［エクスプローラー］ビューや［検索］ビューなどが表示される。VS Codeを使用した日常作業では、これらの切り替えが頻繁に発生する。そこで、マウスを使うことなく、キーボードでこれらの表示を切り替えるためのキーボードショートカットをまとめよう。
文字エンコードを指定してファイルを開く
Visual Studio Code ではファイルの文字エンコードとして UTF-8 がデフォルトで設定されています。その為、 Shift_JIS など UTF-8 以外の文字エンコードで保存されたファイルを開くと文字化けして表示されます。ここでは Visual Studio Code で文字エンコードを指定してファイルを開く方法について解説します。 文字エンコードを指定してファイルを開きなおす Visual Studio Code ではデフォルトで文字エンコードとして UTF-8 を使用します。その為、文字エンコードとして UTF-8 を使用して保存されたファイルを開いた場合は問題なく表示されます。 それに対して例えば文字エンコードとして Shift_JIS を使用して保存されたファイルを開いた場合、文字化けが発生します。 UTF-8 以外の文字エンコードで保存されたファイルを開くには、
【Visual Studio Code】快適なCSV編集用プラグインedit csvの使い方 – Obenkyolab
【Visual Studio Code】快適なCSV編集用プラグインedit csvの使い方 by SEBONE · 公開済み 2021年4月5日 · 更新済み 2022年1月26日 概要Windowsでcsvを手軽に編集したいときには標準でインストールされているメモ帳を使用することが良くあります。ただし、メモ帳はcsv編集に特化しているわけではないため、行列を意識したような編集をすることは苦手です。Microsoft Officeが使える環境であればExcelを使用するという手もあります。ただし、Excelの場合は文字化けする、保存するとshift-JISになってしまう、など少し余計なことで手間がかかってしまう場合があります。 今回はそんな課題に対するちょうどいいcsvエディタとしてVisual Studio Codeの拡張機能である”edit csv”の使い方について紹介します。 環境
【初心者向け】VSCodeでC++のデバッグができるまで - Qiita
VSCodeでC言語を使いたい！ VSCodeシリーズ、機械学習、Pythonとくれば、今度はC言語、C++です。C言語は電気系学生はよく使う言語です・・・なので、どうしても必要になってくるのですが、IDEでは、PCのスペックが重すぎたり、応答なしになったり・・・重すぎるからPCを買い替えたくともお値段が高すぎる・・・といった話を聞きます。また、練習用のものもありますが、対応する言語はC言語です。とても便利ですし、とてもお世話になりましたが、拡張性には残念ながら乏しいです。そのため、VSCodeでC/C++を行うメリットは３つあります。 ある程度の低いスペックのPCでも練習用に向いていて、デバッグを行うことで値の遷移を見ることが出来て、エラーメッセージの意味を理解しやすくなる点 拡張性がある程度高く、最終的にエディタを使いこなすことが可能になる点。 OSに依存しない 逆にデメリットは セッ
【設定爆速】VS CodeのRemote Developmentを使ってSSH接続したEC2上のファイルを編集する | DevelopersIO
めっちゃ簡単にリモートマシン上でVS Codeが使えるRemote Developmentの紹介です。Insider版限定機能ですが、やってみると感動すること請け合いです。 なんとなく試しているけれど、Visual Studio CodeのRemote Development、死ぬほど便利やんけ。とりあえず、~/.ssh/config使ってSSH接続先管理してたら、鬼のように簡単にリモートマシンに接続できる。 — 濱田孝治（ハマコー） (@hamako9999) May 29, 2019 先日、MicrosoftよりRemote Development with VS Codeという衝撃的なアップデートが発表されました。 Remote Development with Visual Studio Code 従来のVS Codeの機能を拡張機能含めてリモートマシン（コンテナやWSLも含む）上
VS Code内でブラウザ画面プレビューとDevTools表示、そのままコード編集もできるVS Code拡張「Microsoft Edge Tools for VS Code」正式版に
VS Code内でブラウザ画面プレビューとDevTools表示、そのままコード編集もできるVS Code拡張「Microsoft Edge Tools for VS Code」正式版に マイクロソフトは、コードエディタのVisual Studio Code（以下VS Code）とWebブラウザのMicrosoft Edgeを組み合わせて、Webアプリケーションの開発を効率的に行えるVS Codeの拡張機能「Microsoft Edge Tools for VS Code」正式版のリリースを発表しました。 Are you a fan of the browser developer tools but not a fan of switching from editor to browser to use them? We heard you! Today we moved the "Mic
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Docker、新しいVisual Studio Code拡張機能「Docker DX」を発表／言語サーバーもオープンソースで
VS Codeでテキストの折り返しを設定するには
!!! ATTENTION !!!
VS Codeでテキストを矩形選択するには
Web版「Visual Studio Code」がオフライン動作に対応 ～PWAとしてインストール可能に／指定サイズ以下のリポジトリコンテンツを自動DLして高度な検索・定義移動も利用できる
Webブラウザーで「Visual Studio Code」が完全動作 ～「vscode.dev」にアクセスするだけ／Microsoft、「Visual Studio Code for the Web」をパブリックプレビュー
