フロントエンドエンジニアが実際に使用しているVSCode拡張機能17選 はじめまして、フリーランスのフロントエンドエンジニアのAKIと申します。今回は、実務で活用している便利なVSCode拡張機能をご紹介させていただきます。特にNext.jsでの開発現場での実用性を重視して厳選しました。 基本的な開発環境を整える拡張機能 1. ESLint コードの品質管理において最重要となる拡張機能です。特にチーム開発においては必須のツールとなります。新規プロジェクトを立ち上げる際、最初に導入を検討すべき拡張機能の一つです。 2. GitLens Gitの操作性を大幅に向上させる拡張機能です。コードの変更履歴やその著者を即座に確認できるため、コードレビューの効率が格段に向上します。チーム開発における情報共有ツールとして非常に重宝しています。 3. GitHub Copilot 有料ではありますが、開発効
ローカルLLMの準備と使用 Ollamaのライブラリから好みのモデルを選びます。 ここではgemma2:9bモデルを例に説明します。 モデルのダウンロードと起動： 対話を終了するには、Ctrl + dか/byeコマンドを入力。 よく使うコマンド モデル一覧表示：ollama list モデルのダウンロードと起動：ollama run モデル名 モデルのダウンロードのみ：ollama pull モデル名 モデルの削除：ollama rm モデル名 VSCodeの準備 まだVSCodeを持っていない場合は、公式サイトからダウンロード。 VSCode拡張機能「Continue」の追加 VSCodeを開き、拡張機能タブへ。 「Continue」を検索。 Continue拡張機能をインストール。 VSCodeとOllamaの連携 VSCodeで「Select model」を選択。 「Add Mode
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
TL;DR 適当な Grammer 拡張を入れて以下の設定を書いておきましょう。 "gopls": { "ui.semanticTokens": true, // you can optionally turn on these features for more colors // see https://go.dev/issue/45753 and https://go.dev/issue/45792 "ui.noSemanticString": true, // delegates string syntax highlighting to vscode "ui.noSemanticNumber": true, // delegates number syntax highlighting to vscode } 本文 仕事では主に Go を書いていて、DBへのクエリは生のSQLを文
出先でも快適な開発環境をVSCode Remote SSH+Tailscale+スマートプラグで手に入れる - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? お盆に時期で帰省される方も多いかと思います。 Qiitaを読まれる方の多くは帰省したときにラップトップを持ち帰るなどして、いつでも開発をできるようにしているかと思います。 私も必ずラップトップを持ち帰り、暇があれば開発などができるようにしていました。 実際はそんな暇がなくて一度も起動しないことが多いですが その時、いつも以下のような不満がありました ラップトップの性能が低くてビルドなどに時間がかかる モバイル回線を使うため、回線が遅くてdocker pullなどに時間がかかる これらをタイトルにあるようにVSCode Remote+Ta
プログラミングで、自分の書いたコードに自信が持てないことってありませんか？ 他人にコードを見せることが恥ずかしくて嫌だという経験、あるのではないでしょうか。 私も以前はそうでした。 コードが汚いと思われたり、能力が低いと思われたりするのではないかと不安になり、また自らの内面をさらけ出すようで何とも恥ずかしいものでした。 しかし、プログラミング能力向上にとって、コードを他人に見せてフィードバックを受けることは大切です。 そこで試していただきたいのが、VSCodeエディタと拡張機能を使う方法です。コードのエラーチェック、整形、補完などを拡張機能によって自動でできるので、読みやすさや品質を高めることが簡単にできます。 今回は、Pythonのコーディングに役立つ拡張機能をいくつか紹介します。 それぞれの拡張機能のインストールや設定方法、使い方のポイントなどを詳しく説明します。 ブログ対象者 自分の
VSCode Debugging公式ガイドの日本語訳です。 ※ 翻訳記事は、2023年5月3日時点の公式情報に基づいています まずは個人的な収穫をば VSCodeは.vscode/Launch.jsonという設定ファイルをいじって、 自分好みのデバッグ環境をカスタマイズできる👍いいね VSCodeは、ワークスペース (プロジェクト ルート フォルダー) またはユーザー設定またはワークスペース設定の .vscode フォルダーにある Launch.json ファイルにデバッグ構成情報を保持します。 手順 公式ページ（英語版）：https://go.microsoft.com/fwlink/?linkid=830387 本記事（日本語版） ：起動構成 (Launch configurations) デバッグ設定の使用例 とある海外のVSCode拡張機能のOSS開発プロジェクトのlaunch.
SafariやChrome、Firefox、Xcode、VSCode、Finder、ターミナルなどアプリのタブをリスト表示＆横断検索できるMacアプリ「TabTab」がリリース。
SafariやChrome、Firefox、Xcode、VSCode、Finder、ターミナルなどアプリのタブを表示/横断検索できるMacアプリ「TabTab」がリリースされています。詳細は以下から。 SafariやChrome、Firefoxなどのブラウザはもちろん、現在ではFinderやXcode、ターミナルなど多くのアプリがタブ機能をサポートしており、表示したいタブの管理が難しくなっていますが、その様な際にタブを横断検索できるMacアプリ「TabTab」が新たにリリースされています。 TabTab helps you stay productive by making it easy to manage windows and tabs across all your Mac apps. It’s fast, intuitive, and runs entirely on your
はじめに 株式会社ACCESS Advent Calender 2023の10日目の記事です。 .NET MAUIについて .NET MAUI（Multi-platform App UI）は、C#とXAMLを使用してモバイルアプリやデスクトップアプリを開発することができるクロスプラットフォームのフレームワークです。その名の通り、Microsoftの.NETシリーズとして提供されています。 これまではXamarin.Formsという名前で提供されてきましたが、2024年5月1日にサポートが終了し.NETシリーズに統合される予定となっています。 Visual Studio for Macのサポート終了について .NET MAUIでiOSやMacOS向けのアプリをビルドするにはmacOSの環境が必要ですが、 公式から提供される開発環境としては、Visual Studio for Macが唯一の手
What's Changed New Pets Add a panda by @jeferris in #615 added frog pet by @JustOnesAndZeros in #641 Add snail pet by @WoofWoof0 in #577 Fix/issue 647 + add snail by @thuynguyenbm in #648 Fixes Modified all chicken gifs to have the same canvas size by @sharktrexer in #622 Various Changes Add new pets to translations. Improve some languages by @tonybaloney in #575 Bump braces and gulp by @dependabo
GitHub - mohsen1/llm-debugger-vscode-extension: VSCode extension that demonstrates the use of large language models (LLMs) for active debugging of programs
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
{ // デバッグ中に行内に変数値を表示 "debug.inlineValues": true, // デバッグコンソールの表示方法 "debug.internalConsoleOptions": "openOnSessionStart", // デバッグビューの表示方法 "debug.openDebug": "openOnSessionStart", // テキストコピー時に書式設定を含める "editor.copyWithSyntaxHighlighting": false, // ドラッグアンドドロップで選択範囲のテキストを移動できるようにする "editor.dragAndDrop": false, // 貼り付けを行ったときに自動でフォーマット "editor.formatOnPaste": true, // ファイル保存時に自動でフォーマット "editor.formatOnS
ローカル環境に Rust をインストールすることなく、Rust の開発環境を構築していきましょう！ まずは Docker と VSCode の拡張機能 Dev Containers をインストールしておきましょう！ Microsoft 製のイメージを使う Dev Container で Rust を 簡単に使える ようにするには Microsoft 製のイメージがおすすめです。 devconainer.json を作成する ルートディレクトリに .devcontainer/devconainer.json を作成します。 なお、Rust で実装する際に便利な VSCode 拡張機能も定義してありますが、詳細については後述します。 { "name": "Rust Sandbox on Dev Container", "image": "mcr.microsoft.com/devcontain
2. llama-vscode のインストールllama-vscode は、ggml.ai なる企業によってv0.0.1が2025年1月21日にリリースされたVSCode拡張で、llama.cpp を経由してローカルLLMによるコード補完を行います。 VSCodeを起動したら、左のタブの拡張機能/Extensions （□が4個あるやつ） から拡張機能を検索します。llama vscode と検索してインストールします。 llama-vscode利用するためにはモデルが必要なので、モデルをダウンロードします。 3. モデルのダウンロードw64webkit.exe を起動し、モデルをダウンロードしたいディレクトリに移動します。 第1回・第2回は執筆時最新のモデルであるDeepSeek R1を利用してきましたが、こいつはコード補完機能に対応していないので使えません（注1）。 今回はQwen2.
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を自分好みにカスタムして、開発を楽しくしたい Visual Studio Codeはカスタマイズ性が高く、簡単な設定変更や拡張機能の導入だけで作業効率が格段に向上します。 本記事では、Visual Studio Codeをより快適に使うための拡張機能を紹介し、日々の開発を効率化するヒントをお届けします。 Visual Studio Codeとは Visual Studio CodeとはMicrosoft社が提供を行うコードエディターで、通称「VSCode」と呼ばれています。 VSCodeはオープンソースのソフトウェアで
みなさんこんにちは！ ONE CAREER CLOUD採用管理（ATS）チームにて、ソフトウェアエンジニアを担当しているコ ショウトウ（Github：jamesdongdong）です。 今回は、フロントエンド開発におすすめのVSCode 拡張機能について紹介したいと思います！ きっかけ弊社佐藤が執筆したお気に入りツールの紹介記事は、ご覧いただけたでしょうか？ 実際、私は佐藤の記事に載っていたツールを色々と導入してみたのですが、自分の作業効率が大幅に向上しました。特に、Raycast を活用してブックマークをすぐに開いたり、ウィンドウサイズを設定したりするようにしたことで、作業を一気に効率化できたと感じています。 便利なツールについて言えば、私も仕事の効率を高めるために普段から多くのVSCode拡張機能を使用しています！「自分も皆さんに、仕事の効率が高まる、非常に役立つおすすめのツールを紹介
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 目次 １ はじめに ２ 縦書きのプレビュー、ブラウザからの確認も可能 縦書きプレビューの表示方法 ブラウザで縦書きプレビュー ３ 入れ子のフォルダーごとに文字数の確認が可能 ４ 締め切りフォルダー機能付き、複数のファイルを簡単に結合 締め切りフォルダー機能とは 締め切りフォルダーの設定方法 締め切りフォルダー内のテキストファイルを結合 ワークスペース内のテキスト結合 ５ Git ファイル管理で前日から現在までの編集距離をリアルタイムに表示 ６ おわりに １ はじめに VSCode には小説執筆に特化した拡張機能があります。 『novel
はじめに Flutter開発におけるエディターはVSCodeを使用している筆者ですが、学習初期の頃は拡張機能の意味やどの拡張機能を入れるべきかなどがわからず苦労しました。 VSCodeはカスタマイズ性が高く、拡張機能を入れていくことで文字通り機能を拡張することができます。 拡張機能を入れることが前提のエディターであり、必要な拡張機能を自分で調べて入れていく必要があります。 必要な拡張機能がわかり、入れることができれば断然便利なエディターとなります。 そんなこんなで実務経験１年が経過し、知見が溜まってきたのでこの機会におすすめの拡張機能を共有しておければと思い執筆しております。 記事の対象者 VSCodeを使ってFlutter開発をしている方 Flutter or VSCode初学者でおすすめの拡張を知りたい方 他の人がどんな拡張を入れてるか気になる方 記事を執筆時点での筆者の環境 [✓]
VSCodeをUML図やフローチャート作成に使ってみよう
本連載では、VSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。VSCodeは、プログラミング以外の用途にも使えます。第11回では、VSCodeをUML図やフローチャートなどのダイアグラム作成のツールとして使う方法を紹介します。 はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げたりできることも大きいでしょう。 本連載では、このVSCodeにフォーカスし、基本的な使い方か
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 転職してもうすぐ 1 年が経とうとしています。転職前はドキュメントの作成が Word 一択でしたが、転職後は Markdown を使う機会が非常に増えました。 Markdown を使い始めた頃は、編集のしづらさ感じ、利用するメリットをあまり感じていませんでした。 ただ、Markdown を使用することで得られる以下の利点は感じていました。 テキストファイルであるため、git での履歴管理が容易 GitHub でドキュメントを公開することができる pull request を使って他の人とドキュメントを共同編集できる スタイルを
VSCode + Continue と Ollama + DeepSeek Coder で、フリーでサクサク動くAIコーディング環境を作る - Qiita
概要 VSCode と Continue という拡張機能を使って、無料でサクサク動くAIコーディング環境を作成する。 内部ネットワーク上に Ollama と DeepSeek Coder をインストールした別のPCを用意して、環境を別々に分けることにより、普段使っているPCのリソースを節約し、快適にコーディングできるようにする。 できる事 ソースコードの記述中に、生成AIが次の候補を提案してくれる 「C#でクイックソートのGeneics版のコードを書いて」などと指示を与えると、その関数を書いてくれる テストコードを書いてくれる コードのレビューをしてくれる AIによるチャット機能がついているので、設計の相談に乗ってくれる 環境 DeepSeek Coderとは Cursor、Github Copilot などと同様の、生成AIによるコードアシスタント モデル。 Meta社の Code Ll
おさらい：拡張機能のインストール方法 拡張機能のインストール方法をおさらいしましょう。 拡張機能タブを選択する 拡張機能を検索する（基本的には名前で検索しましょう） 目的の拡張機能を選択し、「インストール」をクリックする これでインストールが完了します。物によってVSCodeの再起動や初期設定が必要なことがありますが、たいてい画面上に指示が出るので安心してください。 基本編｜絶対に入れよう Japanese Language Pack for Visual Studio Code 当たり前と言えば当たり前なのですが、VSCodeを日本語化してくれる拡張機能があります。必ずインストールしておきましょう。 リンク：Japanese Language Pack for Visual Studio Code – Visual Studio Marketplace インストール数：約812万 評価：
フリーランスWebライター兼Web製作者。Webライターとしてガジェットメディアやプログラミングに関する記事を執筆する傍ら、LP制作とWordPressの改修案件もこなしつつ、活動しています。 profile ClineはVisual Studio Code（VSCode）やCursorで利用できるAIアシスタント型の拡張機能。コードの作成や修正、プロジェクト構成の支援、ターミナルコマンドの実行など開発者の幅広い要望に応えるよう設計されているのが特徴です。 ClaudeやGeminiなどのAPIキーを指定し、プロンプトを通してファイル作成からコード生成、ターミナルでの実行までの一連作業を実行できるのが魅力です。 特にAnthropic社のClaude 3.5 Sonnetモデルを活用することで、複雑なソフトウェア開発プロセスを効率的に進めることが可能。プログラマーの生産性向上をサポートしま
NeovimとVSCodeと私 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? TD;LR VSCodeとNeovimを使った開発環境の構築について記載します。 背景 簡単に私のテキストエディタ遍歴を書いておくと以下のとおりです。 2003年頃: 中学2年生のときにTeraPadというテキストエディタに出会う。この頃はウェブサイトを作ったり、フリーで配布されていたPerlで書かれたCGIを少し編集したりするのに使っていた。 2004年ごろ： viに出会う。この頃は自宅サーバを稼働させ始めて、SSHでログインしてファイルを編集するのに使っていた。プログラミングはもっぱらTeraPadで行っていた 。 2009年頃:
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Future Advent Calendar 2024 の 18 日目のエントリです。 テックリードとしてチームの開発メンバにどのように開発環境を提供するかというのは重要なテーマです。 本記事では筆者がエンタープライズな現場において実践している環境構築方法について紹介します。あくまで 1 つの事例としてお読みください。 前提 VSCode で開発可能な Web アプリケーションの開発を想定 開発者は 20 名から 50 名程度、技術スキルは新人などのジュニアなメンバからシニアなメンバまでさまざま 開発者は異なる現場でも開発をし
【Continue】VSCodeにAIによるプログラミング支援機能を付ける - パソコン関連もろもろ
はじめに以前「llama.cpp」を使って同様のことをしました。 LLM（大規模言語モデル）をローカルで実行して、それを VScode から使う。これですこれ、やりたかったのは正にこれです。 - パソコン関連もろもろ 今回は「Ollama」を使います。 以前できなかったコード補完の機能も実装することができました。PC環境 Windows 11 OllamaのインストールGitHubから「OllamaSetup.exe」をダウンロードして実行するだけでインストールは完了します。 モデルのインストールコマンドプロンプトで以下を実行します。 ollama pull codellama:7bollama pull deepseek-coder:6.7b-baseインストールしたモデルは「ollama list」と入力すれば一覧で見ることができます。 インストールしたモデルを削除する場合は「olla
この記事のポイント GitHub CopilotはAI駆動のコーディングアシスタントで、コード補完やチャット機能を提供VS Code、Visual Studio、JetBrains IDEなど主要な開発環境に対応個人向けは無料プランあり、企業向けは月額$19から。プロンプト入力で動画生成、テストデータ作成、ドキュメント作成など多様な開発タスクをサポート著作権リスクに注意が必要。企業向けプランではパブリックコードとの一致をブロック可能 Microsoft AIパートナー、LinkX Japan代表。東京工業大学大学院で技術経営修士取得、研究領域：自然言語処理、金融工学。NHK放送技術研究所でAI、ブロックチェーン研究に従事。学会発表、国際ジャーナル投稿、経営情報学会全国研究発表大会にて優秀賞受賞。シンガポールでのIT、Web3事業の創業と経営を経て、LinkX Japan株式会社を創業。 G
"todo-tree.highlights.customHighlight"では次の設定ができます。 foreground - エディターのハイライトおよびルーラーのマーカーの前景色を設定する。 background - エディターでハイライトの背景色を設定する。 opacity - 背景色の透明度を設定するパーセント値。 fontWeight、fontStyle、textDecoration - 標準の CSS 値でハイライトのスタイルを設定する。 borderRadius - ハイライトの背景の境界線の半径を設定する。 icon - ツリービューに別のアイコンを設定する。アイコンは以下のいずれかから選択。codiconから選択する場合には「$(icon)」で指定。 iconColour - ツリー内のアイコンの色を設定する。指定しない場合は、前景色または背景色が使用される。色は前景色と
VSCodeでコードを修正すると、次に修正すべきコードの場所を提案してくれる「Copilot Next Edit Suggetions」プレビュー公開
VSCodeでコードを修正すると、次に修正すべきコードの場所を提案してくれる「Copilot Next Edit Suggetions」プレビュー公開 マイクロソフトはコードエディタ「Visual Studio Code」の新機能として、コードを修正すると次に修正すべきコードの部分を提案してくれる「Copilot Next Edit Suggetions」をプレビュー公開したことを明らかにしました。 この新機能は2月7日に公開されたVisual Studio Code 1.97（January Update）に搭載されています。 Version 1.97 of @code is out now with Copilot Next Edit Suggestions, Python no-config debugging, SVG image preview, and more! Full r
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドエンジニアが実際に使用しているVSCode拡張機能17選
MacでローカルLLMを使う：OllamaとVSCode設定
マークダウンで簡単スライド作成【vscode-reveal】 - Qiita
VSCodeでGoの文字列内のSQLをシンタックスハイライトしたい - ちなみに
【Python】VSCode拡張機能で自信をもってコーディングする方法！
VSCodeを使ったデバッグテクニック：公式ガイドの日本語訳 - Qiita
VSCodeで.NET MAUIの開発環境構築 - Qiita
Release 1.28.0 · tonybaloney/vscode-pets
VSCodeで特定の拡張子だけformatterを走らせるには - Qiita
Dev Container で VSCode 拡張機能付きの Rust 開発環境を構築する
GPUなしでも動く！ローカルLLMとllama.vscodeでコード補完｜しぴちゃん
C/C++をVSCodeで開発するための環境構築 - Qiita
初心者にもわかる「VSCode」おすすめ拡張機能で効率UP！ | エンベーダー
フロントエンド開発おすすめのVSCode拡張機能｜ONE CAREER Tech Blog
VSCode で小説執筆 『novel-writer』 触ってみた - Qiita
【VSCode】2025年度版 Flutterエンジニアにおすすめの拡張機能17選
痒いところに手が届く！VSCode で快適に Markdown ドキュメントを作成する方法 - Qiita
【2024年版】おすすめVSCode拡張機能11選と、実はもう不要なもの4選【Webエンジニア必見！】
話題のAI拡張機能「Cline（クライン）」の使い方。VSCode・Cursorユーザー必見の神機能を紹介
エンタープライズな現場で実現するモダンな開発環境構築（WSL2 + VSCode Dev Containers） - Qiita
Github Copilotとは？使い方や無料プラン、VScodeへの導入方法を解説 | AI総合研究所
【VSCode】TODOコメントを一覧表示する方法 - Qiita