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

こんにちは、製造ビジネステクノロジー部の若槻です。 GitHub Copilot in VS Code October release (v0.22) より、custom instructions（カスタムインストラクション） を利用可能になりました。 ドキュメントはこちらです。 これにより、自然言語で記述したコーディングガイドラインなどのドキュメントを元に VS Code 上で GitHub Copilot によるコードのサジェストをカスタマイズさせることが可能となりました。 やってみた 前提 Visual Studio Code 1.95.2 GitHub Copilot Extension v1.245.0 GitHub Copilot Chat Extension v0.22.2 使用したユーザーは GitHub Copilot Business プランを利用しています。 設定しな

本連載では、VSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。VSCodeは、プログラミング以外の用途にも使えます。第10回では、VSCodeをドキュメント作成のためのテキストエディタ、Markdownエディタとして使う方法を紹介します。 はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げたりできることも大きいでしょう。 本連載では、このVSCodeにフォーカスし、基本

Microsoftは2024年9月18日（米国時間）、「Visual Studio Code」の「Python Data Science Extension Pack」（Pythonデータサイエンス拡張パック）をリリースしたと発表した。 この拡張パックは、Pythonでデータサイエンス作業を行うための最も一般的で便利なVisual Studio Codeの拡張機能をまとめたものだ。 データの準備、分析の実施、結果の可視化から、機械学習（ML）モデルのプロトタイピング、評価、トレーニングまで、データサイエンスのワークフローに必要なツールをワンストップで提供する。 Python、GitHub Copilotなど4つの拡張機能 関連記事 「GitHub Copilot Extensions」パブリックβ版、提供開始　拡張機能を作れるツールキットも利用可能に GitHubは、「GitHub Cop

はじめに今回はVisual Studio CodeでOpenAPIを利用する手順を簡単に紹介しようと思います。Swagger Editor（https://editor.swagger.io/）も利用できますが、ローカルで作業してバージョン管理に組み込みたかったのでOpenAPI (Swagger) Editorを導入してみました。 OpenAPIとはOpenAPIはRESTful APIの仕様を記述するフォーマットのことをいいます。YAMLかJSON形式で記述します。 決まったフォーマットなので開発者間で書き方を統一できたり、Excelやドキュメントなどのツールに比べてバージョン管理が楽にできます。 この記事ではVisual Studio Codeに拡張機能を入れてYAML形式で書いていく方法とOpenAPIの基本的な構造を紹介します。 OpenAPIとSwaggerについて OpenA

はじめに # Java デベロッパーの皆さんは IntelliJ IDEA や Eclipse を使ってる方が多いのではないでしょうか。筆者は VS Code を使っています。業務では長らく Java から離れていたのですが、ここ数年はけっこう書いています。かつては IntelliJ IDEA に課金してましたが Java 再開を機に VS Code の環境を整えました。この記事では、定番の拡張やワークスペースの使い方についてご紹介したいと思います。 Microsoft Extension Pack for Java の利用 # 結論から言うと 「Microsoft の Extension Pack for Java を入れましょう。」で終わりです。 Extension Pack for Java - Visual Studio Marketplace Extension Pack はその

