GitLabは、これまでGitLabが自社で開発し提供してきたWebIDEを、Visual Studio CodeベースのWebIDEへ移行していくと表明しました。 Here's what's coming next to GitLab Web IDE. https://t.co/1iHQrvR46a — GitLab (@gitlab) May 24, 2022 GitLabには以前から、Webブラウザの画面からコードを管理しつつ、そのままコードの編集などを可能にするWebIDE機能が統合されていました。このWebIDEはオープンソースのMonaco EditorをベースにGitLabが開発してきたものと説明されています。 今回の発表は、このWebIDEをVisual Studio CodeベースのWebIDEに置き換えるというものです（ちなみにVisual Studio CodeもMo
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
あまり知られていないけれど、コーディングの作業が捗るVS Codeの機能とテクニックを紹介します。 今開いているファイルを残しながら新しいファイルを開けるようにしたり、コード内のコメントのカラーだけを自分好みに変更する方法など、ちょっとかゆいところに手が届くような便利なテクニックです。 5 Visual Studio Code Hacks That You Will Thank Me For (And They're Not Common Points Like "Install Prettier Extension") by Mohmed Ishak 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ファイルを常に新しいタブで開くようにする 2. コメントのカラーを変更する 3. コードを大きく表示する 4. カ
基本的には Windows と Visual Studio を使って Azure Functions や GitHub で公開しているアプリケーションとライブラリを書いていますが、最近は Python や Go を書く必要がちょいちょい出てきたので、色々と観念して WSL 2 の環境を構築して使っています。 特に Python は Azure Functions だと Linux のみ対応となるので、Windows 上での開発は難しくなっています。他にも個人的に PR を投げている Terraform Provider for Azure も Windows 上では一部のテストが通らなくなっているので、WSL 2 を使わないと難しい状況です。 環境構築系はメモっておかないと後ではまるので、自分が必要な範囲で手順を残します。 基本的な WSL 2 環境構築 Visual Studio Cod
Visual Studio Codeの拡張機能互換「Eclipse Theia IDE」正式リリース。デスクトップ版とWebブラウザ版に両対応 Eclipse Foundationは、オープンソースで開発されている統合開発環境（IDE）「Eclipse Theia IDE」の正式リリースを発表しました。 Theia IDEはもともとVisual Studio Codeの対抗として、Eclipse Foundationが開発を行ってきた開発環境で、デスクトップアプリケーション版だけでなくWebブラウザ版も用意されています。 Exciting News! Theia IDE is now generally available! Read more: Press release https://t.co/K0Npfd9kNy Blog post https://t.co/5ntq6PW3MG#
はじめに アノテーションの髙嶋です。 私は業務の一環としてプログラムを書いていますが、最近ではコーディング/テストの環境はコンテナを使用して構築しています。 コンテナを使うことで、アプリケーションごとに必要な環境を、それぞれ分けて構築することができるためです。 今回はVisual Studio CodeからDockerのコンテナを起動し、接続するまでの手順を記載しています。 前提条件 実行に必要なアプリケーションはすべてインストール済みの前提としています。 今回の実行環境は下記です。 OS：Windows 10 Pro(20H2) Visual Studio Code：1.56.2 (以降、VSCodeと記述) ※拡張機能として「Remote-WSL」と「Remote-Containers」を使用 Docker：20.10.6 Docker Compose：1.29.1 WSL2：Ubun
ChatGPT、VSCodeのコードを読み込み編集可能に／VSCodeの新機能「Copilot Vision」／AIによるコーディングアシスタントなどまとめ、ほか2025年3月の人気記事 任天堂から新ゲーム機「Switch 2」の詳細が発表されましたね。CPU/GPUとしてNVIDIAのカスタムチップを搭載し、現在のSwitchのゲームソフトはAppleのRosettaのようにバイナリレベルで変換を行うことでSwitch 2で実行可能にしているとのこと。 僕はもう何年もゲーム機を持っていないしほとんどやらないのですが、こうした技術面での話を聞くと使わないのにSwitch 2を買いたくなってしまいます。 さて、3月が終わりましたので人気記事を紹介していきましょう。 1位から3位 1位 ChatGPT、ローカルマシン上のXcodeやVSCodeのコードを読み込み、直接編集してプログラムを作成可
オラクル、Java開発を効率化するVSCode用拡張機能「Oracle Java Platform Extension for Visual Studio Code」を公開 New Oracle open source project released! Oracle Java Platform extension brings full featured @Java development (edit-compile-debug & test cycle) for Maven and Gradle projects to VS Code. Get started: https://t.co/knjeFPRY1Q Learn more: https://t.co/77SIeky3cE#OracleOSS pic.twitter.com/whXIKFsBHV — Oracle Open So
2022年、フロントエンドで注目されているJavaScriptやCSSのフレームワーク・ライブラリ・ツール・エディタ・機能などを紹介します。 今使用しているものはどんな感じか、これから勉強するならどれがよいか、知らない便利なツールや機能はないかなど、フロントエンドの制作で参考になる資料です。 State of frontend 2022 State of frontend 2022は、125か国のフロントエンドデベロッパーにアンケートをおこない、注目されているフレームワーク・ライブラリ・ツール・機能などをまとめたものです。 ここ2年のコロナ禍により、勤務形態が大きく変化しました。データは2022年と2020年の状態も比較できます。 あなたの勤務形態は？ 56%の人がリモートワークをしており、オフィスで働いている人はわずか5%でした。2020年の調査ではこのアンケートをおこなっていませんが、
VSCodeがWebAssemblyの実行時デバッグに対応。C/C++やRust、Zigなどのソースコードと関連付け、変数参照、ブレークポイントなど可能に マイクロソフトは、オープンソースで開発しているコードエディタ「Visual Studio Code」（以下、VSCode）の最新版となる2023年9月版（バージョン1.83）で、JavaScriptデバッガがWebAssemblyのデバッグにも対応したことを明らかにしました。 The JavaScript debugger can now debug code compiled into WebAssembly if it includes DWARF debug information. For example, C++ code compiled using Emscripten can be debugged: pic.twitt
freee Developers Advent Calendar 2022 １日目の記事です！ ついに今年も始まりました freee Developers Advent Calendar、一日目は会計チームの hachi (@hachiblog) からお送りします。 エディタはソフトウェアエンジニアにとって毎日使う道具です。あなたはどんなエディタを使っていますか？そのエディタに満足していますか？ 自分は３年ぐらい VSCode を使っていて大方満足はしていたのですが、細かいところで不満が出てきていました。 そのため思い切って Neovim にエディタを移行しました。 移行して、超快適！という状態ではまだないのですが、VSCode と同等ぐらいまでには使いこなせるようになりました。 自分は今まで何度か VSCode から Vim/Neovim に移行しようとして何度か挫折していて今回始めて成
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに はじめまして、@nkato_です！ 普段は機械学習寄りのソフトウェアエンジニアとして、PythonでMLパイプラインを記述したりGoでバックエンド処理を記述しています。 便利アプリや各種ツールの拡張機能が好きで、これまでにも様々な機能を取り入れて試してきました。 自社エンジニア向けにそういったツールを共有したいと思ったのですが、どうせなら公開情報としてQiitaに投稿しようと思い立ち、まとめてみることにしました。 量は多いですが、どれもおすすめです！ アプリ Alfred ショートカットキーで検索窓を開いて、アプリ名で検索して
あたしのVSCode全然かわいくな〜〜〜〜い！！！！😡 全然可愛くないじゃな〜〜〜い！！こんなんじゃ仕事もやる気にならないわよもう！！ こんなのあたしは認めないんだから！というわけで、いまからこの子をかわいく大変身させていくわよ❤ あ、今回は可読性なんていう野暮なものはお花畑に置いてきたわ。うふふ。 めっかわなTheme❤️（Dracula） というわけでVSCode大変身計画がはじまったわね。 まずあたしが目につけたのは、ずばりTheme(配色テーマ) よ！これ無しじゃかわいいは語れないわ。 とりあえずこれを見てみなさい。 どう？？ これだけで雰囲気がかなり変わったんじゃないかしら。 今回あたしが使用させていただいたのはDraculaというテーマよ！ さっき見せたのはそのなかのDracula Soft というものを適用した画面ね。落ち着いた雰囲気のなかにもかわいさのヴェールをまとってい
みなさん、こんにちは。サイオステクノロジー武井です。今回は、導入がカンタンで開発効率爆上げなVisual Studio Code拡張機能をご紹介したいと思います。 ※ 本記事は技術評論社出版の「Software Design」2022年10月号(詳細はこちら)に私が寄稿した「エディタこそ開発の要 ［最大活用］Visual Studio Code」の記事をベースとしております。是非、Software Designの方も合わせてご覧ください！！ はじめに Visual Studio Code はインストール初期でも機能は豊富であり、かつインタフェースもシンプル、そして拡張機能により利用者の環境に合わせて自由にカスタマイズできることが、大きな魅力となっております。 一方で、その機能の豊富さにより、どの機能を使ってよいのかと迷われる方もいると思います。 そこで本記事では、「導入がカンタンで開発効率
Visual Studio CodeでGitHub Copilot“無料版”が使える！ 「生産性、爆上がり」で感動した話：Deep Insider編集長のネタ帳 GitHub Copilot Free（無料版）、みんな使ってる？ 実際にリアルな開発で活用し、その実力を検証！ AIアシストはどこまで使える？ ソフトウェアエンジニアの仕事はどう変わる？ そして、AI時代に求められるスキルとは？ AIエージェントの可能性も交えつつ、未来の開発を好き勝手に語ります。 連載目次 皆さん、こんにちは！ もしくは、はじめまして！ ＠ITのDeep Insider編集長、一色（いっしき）です。今回から、新連載 『Deep Insider編集長のネタ帳』を始めます。 この連載では、私が日ごろの情報収集や開発、執筆・編集を通じて得た“技術的な気付き”や“新たな発見”を自由気ままに綴（つづ）っていきます。データ
2. HTMLブロックの一括選択設定 HTMLブロックの選択を楽にする為の設定です。 Emmet公式の説明ページ 選択したいHTMLタグにカーソルを合わせ、設定したキーを押すと、 ↓ 設定手順 Code → 基本設定(Preferences) → キーボードショートカット(Keyboard Shortcuts) 「入力してキーバインドを検索(Type to search in keybindings)」欄に、editor.emmet.action.balanceOutと入力 お好みのキーバインドを設定 ※ 動作しない場合、「いつ」の設定を調整してみてください(自分は空欄) .html以外の拡張子で動かない場合(emmet.includeLanguages) .html以外でも拡張子によってはデフォルトでEmmetが問題なく動くかもしれませんが、動かない場合はemmet.includeLan
かわいくないワ...👁👄👁 これではテンション上がりません。コーディングに置いてモチベーションは最も大事な栄養素です。 テーマを変更してモチベを上げていきます。 テーマを変更 illusion お好みのテーマをダウンロードしてテーマを有効にします。 ...いいんじゃない？👁👄👁 まだそこまでかわいくありません。 コーディングにおいて、インデントは最も大事な要素です。そんなに重要なものが光っていないのは怠慢という言葉を禁じ得ません。インデントを光らせていきます。 indent-rainbow 拡張機能を有効にしたらこうなっているはずです。 トーンが暗いわネ...👁👄👁 setting.jsonでハイライトの色を変えていきます。 "indentRainbow.colors": [ "rgba(128, 64, 64, 0.5)", // 1インデント目の色 "rgba(128
MCPを最大限に活用した次世代のWebアプリ開発 Next.js、Honoは Context7 MCP 最新のコードやスニペット デザインを v0やReaddy、same.new(=AIデザイン生成Webサービス)で作成。 フロントエンドを Figma MCP 画面デザイン等 バックエンドを Supabase MCP DB操作等 資料を filesystem MCP 指定したフォルダに資料や1ファイル化したファイルの読み込み テストをPlaywright MCP 自然言語でのテストコードの自動生成 Git管理を GitHub MCP GitHubの自動操作等 保守運用を Raygun MCP でエラーの自動追跡 サブスクライブを Stripe MCP Stripeでの実装 多様なAIモデルを GitHub Copilot Agent mode、Claude Sonnet 3.5 3.7、G
こんにちは、うみのです。 今回はVSCodeにて、よく使っている拡張機能や開発時のテンションを向上させる拡張機能を紹介したいと思います。 VSCode自体はここからダウンロードできます。 indent-rainbow indent-rainbowをインストールすると、ソースコードのインデントに色がついて見やすくなります。 ただインストールしただけでは色が薄いので、設定ファイルから自分好みの色に編集します。 最終的には下記のような色合いのインデントが作成できました。 インデントの色編集の詳しい説明は「虹色のVSCodeでテンション上げて開発する！」で書かれています。
ただし、settings.jsonとかkeybindings.jsonをいじり始めると平気で1日溶けます。私はよく現実逃避で始めたキーボード設定で時間を溶かします。 こんにちは。AWS事業本部コンサルティング部に所属している今泉（@bun76235104）です。 みなさんはエディターは何を利用していますか？（火種） 私はnvimやVSCodeを使い分けています。チームで開発する時やペアプロをする時はVSCodeに便利な仕組みが揃っているからです。 今日はチーム開発の際にさっと導入できるわりに、不要な手間を省いてくれる.vscode/settings.jsonと.vscode/extensions.jsonについてお話しします。 何がうれしいのか .vscode/settings.jsonでは以下のようにファイル保存時のフォーマッタ適用や適用するフォーマッタの指定が可能です。 { "exte
Claude Desktop 等から Cline のようなコーディングを可能にする VSCode 拡張機能です！ インストール方法 & 使い方 まず VSCode 拡張機能をインストールします。 次に、MCP クライアント側の設定をします: mcp-installerを使っている場合: 「vscode-as-mcp-server という MCP サーバーをインストールして」等でお願いすればインストールできます その他: 例えば Claude Desktop の場合、claude_desktop_config.json にて { "mcpServers": { ... "vscode": { "command": "npx", "args": [ "vscode-as-mcp-server" ] } } } このように JSON を追加することで設定可能です。 最後に、拡張機能をインストール
Use Copilot Edits to start an AI-powered code editing session and iterate quickly on code changes across multiple files by using natural language. Copilot Edits applies the edits directly in the editor, where you can review them in-place, with the full context of the surrounding code. Copilot Edits can function in two modes: Edit mode: select which files to edit, provide the relevant context and p
GitHub1s https://github.com/conwnet/github1s GitHub1sの特徴 「GitHub1s」は、プログラマなら誰しもが感じる、GitHubコードの見にくさを解消してくれるツール。URLを変えるだけで、GitHubのリポジトリコードをVSCodeライクに操作可能にしてくれます。 こちらオープンソースとして公開後、瞬く間に6.3K以上のスターがつくほどの人気リポジトリになっています。 GitHub1sをつかってみる 使い方は、GitHub1sのブラウザ拡張をインストールするだけと非常に簡単。 あとは、見なれたいつものGitHubのページで URLを「github1s.com」に変えます。 すると、一瞬で、VSCodeライクなインターフェスに変わります！ あとは、いつも通りディレクトリを選択してコードを読んだり 検索なども操作可能。 ちょっと調べたいリポ
まだ汚れを知らない若者だったころに「プログラムはね、これを使って書くんだよ」と言われて以来Vimは友達だと思ってずっと（15年くらい）使ってきたが、最近は、とくに新しく何かを書くときにはVSCodeを使うようになってきた。コードを書く間隔が広がってきたせいか、新しい技術や言語に対応することができておらず、なんか最初からいい感じになってるエディタを重宝する。歳を取ってきたからなんだろうな、と素直に思うけれど、自分向けになにかをカスタマイズすることにあまり熱を感じなくなっていて、すでにあるよいと分かっているものに自分を調整していくことを選ぶようになってきた。 とはいえ身体はVimに慣れきってるのでVSCodeを使い始めたときはVSCodeVimを使っている……いた、というのが今回の話。よくできてるとは思うが、とにかくu（アンドゥ）の挙動が本家と違うのがどうも身体に合わない。逆にストレスが高まっ
From the creators of Codeium, the best AI-powered code extension Introducing the Windsurf EditorThe new purpose-built IDE to harness magic
必要にかられてVSCode縛り開発を一ヶ月やっていたのですが、普通に便利に開発できるようになったのでメモ。 VSCodeでしかできないことがある VSCode を使うことになった主な原因は2つある。 Live Share ひとつはリモート下で密接にペアプロする必要があったため。 その上で Live Share が便利すぎて手放せなくなった。 docs.microsoft.com 多分対面でやっていても、お互い別のマシンでLive Shareでつないでいる方が都合が良いくらい便利。 最近Pythonばかり書いておりますが、Pythonだと値の型とかわからなくなったときに debugger を使うことがおおく、 その際にお互いデバッガーの状態を共有したまま調査ペアプロとか出来るので非常に便利。 Remote SSH もう一つはリモートマシンにログインしてストレス無く開発するのにRemote S
みなさん、おはようございます！ @f0lstです！ さてさて、いきなりですが。 よく聞くんだ… お前らはスペルミスが多すぎるッッ！！！！！ スペルミスしすぎじゃないかッッ!?!?!?!? と言っておりますが、僕自身もスペルミスとっても多いです そんな我らに救世主を 我は救世主 「Code Spell Checker」 だ... これこそが、全人類に使ってほしいVSCodeのExtention、「Code Spell Checker」です！ これを使えば、タイポの悩みから解放されます それぞれの世界線を見てみよう まず、Code Spell Checkerがない世界線 「さてさて、いつも通りコード書くかのぉ〜〜〜！」 「カタカタカタ〜〜」 「フォッフォッフォッ〜〜」 「完璧じゃのぉ〜〜〜」 ~ 数日後... ~ 「おい！ここタイポしてるぞ！！」 「誰だ！やったのは！！」 「(わしじゃない、わ
はじめに Visual Studio Code（以下、VSCode）でコードを書く際に、個人的に作業効率が上がると感じるショートカットをまとめてみました。 筆者はWindowsユーザーでHTML、CSS、JavaScript、C#、SQLあたりを見たり書いたりしています。 「習うより慣れろ」でVSCodeを開いて実際に打ってみて欲しいです。無意識でもできるように頭と指に刷り込ませて、作業効率を上げていきましょう！！ VSCodeのダウンロードはこちらから。 Ctrl + s / Ctrl + z / Ctrl + y 基本のき！！ 保存、戻る、進む！！！ Ctrl + sは何かするたびに絶対押しましょう。エディタに限らずドキュメントなどもとにかくCtrl + sは無意識下でも使えるようにしておかないと、急に落ちた時などに地獄を見ます。 Tab / Shift + Tab 選択した範囲に一括
VSCode for Web、WebAssembly版言語ランタイムやシェルを拡張機能として実験的に実装。Webブラウザローカルでコードやシェルを実行可能に Visual Studio Code（VSCode）をWebブラウザで利用可能にしたVSCode for Webは、ローカルマシンにVSCodeをインストールすることなく、WebブラウザさえあればGitHub上のソースコードなどを編集可能にする便利なサービスです。 ただし、VSCode for WebはWebブラウザ上で実行されているため、コードを実行するにはサーバなど、言語のランタイムがインストールされている別のマシンが必要となります。 この点は、ローカルマシン上のランタイムを用いてコードを実行できる、デスクトップアプリケーションとしてのVSCodeと比べた場合の、VSCode for Webの欠点といえます。 そこでこの欠点を補う
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
VSCode でホバーして型情報を見ようとすると、交差型はプロパティが展開されません プロパティの型を展開する Mapped Types を通すことで省略せずにプロパティを見ることができます。プロパティが交差型になっていることもあるので、再帰的にプロパティを Mapped Types に通すような型を定義しておいて、通すことでプロパティを全て確認できます type Expand<T> = T extends object ? T extends infer O ? { [K in keyof O]: Expand<O[K]> } : never : T type Temp = Expand<`確認したい型`> 厳密でなくとも簡単にどんなプロパティがあるか把握したいだけなら組み込みの Required や Partial を使うのが手軽です。ただし、あくまでデバッグ用途でそれぞれ省略可能プロ
Qiita初心者です。ご質問・ご指摘はコメントかツイッターまでお気軽にどうぞ！ よかったらLGTMや拡散していただけると励みになります。 Visual Studio Code version 1.66がリリース 2022年3月31日にVisual Studio Code(以下 VS Code)の1.66がリリースされました。 このリリースノートを見た瞬間VS Codeの時代が来たッ！！（言い過ぎ）と言いたくなるくらい興奮しましたので早速リポートさせてもらいます。 そして僕が注目した機能が「Local History（ローカル履歴）」です。 Local History（ローカル履歴）って何？ ファイルの変更の操作が行われたタイミングでローカル上に自動で差分が保存され、現時点のファイルの中身と変更した時のファイルを手軽に比較したり内容を戻したりできる機能です。 どこで確認ができる EXPLOR
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
