VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~ - Qiita
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~初心者umlVSCode新人プログラマ応援mermaid はじめに Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました こんな方におすすめ シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢 できること VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる mermaid記法のコードも自動生成されるよ 個人的メリット mermaidの学習コスト0 紙で書くよりも修正しながら書きやすい 導入手順 （簡単7steps） (1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする (2)
ER図の作図について、 Draw.io, PlantUML, Mermaid を比較してみる。（VSCode拡張機能など） - Qiita
※ 参考記事「PlantUML を VSCode で利用したいけど、プレビューが表示されずエラーが出る」 参考（PlantUML 導入後の編集中画面） 2-2. ER図 今回作成したER図 Qiita記事でも、コードブロック内でPlantUMLの構文がそのまま使えます。（このER図は、Qiitaのコードブロックで表示させています） 今回作成したER図のPlantUMLの表記 @startuml yonde ' hide the spot hide circle ' avoid problems with angled crows feet skinparam linetype ortho entity "families" as families { id -- name nickname introduction created_at updated_at } entity "users
GitHub+VSCodeでのMarkdownドキュメンテーションのプロジェクトルールを考える
概要 Word や Excel でのドキュメント作成を回避し、なるべく生産性高く、かつ、OS 環境依存なく、すべて基本無料で構成できるツールで、Markdown ベースで設計書を作成することを考えてみます。 GitHub 上で閲覧できる形でドキュメントを作成することを前提に、VSCode（＋プラグイン）を用いて、テキスト文書、表（テーブル）、図（構成図など）、キャプチャ、などをスピーディに作成し、PullRequest ベースで運用していけるように、プラグインを構成および、レギュレーションを作成してみました。 GitHub の README.md や Wiki に書いて使えるかと思いますので、併せて markdown 形式および、vscode のプラグイン推奨設定ファイル形式でも載せておきます。 もし、もっとこのプラグインを使うと良い、などアイデアなどありましたら教えていただけると幸いです
VSCode + Markdownでスライドや書籍も書いちゃおう！ - Qiita
はじめに Markdownって便利ですよね？ README.md、PR や Issue の本文やコメント、Qiita や Zenn はもちろん、Google Docs や Trello や Notion や Jupyter Notebook でも使えるみたいです。もっといろいろな文書を Markdown で書ければいいのになあ、あらゆる文書のソースコードを Markdown にできればいいのになあ。 さあ、Markdown の可能性を広げましょう！ 本記事では「スライド」と「(電子)書籍」をMarkdownで書く方法をご紹介したいと思います。もちろん、VSCodeでMarkdownを効率よく便利に書いていくためのチップスもご紹介していきますよ。 ご参考スライド VS Code Conference Japan 2021 で発表した際の以下スライドもご参照ください。 もちろんこのスライドもV
VSCode で最高の LaTeX 環境を作る - Qiita
はじめに レポートや論文の作成には $\LaTeX$ は欠かせないですよね。卒業論文や修士論文を書き始める方も多い時期だと思うので、今回は LaTeX と Visual Studio Code を使い、レポートや論文を快適に書ける環境を構築していきたいと思います。 必要なツールのインストール ここはあまり詳しい解説は行いません。 LaTeX と Visual Studio Code がインストール済みの人はこの節は読み飛ばしてください。 LaTeX TeX Live がおすすめです。 TeX Wiki に詳細な説明があります。 コマンドラインで platex や latexmk が実行できれば成功です。 Windows 公式の install-tl-windows.exe をクリックしてダウンロード、GUIのインストーラーに従ってください。 Mac
VSCodeのFindで今マッチしている場所にボーダーを引いて見やすくする - $shibayu36->blog;
VSCodeでFindしている時に、マッチしているwordは背景色が変わって分かるのだけど、今どこにフォーカスしているかが分かりづらかった。これが特に問題が起こるのがReplaceをしようとしている時で、Replaceするたびに今どこ？とマッチ箇所を探していた。これだと時間がかかって困る。 調べてみるとTheme Color | Visual Studio Code Extension APIに書かれているように、自分のsettings.json内で自分用に色を調整し、見やすくカスタマイズ出来ることが分かった。これでFindの現在のマッチ箇所を見やすくしてみる。 Findの色のカスタマイズは editor.findMatchBackground: Color of the current search match. editor.findMatchHighlightBackground:
vscodeの利用に必須な”ワークスペース”の概念 | 今日も元気にIT屋さん
背景 node.jpを触ってみようと思いました。そして折角なのでvscodeで開発しようと思いましたが、vscodeの事をあまり分かってなかったのでこの機会に勉強しました。なお私はバッチファイルなどしか書けないエンジニアで、モダン開発の知識は皆無です。このエントリは自分用のメモで特にみなさんに新しい知識を提供できるものではありません。 vscodeとは MS製のソースコードエディタ。人気 Visual Studio Code – Code Editing. Redefined 従来型のテキストエディタとの違い さて、私は旧来からのサクラエディタ使いである。 サクラエディタ 結論から言うと、秀丸やterapad、notepad++など、従来のテキストエディタを使い慣れていた人が最近のソースコードエディタを使う場合、考え方を変える必要がある。テキストエディタの延長線上にあり、テキストエディタよ
Visual Studio Codeのカレンダー | Advent Calendar 2019 - Qiita
The Qiita Advent Calendar 2019 is supported by the following companies, organizations, and services.
VSCode+Docker+ROSで開発環境を構築する - Qiita
こんにちは、@ryu_softwareです。普段は業務で自律移動ロボットのソフトウェアをいじってます。 以前のアドベントカレンダーでこんなの書きました。久しぶりの参加になります。 今回は僕が普段使ってる開発環境について、皆さんにとって参考になるかどうかは微妙かもしれませんが構築方法と使い方についてのメモを残そうと思います。 開発環境について 最近kineticやらmelodicやら、ROS2やらなんやらでいろんな開発環境を用意しなきゃいけなくてそうしてると自分のPCの環境を汚しかねない(最悪ぶち壊す)なぁと思っていて、色々テストしたりちょっと開発する時に必要な複数の開発環境をDockerを用いて使い分けていました。Dockerfileを分けておけばローカルの環境を汚さずに色々テストできるので結構便利でした。 僕は普段の開発において、最近Visual Studio Codeを使用していて、R
[Python] コードの自動整形でインデントレベルを2に設定する - Qiita
本記事をお読みになる前に 掲題のとおり、本記事では Python のソースコードにおいてインデントレベル 2 で自動整形する設定について扱っております。 しかしながら、コメントにて @shiracamus 様からご指摘いただいたように、推奨されているインデントレベルは 4 であり、本記事の内容はそれから外れたものとなりますのでご注意ください。 既存ソースコードに合わせたり、プロジェクトの方針として 4 以外を設定する、といったケースにおいて本記事が参考になればと思います。 以下、ご指摘いただいた内容を転記いたします。 既存コードに合わせてインデントを2にするのはいいですが、そうでないならインデントは4が推奨ですね。 参考: PEP8: Pythonコーディングスタイルガイド コードのレイアウト インデント 1レベルインデントするごとに、スペースを4つ使いましょう。 @shiracamus
![[Python] コードの自動整形でインデントレベルを2に設定する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/700b1ae72c57e7341d119fe1676e9afe0f2e46d3/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCUHl0aG9uJTVEJTIwJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg5JUUzJTgxJUFFJUU4JTg3JUFBJUU1JThCJTk1JUU2JTk1JUI0JUU1JUJEJUEyJUUzJTgxJUE3JUUzJTgyJUE0JUUzJTgzJUIzJUUzJTgzJTg3JUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgzJUFDJUUzJTgzJTk5JUUzJTgzJUFCJUUzJTgyJTkyMiVFMyU4MSVBQiVFOCVBOCVBRCVFNSVBRSU5QSVFMyU4MSU5OSVFMyU4MiU4QiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YzE2NGE2YzQyN2EwZGYxOGMyY2UzODJlYzZjMWZjYzA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwa3NoLWZ0aHImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWMwYjMwZGRlMzU5NDgyNDEyNDc3ZDRlMDg5NjEwNTk4%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D68dc77929df986c993d082a978a58b46)
Visual Studio Codeのうれしい機能を使いこなして、初心者を最速で脱出する！《VSCode実践入門》 - エンジニアHub｜Webエンジニアのキャリアを考える！
エンジニアHub > 記事一覧 > Visual Studio Codeのうれしい機能を使いこなして、初心者を最速で脱出する！《VSCode実践入門》 Visual Studio Codeのうれしい機能を使いこなして、初心者を最速で脱出する！《VSCode実践入門》 VSCodeは初版が2015年リリースの新しいエディタですが、インテリセンス、ユーザースニペット、Emmet、マルチカーソル、拡張機能というコーディングにうれしい機能が充実しています。VSCodeを検討中あるいは使いはじめたばかりの若手エンジニアが、いち早く初心者を脱出するための使いこなし方を解説します。 はじめまして、KC（けーしぃ、@kcpoipoi）と申します。技術書典6にサークル参加してたら「キミ、Web執筆に興味ない？？」とお声がけいただきました。Web執筆は初めてなので至らない点があるかもしれませんが、何卒よろしく
Visual Studio Code を使った C++ のビルド＆デバッグ方法 - Daily Tech Blog
ということで，つくばチャレンジも一段落した今，ちょっと基礎的なエントリです． 仕事では Visual Studio を使って Windows メインで開発をしてるんですが，エディアとか IDE とかってなれるまでに時間がかかリますよね．．．なのでちょっと億劫だったんですが，流石に gedit でやるのも効率があんまり良くないかな．．と思い，Linux でも何かエディタをつかうことにしました．C/C++ のエディタって，みんな eclipse CDT を使っているのかな？と思ってたんですが，最近はあまり eclipse ってつかわれてないんですかね？いろいろ記事を詠んでみると Visual Studio Code を扱っている記事が多かったので，ちょっと Eclipse CDT と Visual Studio Code を勉強＆比較してみることにしました． １．インストール方法 １．１ VS
ROS開発におけるエディタ選択 ( Visual Studio Code編 ) (1) | Tokyo Opensource Robotics Kyokai Association
はじめに ROSプログラミングをするにあたり，対象のOSがLinuxであることから，コンソールベースでの開発に慣れていない方にとっては少々困惑することがいくつかあると思います． プログラマが一般的に使用する一般的なエディタではVimやEmacsなどが知られているかと思われますが，これらは設定方法や操作方法など少し癖があったり，それらを行うために知らなければならないことがあったりするので少々敷居が高いかもしれません． 一方Windows OSでの開発に使用されているIDEとしてVisual Studioが多く使用されますが，対応OSがWindowsのみでありUNIX系OSで使用することができないのが惜しい点でした． そこで2015年にMicrosoftから「Visual Studio Code(以下VS Code)」というツールがリリースされました．VS Codeは，Windowsだけでなく
Visual Studio Code で Markdown 編集環境を整える - Qiita
最近、新規環境を構築したので忘れないようにメモ。 いまのところVisual Studio Code が最強の Markdown エディタだと個人的には思う。 Windows 10 Pro (64bit) Visual Studio Code 1.28.2 1. Prettier - Code formatter をインストール 拡張機能『Prettier - Code formatter』をインストールします。 Prettier はコードフォーマッターで、Markdown にも対応しています。 インストールするとShift + Alt + Fでドキュメント整形してくれます。 私は設定していないのですが、ファイル保存時に自動的に整形したい場合、ユーザー設定で editor.formatOnSave を True にします。 私が true にしていない理由としては、日本語と英語の間に自動的に
MarkdownとPlantUMLでソフトウェアの仕様書や設計書を書くための環境構築手順 - EurekaMoments
実践UML 第3版 オブジェクト指向分析設計と反復型開発入門 作者:クレーグ・ラーマンピアソンエデュケーションAmazon 目次 目次 はじめ Markdownで書くメリット Markdown記法一覧 環境構築手順 1. Visual Studio Codeをインストールする 2. PlantUMLをインストールする 3. Javaをインストールする 4. Graphvizをインストールする 5. Markdown Preview Enhancedをインストールする 環境構築後の動作確認 Markdownでドキュメントを書く際に便利な拡張機能 1. Paste Image 2. markdown-index 作成したドキュメントをHTMLやPDFに変換する 今回参考にさせていただいた記事 はじめ 自分はこれまでソフトウェア開発において仕様書や設計書を作成する際、Enterprise Arc
Visual Studio Code + Markdown Preview Enhancedはチームでデファクト化したいMarkdown環境だ！、と思う�(2017/10月時点) - Qiita
Visual Studio Code + Markdown Preview Enhancedはチームでデファクト化したいMarkdown環境だ！、と思う�(2017/10月時点)MarkdownエディタVSCodeVisualStudioCode 0.注意書き 筆者の本稿での意図はエディタ宗教論争を巻き起こすことではありません。「世の中では、これくらいのことが出来るようになってきている」とご参考にしてただくことが本稿の狙いです。それによって何かのお役に立てれば幸いだなと思っています。 皆さんは自分の使いやすい、皆さんの用途やプロジェクトの環境をにあったエディタを使用していただければとお断りしておきます。 1.Markdown環境について Markdwonは以前に書いたように今後の文書生産性を変えていく可能性のあるツールの一つです。Markdownのメリットは次の点だと思います。 1.1.M
Visual Studio Code で UML を描こう！ - Qiita
この記事では、Windows 環境に Visual Studio Code と PlantUML をセットアップする手順を説明します。 PlantUML とは PlantUML は、以下のような図をテキストで素早く描くためのオープンソースプロジェクトです。 シーケンス図 / Sequence diagram ユースケース図 / Usecase diagram クラス図 / Class diagram アクティビティ図 / Activity diagram コンポーネント図 / Component diagram 状態遷移図 / State diagram オブジェクト図 / Object diagram 環境 下記の環境で動作確認しました。 Windows 10 Pro (64bit) Visual Studio Code 1.11 Java SE Runtime Environment
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WSL2、Docker、VSCodeで劇的に改善されるWindows開発環境
Automating Installation of VS Code Plugins
GitHub - hediet/vscode-drawio: This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.
