vscode-ruby-lightの開発中に考えたことを書いていきます。今回は、内部で利用しているRuby用パーサーのtree-sitter-rubyからPrismへの移行について書きます。 @ruby/prismパッケージの概観 Prismは、JavaScriptからもその実装を利用できるよう、@ruby/prismという名前でnpmパッケージを公開しています。 何が含まれているパッケージなのかというと、まずWASMバイナリという形でコンパイルされたPrismの実装と、それを便利に使うためのJavaScriptの実装、それからTypeScript向けの型定義ファイルが含まれています。これらはESModuleという形式に従ってモジュール化されています。またruby/prismのリポジトリ内に、JavaScript向けの簡単なドキュメントも含まれています。 もちろん、本拡張でもこのnpmパッ
はじめに こんにちは、アノテーションのなかたです。 今回は、VSCodeのPython拡張機能でテストカバレッジ表示機能が追加されたので、検証してみました。 以前までは、Coverage Gutters 等の拡張機能を追加でインストールする必要がありましたが、Python拡張機能が対応したことで導入がしやすくなったと思います。 やってみる 今回は、Pytest と pytest-cov によるテスト環境でカバレッジ表示機能を試しています。 また手順 1, 2, 3 については、VSCode で Pytest によるテストカバレッジ環境を用意する手順になりますので、用意できている方は手順4から読み進めていただければと思います。 1. テスト環境の準備 Python拡張機能をインストールします。 また、Pythonやライブラリをインストールします。 Python仮想環境の作成やPytestのイ
フロントエンドエンジニアが実際に使用しているVSCode拡張機能17選 はじめまして、フリーランスのフロントエンドエンジニアのAKIと申します。今回は、実務で活用している便利なVSCode拡張機能をご紹介させていただきます。特にNext.jsでの開発現場での実用性を重視して厳選しました。 基本的な開発環境を整える拡張機能 1. ESLint コードの品質管理において最重要となる拡張機能です。特にチーム開発においては必須のツールとなります。新規プロジェクトを立ち上げる際、最初に導入を検討すべき拡張機能の一つです。 2. GitLens Gitの操作性を大幅に向上させる拡張機能です。コードの変更履歴やその著者を即座に確認できるため、コードレビューの効率が格段に向上します。チーム開発における情報共有ツールとして非常に重宝しています。 3. GitHub Copilot 有料ではありますが、開発効
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
お盆に時期で帰省される方も多いかと思います。 Qiitaを読まれる方の多くは帰省したときにラップトップを持ち帰るなどして、いつでも開発をできるようにしているかと思います。 私も必ずラップトップを持ち帰り、暇があれば開発などができるようにしていました。 実際はそんな暇がなくて一度も起動しないことが多いですが その時、いつも以下のような不満がありました ラップトップの性能が低くてビルドなどに時間がかかる モバイル回線を使うため、回線が遅くてdocker pullなどに時間がかかる これらをタイトルにあるようにVSCode Remote+Tailscale+スマートプラグを組み合わせることで、改善できそうだったので紹介します VSCode Remote SSH デスクトップPCなど性能の高いPCが自宅にあることが前提ですが、そうしたPCは基本的にラップトップより性能が高いです。また、そのPCにリ
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.
プログラミングで、自分の書いたコードに自信が持てないことってありませんか？ 他人にコードを見せることが恥ずかしくて嫌だという経験、あるのではないでしょうか。 私も以前はそうでした。 コードが汚いと思われたり、能力が低いと思われたりするのではないかと不安になり、また自らの内面をさらけ出すようで何とも恥ずかしいものでした。 しかし、プログラミング能力向上にとって、コードを他人に見せてフィードバックを受けることは大切です。 そこで試していただきたいのが、VSCodeエディタと拡張機能を使う方法です。コードのエラーチェック、整形、補完などを拡張機能によって自動でできるので、読みやすさや品質を高めることが簡単にできます。 今回は、Pythonのコーディングに役立つ拡張機能をいくつか紹介します。 それぞれの拡張機能のインストールや設定方法、使い方のポイントなどを詳しく説明します。 ブログ対象者 自分の
VSCode、便利なのですが、左側のバー (Activity Bar) がスペース食ってるのが鬱陶しく感じることもあります。 かといって色々便利な機能 (ファイルリスト、検索とかとか…) もあるので、完全に消してしまうのもそれはそれで不便です。 色々設定を試してみて、その辺なんとかするような個人的にしっくり来る設定を見つけたので、今回はそれを紹介しようと思います。 最終的にはこんな感じに、使わない場合は横をめいいっぱい使えるように、使う場合もやや省スペースで使えるようになります。 1. Activity Bar の位置を top にする 最近の VSCode の update で Activity Bar の場所を変えられるようになりました。まずはこれを使ってみます。 Activity Bar 上で右クリックをして、 「Activity Bar Position」 → 「Top」を選択しま
はじめに Visual Studio Code（以下、VS Code）は、豊富な機能を備えた高機能なエディターです。その中でも、マルチカーソル機能は特に便利で、同じ作業を複数箇所で繰り返す場合に、大きな効果を発揮します。この記事では、VS Codeのマルチカーソルショートカットのうち、特に便利な8つを紹介します。 vscode のマルチカーソルショートカット8選 ⌘ + D : 選択文字と一致する文字にカーソルを追加します カーソル位置にある文字列と同じ文字列を選択して、⌘ + D キーを押すことで、次の同じ文字列を自動的に選択します。この操作を繰り返すことで、複数のカーソルを同時に編集することができます。 ⌘ + U : カーソルを一つ巻き戻すことができます カーソルを一つ前に戻すことができます。これにより、間違って追加されたカーソルを削除することができます。 ⌘ + Dで選択しすぎた場
VSCodeでC言語プログラミング事始め HelloWorldがnmakeできるまで - Qiita
はじめに 諸般の流れからC言語を使う機会が増えてきたので、あらためてVSCodeでC言語プログラミングができる環境構築を再確認しておきます。諸般の事情でWindows＋MSCです。今回はmakefileを使ってHelloWorldがビルドできる状況を確認します。HelloWorld単体をビルドするのにmakefileを使うことはあまり意味のないことかもしれませんが、シンプルな環境でなにか見えてくるものもあるかもしれないということで。 前提条件 VSCodeはなんらかのバージョンが既にインストールされていることが前提です。 MSCもなんらかのバージョンのVisualStudioのVisualC++がインストールされていることが前提です。 今回は具体的には下記のバージョンを想定してお話が進みます。前回の記事でtasks.jsonとlaunch.jsonを生成して通常の[実行とデバッグ]からデバ
はじめに 株式会社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が唯一の手
こんにちは、iimonでフロントエンドエンジニアをしています。ほでぃーです。 本記事はiimonアドベントカレンダー23日目の記事となります。 はじめに 今回はフロントエンド開発をする上で、普段使用している拡張機能と設定を紹介します。 拡張機能 開発共通 プラグイン名 機能 Japanese Language Pack for Visual Studio Code Visual Studio Codeを日本語化する TODO Highlight TODOを分かり易く表示 Code Runner コードを簡単に実行することができる Rainbow CSV CSVを見やすくする REST Client VS Code上でHTTPリクエストを送信できる Path Intellisense ファイルやディレクトリパスのオートコンプリートが効く Multiple cursor case preser
vscode-ruby-lightの開発中に考えたことを書いていきます。今回は、2022年末に初期版を開発してから1年ほど経った2023年末時点でのふりかえりを行います。 vscode-ruby-lightとは 1年ほど前に、Ruby用VSCode拡張: vscode-ruby-lightという記事を書きました。要約すると、Rubyがインストールされていなくても使える、Rubyを書くのがちょっと便利になるVSCode拡張をつくってみているという話です。具体的には、シンタックスハイライトやトークンの選択など、VSCode標準の機能よりちょっと良い編集体験を提供しようという目的の拡張です。 あまり真面目に開発している訳ではなく、VSCode拡張やLSPについての勉強も兼ね、ちょっとした趣味プロジェクトとして開発したりしなかったりしているというのが実情です。開発自体は1年ほど停滞していたのですが
はじめに 初めまして。エンジニアのkeita_Maxです。 VSCodeで特定のページだけformatterを走らせるにはどうしたらいいか調べて、分かったので備忘録として残します。 この記事にいろいろ書いてありました。 結論 "editor.formatOnSave": true, "[html]": { "editor.formatOnSave": false }, "[javascript]": { "editor.formatOnSave": false }, "[javascriptreact]": { "editor.formatOnSave": false }, "[typescript]": { "editor.formatOnSave": false }, "[typescriptreact]": { "editor.formatOnSave": false }, (引用:
ローカルLLMをVSCodeでCursorのように使えるcontinue.devの設定方法｜AI情報発信@Shinano Matsumoto
今回はローカルLLMをVSCode上に組み込んでCursorのような事が可能になる拡張機能continue.devを紹介。 使い方インストール拡張機能continue.devをインストールします。 インストールが完了すると左にアイコンが表示されます。 アイコンをクリックするとチャット画面が出ます。無料回数分（いくつか不明）を使い切るまではGPT-4が使えます。ラッキー。 プラスボタンを押せば色々なオプションが選べます。APIキーを入れてGPT-4やGeminiを使うことも可能。 ローカルLLMでの使い方拡張機能アイコンをクリックして出てきた画面の右下の歯車マークをクリックしてconfigファイルを開きます。 models内に下記のコードを追加します。好きな場所で良いのですが、" , "などの記入に注意してください。追加するとモデルを選ぶプルダウンに自分のモデル名が表示されます。上記の画像で
VSCode の設定のすゝめ はじめに みなさんこんにちは、GENEROSITY の西村です。 ご存知の通り、VSCode（Visual Studio Code）は、Microsoft が開発したフリーでオープンソースのコードエディタです。 非常に出来ることが多く、設定は自分好みにカスタマイズ可能で拡張機能も豊富です。 しかし、その力を最大限に引き出すためには、適切な設定が必要です。 設定を見直し、DX(Developer Experience)を向上しましょう！ おことわり 今回は、Mac の環境での設定について記載をします。 ショートカットキーは⌘(Cmd), ⌥(Option), ⇧(Shift), ^(Ctrl)を使用します。 適宜 Windows ユーザーの方は置換していただければと思います。 最後に本記事の私の考えや発言は個人の見解として捉えていただければと思います。 キーボー
Java言語での開発から3～4年程離れていました。 過去のjavaの開発環境では、IDEはEclipseやSTS、IDEA等を使ってきました。 また、javaではdocker環境も利用したことはありませんでした。 ここ数年、他の言語でVSCodeやdockerを触ってきたので、 それらを使ってJava環境を整えてみました。 今回やること java開発環境のコンテナ化（dockerを使って開発メンバー皆同じ環境を簡単に）。 今回はSpringBootでRESTapiのサンプルを動かすところまで。 前提 私がWindowsユーザのため、Windows前提で記載してますので、適宜読みかえてください。 以下無ければ準備しておいてください。 WSL2 ※Windowsユーザのみ https://learn.microsoft.com/ja-jp/windows/wsl/install Docker
目次 １ はじめに ２ 縦書きのプレビュー、ブラウザからの確認も可能 縦書きプレビューの表示方法 ブラウザで縦書きプレビュー ３ 入れ子のフォルダーごとに文字数の確認が可能 ４ 締め切りフォルダー機能付き、複数のファイルを簡単に結合 締め切りフォルダー機能とは 締め切りフォルダーの設定方法 締め切りフォルダー内のテキストファイルを結合 ワークスペース内のテキスト結合 ５ Git ファイル管理で前日から現在までの編集距離をリアルタイムに表示 ６ おわりに １ はじめに VSCode には小説執筆に特化した拡張機能があります。 『novel-writer』 は、プロの小説家、藤井太洋氏が小説執筆用に自ら開発した VSCode 拡張機能です。ちょっと試しにいろいろと触ってみたのですが、これがなかなかの優れもの！ せっかくなので気に入った点を中心に使い方を紹介したいと思います。 ２ 縦書きのプレビ
😎 VSCode + Neovim Setup: keyboard-centric, powerful, reliable, clean, and aesthetic development…
Here I will share my current development environment setup and the philosophy behind it. I’ll try to keep this article updated with my latest approaches and insights. Philosophy DefinitionProductivity, power, reliability, cleanliness, aesthetics — it’s all about that. ProductivityWhen I say “productivity”, I mean being able to edit your code and navigate through your editor blazingly fast. This ve
はじめに 皆さん、こんにちは。都内でソフトウェアエンジニアをしているYSasagoです。今年のAWS re:Invent 2023で注目を集めた新サービス、AmazonQをもう試されましたか？私は、このサービスが特に大きな話題を呼んだと感じています。AmazonQは発表と同時にAWSコンソールにChatBoxが表示され、すぐに試すことができました。さらに、IDE（VSCodeなど）にも対応しているとのことで、私は日常的に使用しているVSCodeからAmazonQを使ってみました。 AmazonQとは Amazon Qは下記の特徴があり、OpenAIのChatGPTに似た、Amazon版の生成AIアシスタントです。現在(2024年1月時点)はプレビュー版で、VSCodeからAmazonQの利用は無料です。 •AWSの17年分の知識を学習 •AWSコンソール、IDE、ドキュメント内でサポート
はじめに 転職してもうすぐ 1 年が経とうとしています。転職前はドキュメントの作成が Word 一択でしたが、転職後は Markdown を使う機会が非常に増えました。 Markdown を使い始めた頃は、編集のしづらさ感じ、利用するメリットをあまり感じていませんでした。 ただ、Markdown を使用することで得られる以下の利点は感じていました。 テキストファイルであるため、git での履歴管理が容易 GitHub でドキュメントを公開することができる pull request を使って他の人とドキュメントを共同編集できる スタイルを気にせずに書ける 以上のような利点は感じつつも、Word で可能であった以下のようなことができないことが非常にストレスでした。 テキスト状態での編集が面倒なときがある（Live Preview したい） 表の作成が面倒 見出し番号を自動で振りたい 画像の挿入
VSCode + Continue と Ollama + DeepSeek Coder で、フリーでサクサク動くAIコーディング環境を作る - Qiita
VSCode + Continue と Ollama + DeepSeek Coder で、フリーでサクサク動くAIコーディング環境を作るVSCodecontinue生成AIollamadeepseek 概要 VSCode と Continue という拡張機能を使って、無料でサクサク動くAIコーディング環境を作成する。 内部ネットワーク上に Ollama と DeepSeek Coder をインストールした別のPCを用意して、環境を別々に分けることにより、普段使っているPCのリソースを節約し、快適にコーディングできるようにする。 できる事 ソースコードの記述中に、生成AIが次の候補を提案してくれる 「C#でクイックソートのGeneics版のコードを書いて」などと指示を与えると、その関数を書いてくれる テストコードを書いてくれる コードのレビューをしてくれる AIによるチャット機能がついてい
NeovimとVSCodeと私 - Qiita
TD;LR VSCodeとNeovimを使った開発環境の構築について記載します。 背景 簡単に私のテキストエディタ遍歴を書いておくと以下のとおりです。 2003年頃: 中学2年生のときにTeraPadというテキストエディタに出会う。この頃はウェブサイトを作ったり、フリーで配布されていたPerlで書かれたCGIを少し編集したりするのに使っていた。 2004年ごろ： viに出会う。この頃は自宅サーバを稼働させ始めて、SSHでログインしてファイルを編集するのに使っていた。プログラミングはもっぱらTeraPadで行っていた 。 2009年頃: Vimに出会う。この頃、vimrcを編集することを知り、素viと比較して格段に使用性が向上した。しばらく経ってからEmacsに出会う。Emacsはこの当時からOSと呼ばれているぐらいに機能が充実しており、すぐに改宗した。それ以降はずっとEmacsを使っている
Next.js を VisualStudioCode(VSCode)を使ってデバッグする方法 - Qiita
概要 フロントエンドにNext.jsを採用して開発を進めた際、そのデバッグの設定に少々手間取ったため、ここに備忘録として残しておきます。 ここではNext.jsのサーバーサイド、クライアントサイド双方のデバッグ環境を整えて行きます。 環境 Windows11, WSL2 ❯ cat /etc/lsb-release DISTRIB_ID=Ubuntu DISTRIB_RELEASE=22.04 DISTRIB_CODENAME=jammy DISTRIB_DESCRIPTION="Ubuntu 22.04.1 LTS"
【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
みなさんこんにちは！ ONE CAREER CLOUD採用管理（ATS）チームにて、ソフトウェアエンジニアを担当しているコ ショウトウ（Github：jamesdongdong）です。 今回は、フロントエンド開発におすすめのVSCode 拡張機能について紹介したいと思います！ きっかけ弊社佐藤が執筆したお気に入りツールの紹介記事は、ご覧いただけたでしょうか？ 実際、私は佐藤の記事に載っていたツールを色々と導入してみたのですが、自分の作業効率が大幅に向上しました。特に、Raycast を活用してブックマークをすぐに開いたり、ウィンドウサイズを設定したりするようにしたことで、作業を一気に効率化できたと感じています。 便利なツールについて言えば、私も仕事の効率を高めるために普段から多くのVSCode拡張機能を使用しています！「自分も皆さんに、仕事の効率が高まる、非常に役立つおすすめのツールを紹介
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vscode-ruby-light開発日記 - Prismパーサー導入編
VSCodeのPython拡張機能でテストカバレッジ表示機能が追加されました | DevelopersIO
フロントエンドエンジニアが実際に使用しているVSCode拡張機能17選
VSCodeでGoの文字列内のSQLをシンタックスハイライトしたい - ちなみに
VSCodeを使ったデバッグテクニック：公式ガイドの日本語訳 - Qiita
【Python】VSCode拡張機能で自信をもってコーディングする方法！
VSCode の左側のアレを出したり消したり出来るようにする方法 - Qiita
作業効率爆上がり!? vscode のマルチカーソルショートカット8選
VSCodeで.NET MAUIの開発環境構築 - Qiita
VSCode おすすめ拡張機能と設定 - iimon TECH BLOG
vscode-ruby-light開発日記 - 初期版ふりかえり編
VSCodeで特定の拡張子だけformatterを走らせるには - Qiita
【DX向上】VSCodeの設定のススメ【Mac】 - Qiita
docker composeとVSCodeでJava開発環境のコンテナ化 - Qiita
VSCode で小説執筆 『novel-writer』 触ってみた - Qiita
VSCodeからAmazonQを使ってみた(Amazon版のChatGPT) - Qiita
痒いところに手が届く！VSCode で快適に Markdown ドキュメントを作成する方法 - Qiita
フロントエンド開発おすすめのVSCode拡張機能｜ONE CAREER Tech Blog