VSCodeでMermaidを扱う為の便利な拡張機能あれこれ - Qiita
はじめに Mermaid とは、コードベースでガントチャートやフロー図などの作図が可能となるJavaScriptのライブラリです。 2022年にGitHubやQiitaでもサポートされるようになり、Markdownの中に専用のコードを書くことで図の挿入が出来るようになりました。 Include diagrams in your Markdown files with Mermaid 【Mermaidの紹介】Qiitaでダイアグラム・チャートが簡単に書けるようになりました！ 例えば、QiitaでMermaidを使ってガントチャートを書いてみると以下のようになります。 ※スケジュールは架空のものです コードを展開 ```mermaid gantt title ○○サービススケジュール dateFormat YYYY-MM-DD section ﾏｲﾙｽﾄｰﾝ 実装 : done, milest
Visual Studio Codeに入れるべき拡張機能【2024年最新版】 - Qiita
はじめに VSCodeは世界で多くの人が使っているコードエディタです。 開発の際に使用している人も多いのではないでしょうか。 今回はそんなVSCodeの拡張機能を一挙に紹介していきます。 拡張機能 VSCodeは世界中で支持されているコードエディタですが、最大の魅力が「拡張機能」です。 機能を追加して、より自分が使いやすいコードエディタにすることができます。 拡張機能のインストール 拡張機能のインストール方法をご紹介します。 アクティビティバーの拡張機能マークをクリックする（四角が4つあるマークです） インストールしたい拡張機能を検索する 拡張機能を選ぶ インストールをクリックする この4ステップで簡単に拡張機能をインストールできます。 オススメ拡張機能 ここからは、オススメの拡張機能をカテゴリごとに紹介します。 これは絶対入れるべき！基本機能 Japanese Language Pack
保守・理解しやすいコードを書きたい！ 〜VSCode拡張機能で循環的複雑度と戦う〜 - Qiita
参考: 循環的複雑度 ちなみに githubで最もやべー関数を発掘するという記事では、循環的複雑度が高い関数が紹介されています。 ものによってはリンク切れしてしまっていますが、最も複雑度が高いのはnode（JavaScript）のjo関数で5505だそうです。想像もつかない... どのようにすれば循環的複雑度を低く抑えられるのか？ 計算方法から考えると、forやifによる分岐を減らしていくことが必要となります。 そのために、分岐の入るロジックを別関数として切り出し、１つの関数でやる事を絞り、分離することを理想として目指していきます。 とはいえ、いちいち複雑度の計算なんてしていられないですね。 そこで役に立つのが次のVSCode拡張機能です。 Code Metrics （VSCode拡張機能） この拡張機能は、TypeScriptやJavaScriptの関数・メソッドに循環的複雑度を表示して
VSCodeでC言語プログラミング事始め HelloWorldがnmakeできるまで - Qiita
はじめに 諸般の流れからC言語を使う機会が増えてきたので、あらためてVSCodeでC言語プログラミングができる環境構築を再確認しておきます。諸般の事情でWindows＋MSCです。今回はmakefileを使ってHelloWorldがビルドできる状況を確認します。HelloWorld単体をビルドするのにmakefileを使うことはあまり意味のないことかもしれませんが、シンプルな環境でなにか見えてくるものもあるかもしれないということで。 前提条件 VSCodeはなんらかのバージョンが既にインストールされていることが前提です。 MSCもなんらかのバージョンのVisualStudioのVisualC++がインストールされていることが前提です。 今回は具体的には下記のバージョンを想定してお話が進みます。前回の記事でtasks.jsonとlaunch.jsonを生成して通常の[実行とデバッグ]からデバ
GitHub Copilotが便利になったのでターミナルもVSCodeで良いのでは？という話 - Qiita
先日のVSCodeのアップデートで、GitHub Copilotを使うとターミナル操作が便利になりました。 これにより、別途ターミナルのアプリを使わずにすべてVSCode上で操作した方が便利なのでは？となりました。 アップデート前までどうしてたか MacのiTerm2上で、GitHub CopilotのCLI版（パブリックベータ）で入力補完やコマンドの意味を調べたりしていました。 それ自体は便利でしたが、いくつかの不便な点もありました。 使い方がちょっと煩雑だった 例えばコマンドをサジェストして欲しい場合、gh copilot suggest 'gitで1つ前のコミットを取り消したい'のようにタイプする文字数も多くなり、またそれが一般的なコマンド or ghコマンド or gitコマンドかの３択に答えないといけなくて面倒でした。 ssh接続で不便 SSH接続先でも使用するためにGitHub
Visual Studio Codeに入れるべき拡張機能【2023年最新版】 - Qiita
拡張機能 VSCodeは世界中で支持されているコードエディタですが、最大の魅力が「拡張機能」です。 機能を追加して、より自分が使いやすいコードエディタにすることができます。 拡張機能のインストール 拡張機能のインストールのやり方を説明します。 アクティビティバーの拡張機能マークをクリックする（四角が4つあるマークです） インストールしたい拡張機能を検索する 拡張機能を選ぶ インストールをクリックする この4ステップで簡単に拡張機能をインストールできます。 オススメ拡張機能 ここからは、オススメの拡張機能をカテゴリごとに紹介します。 これは絶対入れるべき！基本機能 Japanese Language Pack for Visual Studio Code インストール数：約425万 評価：☆4.5 VSCodeの言語を日本語にしてくれる拡張機能です。VSCodeをインストールした後すぐに入れ
VSCodeの拡張機能【Gist】が便利すぎて開発効率がかなり上がった話 - Qiita
はじめに 突然ですが、よく使うコードはどのように管理していますか？ 私はGitHubで管理していたのですが、今回VSCodeの拡張機能Gistを使って見たところ、サクッと参照ができて、かなり使い心地が良かったのでまとめておきます。 Gistとは VSCode上でGitHub Gistを連携させることができ、手軽にファイルの作成、編集、削除が可能になる拡張機能です。 導入手順 GitHub Gistの登録 GitHub上でアクセストークンの取得 拡張機能のインストール アクセストークンの設定 1. GitHub Gistの登録 2. GitHub上でアクセストークンの取得 ExpirationをNo expirationに設定します。 scopeのgistを許可して作成です。 トークンが発行されるので控えておきましょう。 3. 拡張機能のインストール VSCode上で【Gist】と検索すると
知識0の状態からたった2時間でVSCodeの拡張機能を作った話 - Qiita
はじめに こんにちはkenです。エディターはVS Codeを使ってます。 突然ですがみなさん、普段開発をしていて 「VS Code にこんな拡張機能、あったらいいのにな〜」 と思うことありませんか？ 私はあります。しょっちゅうあります。 そこで先日、予定がない休日を利用して拡張機能の開発に挑戦してみることにしました。 最初は拡張機能の開発をどのように進めていけばよいのか全くわからず、そもそも拡張機能でどこまでのことを実現できるのかすらわかりませんでした。ましてや実装についての知識なんて皆無です。 「これは完成まで1日くらい、いや下手すると3日くらいかかるかな」と考えていたのですが、いざやってみるとたった2時間で作れてしまったので今回はその経験についてお話ししたいと思います。 この記事を読んで、 「こんなにお手軽なら自分にも作れそうだ！」 と感じてくれたら幸いです。 本題 作りたかったものと
君はVS Codeのデバッグの知られざる機能について知っているか - Qiita
はじめに こんにちは、kenです。 GWに「暇だな～～、こんな日はVS Codeの公式ドキュメントを読むか！w」と思って何気なく読んでたらデバッグに関して知らない機能がいくつかあったので、今回はそれをご紹介したいと思います。 おそらく今から紹介する機能はあまり知られてないと思います。もし全部知ってたらVS Code完全理解者なので誇ってください。（！？） 以下に記載する内容はVS Codeの公式ドキュメントのDebuggingという章を参考にしています。 注意 デバッグで使える便利な機能 ログポイント機能 行を指定しログポイントを追加すると、その行を訪れたタイミングでログを出力できます。 もちろんログ内には{式}という書式を使えば式も含めることもできます。 既存のコードに修正を加えることなく、ログを出力できるのは嬉しいですね！！ これで 「プリントデバッグしたprint行を消し忘れてPRあ
【VSCode】常に新しいタブでファイルを開きたい！の設定 - Qiita
1. 現 状 ファイルをクリックすると元のタブが上書きされる VSCodeの初期設定の場合、ツリーからファイルをクリックしていくとタブがどんどん上書きされて開かれると思います。 ↓↓この右隣に新しいタブで開きたいのにどんどん上書きされる！ これを「Google Chromeのように新しいタブでどんどん開けたら良いなぁ」と感じたので、常に新しいタブで開くようにする設定のメモを共有します。 2. やること VSCodeの設定を変更する ① 「⌘ + , 」か「基本設定」からVSCodeの設定を開きます。 ② 設定の中の「ワークベンチ」の「エディタの管理」というカテゴリーに、 「Enable Preview」という項目があるので、このスイッチをオフにします。 ↑Enable Previewのスイッチをオフにする これだけです。あとはそのまま設定タブを閉じればOK。 ↑↑こんな感じでどんどん新しい
VSCodeにChatGPTの拡張機能を入れてコードレビューやバグを発見してもらう - Qiita
ChatGPTとは？ OpenAIが開発するGPT-3という言語モデルをベースとした(執筆当時)チャットアプリです。 こちらの質問に対して、AIが色々な質問に答えてくれて、一般的な内容だけではなく、コードレビューやバグなども発見してくれるめっちゃ凄いやつです。 細かい内容は以下の記事がとても参考となります。 筆者の関連記事 VSCodeと連携して、ブラウザを開かなくてもChatGPTを使用できるようにする 通常はブラウザを開いて使用するのですが、コーディング中にサクッとレビューしてもらったり、バグを見つけてもらえるような拡張機能があったので、そちらの設定方法について記述してみます。 今回インストールする拡張機能 使用までの手順 環境 PC: MacBook Pro (Apple M2) OS: macOS Ventura 13.1 VSCode: v1.74.3 OpenAIの価格について
VSCodeでPython書いてる人はとりあえずこれやっとけ〜 - Qiita
はじめに Pythonはコードが汚くなりがち（個人的にそう思う） そんなPythonくんを快適に書くための設定を紹介します。 拡張機能編 ここでは Pythonを書きやすくするため の拡張機能を紹介していきます。 1. Error Lens before 「コード書いたけど、なんか波線出てるよ💦」 記述に問題があった場合、デフォルトでは波線が表示されるだけ。。。 after Error Lensくんを入れることによって 波線だけでなくエディタに直接表示される。 はい、有能〜 2. indent-rainbow before Pythonくんは インデントでスコープを認識している。 for の f から下に線が伸びてるけど、ちょっと見にくいなぁ after 色が付いてちょっと見やすくなった！ 3. Trailing Space before 一見、普通に見えるコード after 末尾にある
自前サーバでCodespacesが使えるVisual Studio Code Serverを動かしてみた - Qiita
VSCodeがバージョン1.69でVisual Studio Code Serverをpreviewリリースしました。これはおそらくGithub Codespacesでうごいているものの自前サーバ用ソフトウエアと思われるので、早速試してみました。 追記：この方法は現在動作しなくなっています。詳しくはこちらをご確認ください。 ＝＝＝＝以下当時の記事＝＝＝＝＝ マニュアルはこちら これまでのGitHub Codespacesやgithub.devのレビューはこちら このマニュアルによると、インビテーションが必要とのことです。申し込みフォームから申請しましょう。「私はエンタープライズ企業で働いていて彼らはファイアーウォールの内側でしか仕事をすることを許可しません、だから私はVS Code Serverを学びエンプラ環境に生かしたいです。」と書いてみました。 ひとまずサーバを用意 Vultrで東京
サクッとAPIを叩く方法 (VS CodeでHTTPリクエストが送れちゃう拡張機能) - Qiita
概要 開発中のAPIを試したり、サードパーティのAPIをサクッと叩いてみたいといった時に皆さんどのようにしますか？ 私は、curlコマンドやPostmanをよく使っています。 ただ、もっと楽にHTTPリクエストを投げ、かつその時使用した情報を残すことができる方法を以前のチームメンバーに教えていただいたので、記事にしました。 REST Client 今回、紹介するのはVS CodeのエクステンションにあるREST Clientというものになります。 このREST ClientというのはVS Code上でHTTPリクエストを送信し、レスポンスを確認できる拡張機能となっています。 使用方法 使用方法はすごく簡単で、拡張子が「.http」か「.rest」というファイルで決められた構文に従いHTTPリクエストを記述するだけです。 下記にcrudの例を載せていきたいと思います。 また今回はREST A
VS CodeでDockerのPHP環境でリモート開発 - Qiita
更新 2021/12/22：最新の環境で試した内容は、Myブログの方に記載しましたので、よろしければご覧ください。 以降の記事は当時の内容です。 はじめに みなさんプログラミングの際にVS Codeを使っていますでしょうか。 私はよく使っています とても軽量ですし、必要最低限の機能はもちろん、ソースの管理や、デバッグ、強力な拡張機能など、非常に気に入っております。 まだ正式版の機能ではありませんが、VS Codeがリモート開発に対応したということで試してみました。 今回はサンプルということでDockerでPHPの環境を用意し開発してみます。 これができると、わざわざローカルに実行環境を用意しなくても、リモート先で直接開発ができるためとても便利ですね！ 参考 Remote Development with VS Code Developing inside a Container 環境 Wi
AWS構成図おすすめツール - Qiita
AWSの構成図を作成する際に便利なツールを紹介します。 vscodeの拡張プラグイン「Draw.io Integration」です。 インストール方法 vscodeの左サイドにあるExtensionsをクリックし、検索窓にdrawと入力するとDraw.io Integrationが表示される。そして、Installボタンをクリックするとインストールされる。 作画ツールの表示 インストール後に新規ファイル作成ボタンを押し、 拡張子を.drawioにすると自動的にvscode上でdrawioの作画ツールが表示される。 これを使って簡単なAWSの構成図を描いていきます。 構成図 VPCを作成して、その中にパブリックサブネット、EC2インスタンス、インターネットゲートウェイを作成する。 使い方 AWSアイコンの追加 下部の+More Shapesを押すと、アイコンのセットが表示される。 ここからA
Markdownで勉強メモしたり プログラマ以外にもおすすめ - Qiita
Markdownでメモするといろいろ便利って話です。 gitでも管理しやすいし、githubに草生やすのもモチベーションになります自分の場合。 エディタ（メモ帳代わり）はVSCodeを使います。 非エンジニアでも英語学習とかにも使えそうです！ Markdown マークダウンとは、アメリカ合衆国、フィラデルフィア出身のライター・コラムニストであるジョン・グルーバー（John Gruber）によって、2004年に開発された「フォーマット」のことを指します。 デジタル文章を作るときに使うHTML（HyperText Markup Language）などのマークアップ言語を、簡略化できるようにプログラムされました。 https://backlog.com/ja/blog/how-to-write-markdown/#i QiitaやWikipediaもMarkdownで書くのがデフォルトになってい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【VSCode】オススメの拡張機能と設定 - Qiita
なぜファイルの末尾に改行を入れたほうが良いのか - Qiita
Mac の VSCode に PlantUML を導入 - Qiita
