この記事は CyberAgent AI Lab Advent Calendar 2024 19 日目の記事です。 はじめに 非ネイティブにとって英語論文執筆はハードルが高いものですが、最近では LLM の発展によりハードルがだいぶ下がりつつあるのではないでしょうか。 LLM 時代の英文執筆方法の一つとして、Overleaf Workshop を使用して、Overleaf のプロジェクトを VSCode 上で編集する方法を紹介したいと思います。VSCode 上で編集することで、GitHub Copilot (+そのほかの強力な拡張機能) を使用することができます。また、ローカルにプロジェクトをシンクさせることで Git 管理することも可能となリます。個人的には LLM による不本意な編集が気になるため、Git 化することで VSCode 上で差分の確認や復元が容易になるのはメリットだと感じて

VSCodeで「GitHub Copilot Free」プランが利用可能に。使えるモデルはClaude 3.5 SonnetまたはGPT-4o、1月あたり2000回のコード補完と50回のチャットまで GitHubは、生成AIによるコード補完やコードの生成、チャットによる対話などのサービスを提供するGitHub Copilotの無料版である「GitHub Copilot Free」プランを発表し、Viusal Studio Code（以下VSCode）で利用可能になったことを発表しました。 A new free tier of GitHub Copilot in @code. 2,000 code completions per month 50 chat messages per month Models like Claude 3.5 Sonnet or GPT-4o More fun

TL;DR これができる機能です。 TypeScript with Prisma ⇩ Rust with SQLx ⇩ SQL ファイルだけでなく、他のファイルの生 SQL クエリ(Raw SQL Query)に対しても SQL の LSP が効きます。 現在は TypeScript 上 の Prisma と Rust の SQLx をデフォルトでサポートしています。Prisma のみ、SQL のシンタックスハイライトが効きます。 なお、タイトル詐欺です。 sqlsurge の設定 名前は sqlsurge[1] です。sqlsurge では SQL の Language Server に Golang 製 の sqls を使っているので、 Golang sqls が必須となります。sqls をインストールしている人は限られていると思うのでインストールガイドを用意しました。 TypeScr

Mermaid Graphical Editor VSCodeの拡張機能です。 Mermaid記法を利用してマークダウン内部で作図しながら、Mermaidそれ自体のエディタを立ち上げることができます。 逆にMermaid Editor側で編集した内容もマークダウンにフィードバックされます。 vs Draw.io Integration 類似ツールとしてDraw.io Integrationがあります。 こちらは.drawio拡張子のファイルをVSCodeで作成すると、draw.ioのエディタが開いて作図ができるツールです。 しかし、draw.ioはあくまで図が書けるところを生業としていて、作成したdraw.ioファイルをマークダウンファイルに埋め込むには画像としてexportが必要です。 できれば自分はマークダウン以外のファイルを作らず、一つのマークダウンファイルだけで完結したいと思ってま

10月15日、MicrosoftはVisual Studio Code（VS Code）バージョン1.94をリリースした。海外のテクノロジーメディアDEVCLASSが報じたところによると、これは初めてECMAScript Modules（ESM）でビルドされた安定版であり、起動時間やバンドルサイズに大幅な改善をもたらしたが、拡張機能は依然として古いCommonJSモジュールに依存している。 ESMは、JavaScriptの公式標準であり、V8などのブラウザのJavaScriptエンジンにネイティブ対応している。V8は、Electronフレームワークを通じてChromiumブラウザに埋め込まれ、VS Codeでも使用されている。VS Codeプロジェクトは元々AMD（Asynchronous Module Definition）を使用していたが、2022年にESMへの移行が始まり、今月には「

もし世界が消滅して Visual Studio Code の設定が失われてしまった時に、この記事を見ればまた VSCode のカスタマイズが復元できる。 ここでは Visual Studio Code の見た目に影響するものについてのみ 取り上げる。 スクリーンショット Editor Terminal Zen Mode 環境 Visual Studio Code バージョン: 1.94.2 (user setup) コミット: 384ff7382de624fb94dbaf6da11977bba1ecd427 日付: 2024-10-09T16:08:44.566Z Electron: 30.5.1 ElectronBuildId: 10262041 Chromium: 124.0.6367.243 Node.js: 20.16.0 V8: 12.4.254.20-electron.0 OS

8月19日、海外の技術情報メディアTheRegisterが「自分で作ればGitHub Copilotは不要」と題した記事を公開した。この記事では、オープンソースのAIコードアシスタント「Continue」を中心に、どのようにしてLLM（大規模言語モデル）をローカル環境で実行し、IDEに統合するかについて解説している。 Continueをインストールする前提条件 Continueをインストールし、動作させるには、以下の前提条件を満たす必要がある。 マシン要件: 動作に必要なマシン: 近年のプロセッサを搭載したシステムであれば動作するが、最適なパフォーマンスを得るためにはNvidia、AMD、またはIntelのGPU（6GB以上のvRAMを推奨）が望ましい。Apple Silicon搭載のMacでも動作するが、16GB以上のメモリを推奨する。 Ollamaモデルランナー: Ollamaモデルラ

はじめに コードエディタ界の王様VisualStudioCode。開発の際に使っている方も多いのではないでしょうか。 本記事では、VSCode(VisualStudioCode)の定番機能を紹介していきます。 この記事を読んで、VSCodeマスターになりましょう！ そもそもVSCodeって？ VSCode（VisualStudioCode)はMicrosoft社が提供する無償のコードエディタです。2015年リリースですが、着々とユーザーを増やしており、2023年現在、世界で最もポピュラーなコードエディタの1つとなっています。 コードエディタって？ 字や記号などのテキストで構成されているファイルを編集するソフトのことをテキストエディタと呼びます。 その中でも、ソースコードの編集を主な目的としたものがコードエディタと呼ばれます。 VSCodeが選ばれる理由 コードエディタはたくさんリリースされ

