「Visual Studio Code」でペットを飼える拡張機能に「リス」と「骸骨」が追加／計24種類に
GitHub Copilotを持っているならvscode-mermAIdを試そう
はじめに プログラマやドキュメント作成者にとって、図は複雑な概念を説明する上で欠かせないツールです。しかし、図の作成は煩雑で時間がかかるものです。Microsoftが開発した「mermAId」というVS Code拡張機能を使うことで、一瞬で図を作ることができるようになります。というわけで、実務で使ってみたので、その使い方をご紹介したいと思います。 Mermaidとは 紛らわしいのですが、Mermaidはテキストベースでフローチャートやシーケンス図などを描けるJavaScriptライブラリです。一方、mermAIdはそのMermaid記法をCopilotを使って自動生成・編集できるVS Code拡張機能です。余談ですが、「mermAId」のうち、なぜAIだけ大文字なんだろうと思ったら、AIと掛けているのですね。 たとえば、下記のテキストをMermaidにして出力すると 以下の通りになります。
VSCodeのプロファイル機能を解説！プロジェクトごとの環境を簡単に切り替えよう - Qiita
VSCodeのプロファイル切り替え機能とは？ VSCode（Visual Studio Code）には、「プロファイル切り替え機能」が搭載されており、開発環境を用途ごとに簡単に管理・切り替えすることができます。 プロジェクトごとに異なる拡張機能や設定を適用したい場合や、新しいプラグインの動作を試したい場合に、この機能を活用すると、現環境の設定値は残しつつ、新しい開発環境を作成できるため便利です。 この記事では、VSCodeのプロファイル切り替え機能の利用方法について解説していきます。 プロファイルの作成 VSCodeの歯車から、profilesをクリック New Profileをクリック 以下の属性を入力していきます。 Name:表示されるプロファイルの名前 CopyFrom：既存のProfile設定から設定をコピーできます Contents：Defaultプロファイルの設定情報から以下の
Mermaid Graphical Editorを使うとVSCodeでサクサク図が書けるよ
技術記事は 個人ブログ へお引越ししました。 興味を持ってくださった方はZennではなくこちらをご購読いただければと思います🙏 Mermaid Graphical Editor VSCodeの拡張機能です。 Mermaid記法を利用してマークダウン内部で作図しながら、Mermaidそれ自体のエディタを立ち上げることができます。 逆にMermaid Editor側で編集した内容もマークダウンにフィードバックされます。 vs Draw.io Integration 類似ツールとしてDraw.io Integrationがあります。 こちらは.drawio拡張子のファイルをVSCodeで作成すると、draw.ioのエディタが開いて作図ができるツールです。 しかし、draw.ioはあくまで図が書けるところを生業としていて、作成したdraw.ioファイルをマークダウンファイルに埋め込むには画像とし
VSCodeで日本語の音声入力が可能に、Copilotがコードに合った変数名を提案など新機能。2024年2月のアップデート
VSCodeで日本語の音声入力が可能に、Copilotがコードに合った変数名を提案など新機能。2024年2月のアップデート コードエディタのVisual Studio Code（以下、VSCode）は2024年2月のアップデートで、音声入力やCopilotによる変数名の提案などの新機能が追加されました。 More developer goodness in the February update of @code Use your voice to write code (in your language!) Code faster with multi-cursor suggestions Renaming gets easier (because it's AI powered) Release notes: https://t.co/zwokiQvbPU Download: http
Visual Studio Codeに入れるべき拡張機能【2023年最新版】 - Qiita
拡張機能 VSCodeは世界中で支持されているコードエディタですが、最大の魅力が「拡張機能」です。 機能を追加して、より自分が使いやすいコードエディタにすることができます。 拡張機能のインストール 拡張機能のインストールのやり方を説明します。 アクティビティバーの拡張機能マークをクリックする（四角が4つあるマークです） インストールしたい拡張機能を検索する 拡張機能を選ぶ インストールをクリックする この4ステップで簡単に拡張機能をインストールできます。 オススメ拡張機能 ここからは、オススメの拡張機能をカテゴリごとに紹介します。 これは絶対入れるべき！基本機能 Japanese Language Pack for Visual Studio Code インストール数：約425万 評価：☆4.5 VSCodeの言語を日本語にしてくれる拡張機能です。VSCodeをインストールした後すぐに入れ
主にVSCodeではじめるPython開発環境構築ガイド | DevelopersIO
こんちには。 データアナリティクス事業本部 インテグレーション部 機械学習チームの中村です。 今回は、Python開発を主な対象とした開発環境構築の方法をまとめてみたいと思います。 (2023-10-20 : 更新) ・以下の拡張機能を追加 ・Material Icon Theme ・Conventional Commits ・Git History ・Python Test Explorer for Visual Studio Code ・sqlfluff ・Live Share ・コードアシスタントの章を追加 はじめに 主にPythonでの開発を始める際のオンボーディングに使用する前提の内容となっています。 社内でPythonの勉強会を何回か開催したのですが、その時の事前準備資料が元ネタとなっています。 https://github.com/cm-nakamura-shogo/pyth
PlaywrightのVSCode拡張を使って効率的にテストを書く
この記事では、Playwright の VSCode 拡張を使って GUI 操作のみでテストの記録や実行する方法について紹介します。 Playwright の VSCode 拡張とは？ Playwright の VSCode 拡張は、Playwright の作成元である Microsoft が公式に提供している拡張機能で、VSCode 内で直接ブラウザテストの記録や実行を支援するための便利なツールです。 GUI 操作を中心に、テストの記録や実行を手軽に行うことが可能となります。 VSCode 拡張のインストールは、以下のリンクから行うことができます。 VSCode 拡張を活用してテストを書く 本記事では、シンプルな ToDo アプリを例にテストの作成方法を説明します。Playwright のインストール方法は、公式ドキュメントをご参照ください。その後、VSCode に Playwright
VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセス - Qiita
はじめに この記事は、以下の公式ポストや、VSCode のアップデート後のリリースノートにも出ていた「built-in port forwarding」を試してみた話です。 この機能を使うと、ローカルにあるサーバにインターネットからアクセスできるようになります。 同様のことを実現するものには、有名どころの 1つに「ngrok（エングロック）」があったり、その他にもたくさんの類似サービスがあります。 実際に VSCode の built-in port forwarding を試してみる それでは、VSCode の built-in port forwarding を試してみます。 自分が試す際に参考にした情報は、以下の公式ページです。 ●Port forwarding local services with VS Code https://code.visualstudio.com/doc
VSCodeをプログラミングエディタとして強化しよう！ 便利な設定や拡張機能を紹介
はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確
チーム開発でVSCodeの拡張機能やフォーマット設定などを統一したい時に便利な設定ファイルについて | DevelopersIO
ただし、settings.jsonとかkeybindings.jsonをいじり始めると平気で1日溶けます。私はよく現実逃避で始めたキーボード設定で時間を溶かします。 こんにちは。AWS事業本部コンサルティング部に所属している今泉（@bun76235104）です。 みなさんはエディターは何を利用していますか？（火種） 私はnvimやVSCodeを使い分けています。チームで開発する時やペアプロをする時はVSCodeに便利な仕組みが揃っているからです。 今日はチーム開発の際にさっと導入できるわりに、不要な手間を省いてくれる.vscode/settings.jsonと.vscode/extensions.jsonについてお話しします。 何がうれしいのか .vscode/settings.jsonでは以下のようにファイル保存時のフォーマッタ適用や適用するフォーマッタの指定が可能です。 { "exte
【早い！安い！うまい！】VSCode+WSL+Dockerで簡単に開発環境構築 - Qiita
インストールしたら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(コンテナを立てるための設計図のようなもの)で管理できるため環境の共有が簡単に
理系大学生は研究でもJupyterNotebook(Anaconda)ではなくVScodeを使おう+Python環境構築 - Qiita
はじめに 理系大学生諸君は、実験で得たデータの解析やグラフ作成にPythonを使っているでしょうか? 私の所属する研究室では、PythonまたはNgraphでグラフを作ることが推奨されています。 特定のグラフ作成ソフトと比べてPythonでグラフを作るメリットというのはいくつかありますが、各設定項目をテキストデータとして確認ができる(明確に記述されている)ところが一番のメリットだと思います。そんなPythonですが、Anacondaをインストールして、その流れでJupyter Notebookを使って解析する人が多いと思いますが、VScodeを使って解析したほうが良いと考える理由と、実例を上げていこうと思います。 VScodeを使うメリット 設定のカスタマイズが豊富 外観の設定や、キーボードショートカットなどが豊富であり、よりパーソナライズされた開発体験を得られます。 情報が多い VSco
VS Code 1.78の新機能が便利！ 画像の相対パスが簡単に入力できるようになったぞ
VS Codeで画像のパスを入力するとき、今まではフォルダツリーで画像を右クリックして「パスのコピー」「相対パスのコピー」でパスを取得していたと思います。 先日アップデートされたVS Code 1.78で、画像ファイルをshiftキーを押しながらドロップするだけで、相対パス・完全パスが入力できるようになりました。 これはドロップセレクタと呼ばれるもので、VS Codeではshiftキーを押しながらドロップすることでファイルやコンテンツをエディタに挿入することができます。今までは画像のドロップで画像ファイルを開く、shiftドロップでファイル名でした。 VS Code 1.78のアップデートでこの挿入する方法を変更できるUIが追加されました。shiftキーを押しながらドロップすると、相対パス・完全パスを切り替えて挿入することができます。
君はVS Codeのデバッグの知られざる機能について知っているか - Qiita
はじめに こんにちは、kenです。 GWに「暇だな～～、こんな日はVS Codeの公式ドキュメントを読むか！w」と思って何気なく読んでたらデバッグに関して知らない機能がいくつかあったので、今回はそれをご紹介したいと思います。 おそらく今から紹介する機能はあまり知られてないと思います。もし全部知ってたらVS Code完全理解者なので誇ってください。（！？） 以下に記載する内容はVS Codeの公式ドキュメントのDebuggingという章を参考にしています。 注意 デバッグで使える便利な機能 ログポイント機能 行を指定しログポイントを追加すると、その行を訪れたタイミングでログを出力できます。 もちろんログ内には{式}という書式を使えば式も含めることもできます。 既存のコードに修正を加えることなく、ログを出力できるのは嬉しいですね！！ これで 「プリントデバッグしたprint行を消し忘れてPRあ
VS Codeでコードがさらに見やすくなる！ 行の折りたたみをより使いやすくする機能拡張 -Better Folding
VS Codeには標準機能として、行の折りたたみができます。すこし使い勝手が悪かったのであまり使用していなかったのですが、折りたたみをより使いやすくする機能拡張をインストールしてみたら、便利だったので紹介します。 折りたたみ機能は、VS Codeで行エリアをホバーすると折りたたみ可能な箇所に下向きの矢印が表示されます。 Better Folding Better Foldingの特徴 Better Foldingのインストール Better Foldingを使ってみた Better Foldingの特徴 Better FoldingはVisual Studio Codeの機能拡張で、折りたたみ機能で求められるすべての機能を一つにまとめた拡張機能です。 VS Code標準の折りたたみ機能をより使いやすくします。 左はVS Code標準の折りたたみ、右はBetter Foldingの折りたたみ
「GitHub Actions extension for VS Code」パブリックベータ公開。VSCodeからワークフローの実行と監視、管理が可能に
「GitHub Actions extension for VS Code」パブリックベータ公開。VSCodeからワークフローの実行と監視、管理が可能に GitHubは、Visual Studio Codeの拡張機能としてGitHub Actionsによるワークフローの実行や監視、管理を可能にする「GitHub Actions extension for VS Code」のパブリックベータ公開を発表しました。 GitHub Actions extension for VS Codeを使うことで、VSCodeの画面上からGitHubのActionを実行し、ビルドやデプロイなどの状態を監視できるようになります。 問題が発生した場合にはログの参照も可能。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Microsoft、「VS Code」ベースの無料コンピュータサイエンス教育環境を公開／多彩なコースとアクセシビリティ機能もビルトイン
VSCodeのGit連携をさらに便利に！ 拡張機能Git History、Git Graph、GitLensを解説
【VSCode/Dev Containers】DockerでPython開発【Win/Mac】
