Claude CodeをWindows上で動かすにはWSLの調整が必要ですが大変に辛ですよね。 この記事ではDevContainerを使ってWindows上でもClaude Codeを簡単確実に動かせる方法を説明します。 勿論、DevContainerを使っているので、MacやLinuxなどのGUI環境でも同じように動作します。 事前準備 VS Codeをインストールする Docker Desktopをインストールする DevContainerの構成 まず、作業用のディレクトリを作成しましょう。ここでは、C:\dev\devcontainer-claude とします。 次に、.devcontainerディレクトリを作成し、その中にdevcontainer.jsonを作成します。 つまり、C:\dev\devcontainer-claude\.devcontainer\devcontaine

どうも！オペレーション部の西村祐二です。 最近、Next.jsなどでフロントエンドの実装も行うことが増えてきました。 実装を進めていくと、page.tsx,layout.tsx,index.tsx,route.tsなど同名のファイルが増えてきて、どのファイルを開いているか分かりづらいなと思う場面がありました。 VS Codeのv1.88で開いているファイルタブのラベルをカスタマイズできるようになったので、その設定方法を紹介したいと思います。 Visual Studio Code March 2024 結論 最初に結論として、settings.jsonに下記設定をすることでディレクトリ名も表示されるようになりタブを見やすくすることができます。 { "workbench.editor.customLabels.patterns": { "**/app/**/{*.tsx,route.ts,ac

この記事はVisual Studio Code Advent Calendar 2023 19日目の記事です。 もうすぐクリスマスですね。我が家は3歳の息子がいるのですが、今更「ツリー買い忘れたけどなんか飾り付けほしいなぁ」と思ってダイソーでツリーが印刷された布を買い、布を壁に貼ってシールや工作物をペタペタ貼ることでそれっぽいものができました。ツリーのゴミも散らからないので、もし悩んでいる方がいればぜひお試しください DALL-Eで出力してもらったイメージはこちらになります（こんなにちゃんとしていませんが） はじめまして、LayerX 機械学習チームの @yakipudding です。 突然ですが、私はSQLを書くのが好きではないです。業務での調査や分析によくSQLを使用するのですが、構文やJOIN、どの項目がどのテーブルにあるのかなどを都度確認しながら書くのが面倒で、億劫に感じます。 そ

先日のVSCodeのアップデートで、GitHub Copilotを使うとターミナル操作が便利になりました。 これにより、別途ターミナルのアプリを使わずにすべてVSCode上で操作した方が便利なのでは？となりました。 アップデート前までどうしてたか MacのiTerm2上で、GitHub CopilotのCLI版（パブリックベータ）で入力補完やコマンドの意味を調べたりしていました。 それ自体は便利でしたが、いくつかの不便な点もありました。 使い方がちょっと煩雑だった 例えばコマンドをサジェストして欲しい場合、gh copilot suggest 'gitで1つ前のコミットを取り消したい'のようにタイプする文字数も多くなり、またそれが一般的なコマンド or ghコマンド or gitコマンドかの３択に答えないといけなくて面倒でした。 ssh接続で不便 SSH接続先でも使用するためにGitHub

2023 年は念願叶い業務でも趣味でも Go を触ることができました。 そんな 2023 年での Go での気づきに思いを馳せ、タスク管理をするような簡単なサーバーを構築しそのプロジェクトレイアウトをご紹介してみます。 気づきといっても読む方にとっては当たり前のことかもしれません。 また、プロジェクトレイアウトはこれが正義だとは思っていません。紹介するレイアウトは業務では使っていないです。運用などもまともにしたことはありません。私がそこそこの規模のサーバーを新規で構築するならこんな風にしようかなって記事です。 気づき interface を満たすためのコードって VSCode で自動生成できたんだ よくおまじないとかファクトリー関数の戻り値とかで構造体が interface を満たしているかどうかを確認することがあるかと思います。 package main import "context"

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 (VSCode) is a popular code editor that can be used as an alternative to Postman for API testing. With the right extensions, developers can easily create, manage, and test APIs within the VSCode environment. Using Thunder Client with VSCode for API testing can streamline the development workflow and save time by using a single tool for coding and testing, as this article will sho

昔にも Dev Container を利用して Azure Functions の開発環境を構築する方法を書いたのですが、その後 Dev Container の機能強化と Azure Functions のアップデートによってベストプラクティスが変わってきたので、現時点でのベストプラクティスを確認しておきました。 Windows 環境であれば Visual Studio 2022 を利用しておけば Azure Functions + C# の開発環境は一発で構築できますが、それ以外の言語で特に Python の場合は Dev Container を利用した方が良いケースが多いです。最近では Visual Studio Code を使う人も増えていますし、Dev Container を用意しておくと最悪でも GitHub Codespaces 上でブラウザベースの開発が出来るので便利になりま

この記事では、Playwright の VSCode 拡張を使って GUI 操作のみでテストの記録や実行する方法について紹介します。 Playwright の VSCode 拡張とは？ Playwright の VSCode 拡張は、Playwright の作成元である Microsoft が公式に提供している拡張機能で、VSCode 内で直接ブラウザテストの記録や実行を支援するための便利なツールです。 GUI 操作を中心に、テストの記録や実行を手軽に行うことが可能となります。 VSCode 拡張のインストールは、以下のリンクから行うことができます。 VSCode 拡張を活用してテストを書く 本記事では、シンプルな ToDo アプリを例にテストの作成方法を説明します。Playwright のインストール方法は、公式ドキュメントをご参照ください。その後、VSCode に Playwright

Compute 利用料の計算はどうするの？ Codespaces インスタンスがアクティブになっている稼働時間の合計分数です。Compute 使用料は、すべての Codespaces で実際に使用された分数で毎日合計値が課金サービスにレポートされ、毎月単位で請求されます。 ストレージ利用料の計算はどうなるの？ Codespaces の課金の対象は、アカウント内の全ての Codespaces で使用されるすべてのストレージとなります。これには、クローンされたリポジトリ、構成ファイル、拡張機能など、Codespaces で使われるすべてのファイルが対象になります。これらの合計値は毎日課金サービスにレポートされ、月末にストレージについて最も近い MB 単位に丸められます。 フォークされたリポジトリでの課金 Codespaces は、課金対象となる Owner が定義されている Organizat

これができる拡張を作った。 TypeScript と HTML と CSS の LSP を動かせるようにしたので、 markdown 内部で補完が走る。 TypeScript に関しては補完だけではなく型診断の結果を表示している。 .md だけではなく .mdx にも対応している。 インストールと設定 インストールした上で .vscode/settings.json に次の設定を書く。 { "markdown-code-features.enable": true, // to enable completion in markdown "[markdown]": { "editor.quickSuggestions": { "comments": true, "strings": true, "other": true } } } 基本的に、markdown-code-features.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Google Apps Scriptの環境構築をVSCode上で行う方法について詳しく解説していきます。clasp,asideを使って構築するので、爆速で構築できます。 ことのはじまり 私は最近Google Apps Script(GAS)の学習を始めました。 GASの学習を始めると、まずはAppsScript公式のIDEでスクリプトを書いていくことになると思います。 しかし、普段VSCodeを使い慣れている身からすると、VSCodeの便利機能が使いたくて仕方なくなります。 それじゃあ、使い慣れたVSCodeを使おうじゃないか！！ AppsScript公式のIDEだとGitに差分を残していくこともできないぞ！！（できます） というわけで、GASをVSCodeを使って開発する為の環境構築の手順を書いていきたいと思います。 前提条件 VSCodeがインストールされている Node.jsがインス

こんにちは。AWS事業本部コンサルティング部に所属している今泉（@bun76235104）です。 今回は超がつくほどのの小ネタなのですが、生成系のAIにVSCodeの設定周りについて聞いたり、作業をお願いしたらとても快適だったので使い方の一旦を紹介します。 やってみたことは以下のとおりです。 独自スニペット用のJSON文字列を書いてもらう キーボードショートカットの設定（keybindings.json）の書き方を教えてもらう 設定ファイル（settings.json）の書き方を教えてもらう 実際にやってみた 今回試している環境は以下のとおりです。 試してみたツール Raycast AI（有料ツール） ChatGPT（Web版） モデル: GPT-3.5-turbo 独自スニペット用の設定を書いてもらう 背景 私は趣味で競技プログラミングを楽しんでおります。 競技プログラミングでは素早く正

NewCodex, Claude Code, or Cursor?Turn shell sessions into agent context →

VSCode の更新情報を見ていたら Dev Container の仕様と、リファレンス実装の CLI ツールについて記載がありました。 Development Container specification Our development container teams across Microsoft and GitHub continue active development on the new Dev Container Specification, and this iteration had several exciting highlights. どういう風にやってきたのか Dev Container(devcontainer) の元は VSCode の Remote - Containers で使われている開発コンテナ(とその設定ファイル)のことです。これを VSCode

Macaron is an open-source UI design tool to create and maintain Web Components.

技術部データ基盤チームの @zaimy です。今回は、 Visual Studio Code（以下 VS Code）と Docker コンテナを使って開発環境を構築する方法を紹介します。 データ基盤エンジニアの開発環境として、Python を使用する単一コンテナを例に記述しますが、他の言語や Docker Compose を使う場合でも応用できます。 背景: M1 Mac (Monterey) に Python 3.8.12 をインストールできない 先日、業務で使用するマシンを Intel Mac から M1 Mac に切り替えたのですが、CPU アーキテクチャが異なることに加えて、OS のバージョンが上がったことで Apple Clang に下位互換性のない変更が入っており、業務上ある理由で必要な Python 3.8.12 のインストールが困難でした。 そこで、私の所属するチームは全員

概要 VSCode のリモートコンテナ機能を用いると、開発環境を dockerfile の形でコード管理することができます。これにより、開発者が開発に用いる環境をリポジトリごとに統一できます。 VSCodeのリモートコンテナ機能とは コンテナの中に開発環境を押し込んで、その中にディレクトリをマウントして開発するVSCodeの機能です。 リモートコンテナ機能を用いて開発するメリット リモートコンテナ機能を用いて開発することには以下のようなメリットがあります。 local環境を汚さない 複数のプロジェクトで開発するにつれて、local マシンにはそのための様々なアプリ・設定が導入されていきます。この状態には以下のような欠点があります。 導入されたアプリや設定が膨大になって管理しきれなくなり、何のために導入されたか、変更してよい設定なのかが分からなくなる 異なるプロジェクトで必要な設定・アプリ同

今回はvscodeを使っている方に対して、おすすめのショートカットやカスタム設定などを紹介し、早く開発するコツを紹介したいと思います。 参考にできそうな部分があれば幸いです。 おすすめtipsリスト 筆者の環境がmacなので、その点ご了承下さい。 ワークスペース系 ctrl + shift + n もう一つワークスペースを起動できます。 他のプロジェクトのコードを参考にしながらコードを書くといったシーンで使えます。 ctrl + r 最近開いたプロジェクトから簡単に開くディレクトリを指定することができます。 cmd + shift + e エクスプロラーとエディタ、ターミナルの行き来を簡単にします。 cmd + b エクスプローラーを出し入れします。 cmd + w 開いているファイルを閉じます。 ターミナル系 ctrl + ` ターミナルを出すことができます。 出した状態だと、閉じること