まだ汚れを知らない若者だったころに「プログラムはね、これを使って書くんだよ」と言われて以来Vimは友達だと思ってずっと（15年くらい）使ってきたが、最近は、とくに新しく何かを書くときにはVSCodeを使うようになってきた。コードを書く間隔が広がってきたせいか、新しい技術や言語に対応することができておらず、なんか最初からいい感じになってるエディタを重宝する。歳を取ってきたからなんだろうな、と素直に思うけれど、自分向けになにかをカスタマイズすることにあまり熱を感じなくなっていて、すでにあるよいと分かっているものに自分を調整していくことを選ぶようになってきた。 とはいえ身体はVimに慣れきってるのでVSCodeを使い始めたときはVSCodeVimを使っている……いた、というのが今回の話。よくできてるとは思うが、とにかくu（アンドゥ）の挙動が本家と違うのがどうも身体に合わない。逆にストレスが高まっ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに この記事は、以下の公式ポストや、VSCode のアップデート後のリリースノートにも出ていた「built-in port forwarding」を試してみた話です。 この機能を使うと、ローカルにあるサーバにインターネットからアクセスできるようになります。 同様のことを実現するものには、有名どころの 1つに「ngrok（エングロック）」があったり、その他にもたくさんの類似サービスがあります。 実際に VSCode の built-in port forwarding を試してみる それでは、VSCode の built-in po

もちろん裏取りは必要ですが、エディターの設定ファイルをどう書くのかAIに聞いてみるのも面白かったです。特にエディターは「○○みたいにしたい」というのを言語化して、どう調べれば良いのかわからなかったので今後も助けてくれそうな気がしています。 こんにちは。AWS事業本部コンサルティング部に所属している今泉（@bun76235104）です。 今回は超がつくほどのの小ネタなのですが、生成系のAIにVSCodeの設定周りについて聞いたり、作業をお願いしたらとても快適だったので使い方の一旦を紹介します。 やってみたことは以下のとおりです。 独自スニペット用のJSON文字列を書いてもらう キーボードショートカットの設定（keybindings.json）の書き方を教えてもらう 設定ファイル（settings.json）の書き方を教えてもらう 実際にやってみた 今回試している環境は以下のとおりです。 試し

この記事は新野淳一氏のブログ「Publickey」に掲載された「VSCodeにFigmaを組み込む「Figma for VS Code」登場。コードの自動補完にも対応」（2023年6月26日掲載）を、ITmedia NEWS編集部で一部編集し、転載したものです。 2022年、米Adobeによる買収が発表され話題となったWebデザインツールを提供する米Figmaは6月23日と24日の2日間、イベント「Config 2023」をサンフランシスコで開催しました。 その基調講演で、VSCodeのコードエディタ画面にFigmaの機能を組み込む「Figma for VS Code」が発表されました。 Figma for VS CodeはVSCodeのプラグインとして提供されます。 基調講演のデモでは、下図のようにVSCodeのコードエディタ画面と並んで右側にFigmaのキャンバス画面が表示されました。

ただし、settings.jsonとかkeybindings.jsonをいじり始めると平気で1日溶けます。私はよく現実逃避で始めたキーボード設定で時間を溶かします。 こんにちは。AWS事業本部コンサルティング部に所属している今泉（@bun76235104）です。 みなさんはエディターは何を利用していますか？（火種） 私はnvimやVSCodeを使い分けています。チームで開発する時やペアプロをする時はVSCodeに便利な仕組みが揃っているからです。 今日はチーム開発の際にさっと導入できるわりに、不要な手間を省いてくれる.vscode/settings.jsonと.vscode/extensions.jsonについてお話しします。 何がうれしいのか .vscode/settings.jsonでは以下のようにファイル保存時のフォーマッタ適用や適用するフォーマッタの指定が可能です。 { "exte

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

VSCode for Web、WebAssembly版言語ランタイムやシェルを拡張機能として実験的に実装。Webブラウザローカルでコードやシェルを実行可能に Visual Studio Code（VSCode）をWebブラウザで利用可能にしたVSCode for Webは、ローカルマシンにVSCodeをインストールすることなく、WebブラウザさえあればGitHub上のソースコードなどを編集可能にする便利なサービスです。 ただし、VSCode for WebはWebブラウザ上で実行されているため、コードを実行するにはサーバなど、言語のランタイムがインストールされている別のマシンが必要となります。 この点は、ローカルマシン上のランタイムを用いてコードを実行できる、デスクトップアプリケーションとしてのVSCodeと比べた場合の、VSCode for Webの欠点といえます。 そこでこの欠点を補う

インストールしたらPCのスタートメニューからUbuntuを開き、ユーザ名とパスワードを設定しよう (Ubuntuを開くだけでユーザ名とパスワードを作成するための入力が求められます) WSLを真面目に知りたい方はこちら↓ https://learn.microsoft.com/ja-jp/windows/wsl/about 導入についての公式ドキュメント↓ https://learn.microsoft.com/ja-jp/windows/wsl/install 2. Dockerの導入 Dockerについてはすっごい雑な説明をするとアプリケーションの環境(コンテナ)を簡単に構築/共有するためのツールという感じです Dockerを使うと主に以下のメリットがあるよ 独立した環境が簡単に建てられる Dockerfile(コンテナを立てるための設計図のようなもの)で管理できるため環境の共有が簡単に