はじめに Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました こんな方におすすめ シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢 できること VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる mermaid記法のコードも自動生成されるよ 個人的メリット mermaidの学習コスト0 紙で書くよりも修正しながら書きやすい 導入手順 （簡単7steps） (1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする (2) 新規mdファイルを作成する (3) 以下のようにファイルに入力する (4) すると、薄い文字でMermaidEditorと出てくるのでクリックする (5) 右側にEditorが表示さ

ブログの文章やドキュメント作成など、さまざまなシーンで使われる記法に「マークダウン記法」があります。文字修飾の簡単さや読みやすさから使うタイミングは多々あると思いますが、みなさんは快適にマークダウンを書けていますか？ 筆者はVS Codeでドキュメントをマークダウンで書くことが多く、表の作成・編集やプレビュー表示など、めんどくさい・見づらい・使いづらいと思うことがあります。どうにか快適に書けないかと思いさまざまな拡張機能や設定を試しながら業務を行ってきました。 この記事では、筆者が試した拡張機能やVS Codeの設定の中で便利だったものを紹介します。①から⑥まではすべて無料で利用できるので気軽に試してみてください！ ①マークダウンの表をエクセルからコピペできる拡張機能 VS Codeでの表の作成に重宝しているのが「Excel to Markdown table」という拡張機能です。エクセル

Using WebAssembly for Extension Development May 8, 2024 by Dirk Bäumer Visual Studio Code supports the execution of WASM binaries through the WebAssembly Execution Engine extension. The primary use case is to compile programs written in C/C++ or Rust into WebAssembly, and then run these programs directly in VS Code. A notable example is Visual Studio Code for Education, which utilizes this support

背景 担保したいこと 1: ホットキーで一撃で呼び出せる 2: ウィンドウを透過させてターミナルと他のウィンドウを同時に眺められること 調査したこと & 解決方法 ホットキーで呼び出せるか => hammerspoonで割り当てで対応 ターミナルの透過 => 無理そうなので、代替手段で対応 メモ: ターミナル関係のキーバインド tmuxっぽくしたい その他キーバインド 背景 iTermをずいぶん長く使ってきたけど*1、VSCodeのターミナルが急速に進化しているので、乗り換えを検討した。 VSCodeが色々便利になってきた 自分が使っている範囲だと、vimキーバインドも特に問題ない*2 普段のコーディングはVSCode、コマンド操作くらいしかiTermは使っていない 特にCopilot系の進化は目覚ましい、長い物には巻かれろというか長期的にはエコシステムに乗っておきたい エディタだけでなく

Web版VSCodeがDockerコンテナをWASM環境で起動、Webブラウザ内ローカルマシンとして利用可能に。拡張機能「vscode-container-wasm」登場 WindowsやMacなどのデスクトップPCでVisual Studio Code（以下VSCode）を利用して開発をする場合、同じローカルマシン上でDockerコンテナのLinux環境を起動し、VSCodeのターミナルで接続して操作することは、開発環境としてよくあることだと思います。 これと同じことをWebブラウザ版のVSCodeでも実現する、すなわちWeb版VSCodeが同一Webブラウザ上にWebAssembly化したDockerコンテナを起動し、Web版VSCodeからローカルマシンとして接続し利用できる、実験的実装を実現したVSCodeの拡張機能「vscode-container-wasm」が登場しました。 V

概要 Visual Studio Code（以下VS Code）の拡張機能であるREST Clientが便利だったのでその紹介です。 使い方を文字とgifで説明していきます。 説明はマーケットプレース以上の情報を足していないので、英語に抵抗がなければ公式ページを照会してください。 REST Clientとは VS Code上でHTTPリクエストを送信し、VS Code上でレスポンスを確認できるVS Codeの拡張機能です。 マーケットプレースのREST Clientのページでインストールボタンをクリックするか、VS Codeの拡張機能アイコンをクリックして「REST Client」を検索してインストールボタンをクリックするかで使用できます。 文字だけではイメージし辛いかもしれないので、gifで見てみましょう。 左側のタブがリクエスト、右側のタブがレスポンスです。 ブラウザの拡張機能を使うで

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? swaggerとは 古の時代、API仕様書はwordやexcelで表現され、各所に共有されるというのが一般的でした。 ですが近年、API仕様を表現する際にはswaggerを利用するのが最も効率的で、保守性が高く、世間一般で仕様化され、見やすいというのもあり、一般化されてきたのではないのでしょうか 今回はそんなswaggerの書き方について、まずは書くために覚えておきたいポイントを解説していこうかと思います！ どう書いてくか swagger editorで書く 公式がWeb上に提供しているツールを利用し、すぐにでもswaggerの執筆が可

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

ファイル比較 VSCodeのエクスプローラで、ファイル２つを選択して右クリックメニューから「選択項目を比較」で比較することができます。 また右クリックで、「比較対象の選択」をした後に「選択項目を比較」でも比較することも可能です。 VSCodeのSnippetの使い方 VSCodeのSnippetも便利です。似たような構造のクラスを実装する場合などや、プロジェクト共通で使いがちな書き方というものをSnippetに登録して、効率化することができます。 また、変数を持たせておくこともできます。この場合、Snippetを呼び出した後に変数部分にカーソルがあたるので、そこで変数部分をタイピングできます。 詳細は以下のリンクをご覧ください。 Visual Studio Codeに定型文（スニペット）を登録する方法 VSCodeのUser Snippetを活用しよう！ また後述するSnippet Gen

Language Server Protocol通称LSPの仕様と、各機能をどうやって実装したら良いかの指針を示します。 対象読者 * 言語処理系を実装する人/したい人 * Language Serverを実装する/したい人 * LSPに興味がある人、日本語のまとまった情報源を探している人 * Language Serverがエディタの裏でどのようなことをしているのか気になる人 本書で解説される機能は以下の通りです。 * Diagnostics (検査) * Completion (補完) * Inlay hint * Hover * Goto definition (定義へ移動) * Find references (参照を表示/移動) * Rename (名前変更) * Code actions * Code lens * Signature help * Command * Docu

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

コードがはっきりときれいに見えるように、プログラミング向けに読みやすさを追求したフォント「Commit Mono」を紹介します。 似た字形（「tl1I|!ij」「O0QDØ38B」「:;.,''''"」「2Z5S7T6b」）ははっきりと区別できるようにデザインされており、また等幅フォントでよくある特定の文字間で幅が等しく見えない問題（「mm」「oの左右」など）も改善されています。 Commit Mono. Neutral programing typeface Commit Monoは、デンマーク出身のクリエイティブデベロッパー兼デザイナーであるEigil Nikolajsen氏によるプロジェクトで、プログラミング向けに読みやすさを追求して作成されたフォントです。 ライセンスはSIL OPEN FONT LICENSE Version 1.1で、商用利用は無料、Webフォントに変換したり改

Thunder Client for VS Code Hand-crafted lightweight Rest Client for testing APIs. Supports collections, environments, git collaboration and local storage. Get VS Code Extension Thunder Client CLI Trusted by Customers Preferred by Fortune 500 companies, banks, financial services, tech firms, and retail giants.