[Visual Studio Code][Windows] PlantUMLの環境を設定する（シンタックスハイライト+リアルタイムプレビュー） - Qiita
最近、Atom から Visual Studio Code (以下 VS Codeと表記）に乗り換えたので、PlantUML環境の作成手順をメモしときます。 環境作成 1. エディタ本体の設定 1.1. VS Code をインストールする 公式ページか VS Code をインストールします。 Visual Studio Code - Code Editing. Redefined 2. PlantUML環境の準備 ※PlantUMLのバイナリは自前で準備する必要はありません（プラグインに同梱されているため） => 最新で任意の plantuml.jar を指定する機能が追加されました。 2.1. Javaのインストール PlantUMLはJavaで動くのでランタイムをインストールします。 java.com: あなたとJava 2.2. Graphvizのインストール PlantUMLはGr
![[Visual Studio Code][Windows] PlantUMLの環境を設定する（シンタックスハイライト+リアルタイムプレビュー） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/21169bcc641be9db8c2f9d032df38e6dce96c072/backend=imagemagick;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-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVmlzdWFsJTIwU3R1ZGlvJTIwQ29kZSU1RCU1QldpbmRvd3MlNUQlMjBQbGFudFVNTCVFMyU4MSVBRSVFNyU5MiVCMCVFNSVBMiU4MyVFMyU4MiU5MiVFOCVBOCVBRCVFNSVBRSU5QSVFMyU4MSU5OSVFMyU4MiU4QiVFRiVCQyU4OCVFMyU4MiVCNyVFMyU4MyVCMyVFMyU4MiVCRiVFMyU4MyU4MyVFMyU4MiVBRiVFMyU4MiVCOSVFMyU4MyU4RiVFMyU4MiVBNCVFMyU4MyVBOSVFMyU4MiVBNCVFMyU4MyU4OCUyQiVFMyU4MyVBQSVFMyU4MiVBMiVFMyU4MyVBQiVFMyU4MiVCRiVFMyU4MiVBNCVFMyU4MyVBMCVFMyU4MyU5NyVFMyU4MyVBQyVFMyU4MyU5MyVFMyU4MyVBNSVFMiU4MCVBNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9YzRhODgxNjI5NWRkZGVhMzdkOGY2Zjk0ODU4YzQ0YzY%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrb2FyYS1sb2NhbCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MzA1OTEyMGM4ZmYxNTY1ZGRkNzI3OTM1NjFmY2RkMWE%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g44Oq44OD44Kv44K944OV44OI5qCq5byP5Lya56S-%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D0de31f276b1c4b2ae9e4cdfa83358ce7)
Visual Studio CodeにPlantUMLを導入して業務効率化を図る | Keep it up!
私の職場では関数の設計資料としてフローチャートを書く文化が根強く残っています。さらには状態遷移図やシーケンス図なども場合によっては必要になります。これらの図を作成するのに、ツールはword,ExcelやVisioなどを使っていますが、ご存じのとおりこれらのツールで作図するのは非常に面倒です(visioは幾分かマシですが)。 word,Excel,Visioでこれらの作図をする時に感じるデメリットは以下の3点です。 何か解決策は無いかなぁと色々と調べていたところ、PlantUMLというツールがあることが分かりました。PlantUMLはテキストからUMLの各種ダイアグラムを生成することが出来るフリーのツールです。 例えば、以下のようなコードを書くと @startuml Foo -> Bar : メッセージ Foo <-- Bar : レスポンス @enduml このような図を生成することが出来
VS Code のMarkdownプレビューをCSSでカスタマイズする - Latele Blog
Visual Studio Code のMarkdownプレビューをCSSでカスタマイズする方法とプレビュー用CSSのサンプルです。 最近は、Visual Studio Code（以下 VS Code）をSassやPugとか書く場合に使ったりしてます。 他にブログの下書きを書くのにも使ってるんですが、その時は Markdown で書いてます。 んで、VS Code だと Markdownのプレビューも出来るんですが、初期で当たってるスタイルが好みではないので自分好みに変更する方法のご紹介です。 おまけで、プレビュー用に使ってるCSSも晒しておきます。 なお、執筆時点でのバージョンは、1.9.1です。 設定（settings.json）を変更してCSSを読み込ませる Markdownのプレビュー用CSSを読み込ませるために、settings.json を開きます。 settings.json
Visual Studio CodeでESLintを使う – 山本隆の開発日誌
山本隆の開発日誌 Kotlin/Swift/Flutter/JavaScript/TypeScript/PHPでWindows/macOS/Android/iOS/Webアプリなどを作ってます eslintをインストールする ESLintがインストールされていない場合は、コマンドプロンプトから次のコマンドを実行して、ESLintをインストールします。 npm install -g eslint ESLintがインストールされているかは、次のコマンドを実行して確認できます。 eslint -v インストールされていれば、ESLintのバージョンが表示されます。 v3.3.1 VS Code ESLint extensionをインストールする Visual Studio Codeで「Ctrl+P」を押します。 次のコマンドを入力し、Enterキーを押します。 ext install vscod
Visual Studio Code は JavaScript 開発が超絶便利になる可能性を秘めている！
Visual Studio Code は JavaScript 開発が超絶便利になる可能性を秘めている！ クロスプラットフォームでオープンソースな IDE 環境、Visual Studio Code が公開されたので試してみた。 拡張を入れなくても、デフォルトで JavaScript の「自動 Lint」「Grunt、Gulp 連携」「デバッグ」が動いた。なんだかすごく便利そうな予感。 Windows 環境で起動してみたらこんな画面だった。 なんか黒いが、色は好みにカスタマイズできるし、プリセットからも選べる。 フォルダーを開くことから始まる Visual Studio Code にはプロジェクトの概念はない。 [File] > [Open Folder] からフォルダーを開けばよい。 ためしに、過去に作った Node.js 製の livereloadx のフォルダーを開いてみた。 左側に
【Visual Studio Code (Stable版)】最新バージョン1.2.0でついにVSCode上でターミナル実行も可能に！
皆さん、こんにちは。テクニカルエバンジェリスト戸倉彩です。 今週は、Visual Studio CodeのStable版のほうも、Insiders版と同じ最新バージョン1.2.0がリリースされました！ Visual Studio Code 1.2 の新機能ハイライトは以下になります。 https://code.visualstudio.com/Updates エディタ: 自動的に挿入された空白をトリムする機能、マッチした全ての検索結果を選択するための新しいキーバインド、リサイズ可能な Peek ウィンドウをサポートしました。 リンティング: ESLint エクステンションによる "fix all problems" コマンドをサポート。TSLint エクステンションによるリンティング非対象ファイルの指定や quick fix をサポートしました。 TSLint : https://mark
ESLint - Visual Studio Marketplace
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. VS Code ESLint extension Integrates ESLint into VS Code. If you are new to ESLint check the documentation. The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one, the extension looks for a global install version. If you haven't installed ESLint either locally
Visual Studio CodeでのJavaScriptのデバッグ方法 - ICS MEDIA
マイクロソフトが無償で提供しているコードエディター「Visual Studio Code（略称：VS Code）」はGoogle ChromeやMicrosoft Edgeのデバッグ機能と連携できます。VS Code上でブレークポイントを設定してコールスタックを確認したり、ステップ実行や変数のウォッチなどを行えます。複雑なJavaScript開発を行っている方は、デバッグ機能を使うことで、効率のよい開発体験を得られるでしょう。 本記事ではデバッグ機能を使うためのVS Codeの導入方法について説明します。 導入手順と前提 VS Codeにはデフォルトでデバッグ機能が搭載されています。 ※2021年8月以前のVS Codeでは拡張機能「Debugger for Chrome」の導入が別途必要でしたが、今のVS Codeでは拡張機能をインストールする必要はありません。 本記事では、ウェブページ
【Visual Studio Code 1.2以降】統合TerminalをコマンドプロンプトからPowerShellに変更する (Windows版)
皆さん、こんにちは。テクニカルエバンジェリスト戸倉彩です。 今回は、Visual Studio Codeのバージョン1.2以降から利用できるようになったターミナル機能の統合の設定に関する話です。 初期設定では、統合ターミナル(Integrated Terminal)を呼び出すと、Windowsの場合はコマンドプロンプトがVisual Studio Codeの画面の中で統合して使えるようになります。 ▼こんな感じ。 ↑↑↑ コマンドプロンプトがVisual Studio Codeの中で使える ↑↑↑ これを、 「PowerShellにしたい!!!」 と思った方もいらっしゃるのではないでしょうか？ 統合ターミナルの設定の内容は、メニューの「ファイル」→「基本設定」→「ユーザー設定」で表示されるファイル内で確認することができます。 ちょうど449行目あたりに下記のように記述してあります。 Win
Visual Studio CodeでNode.jsアプリをデバッグする
Visual Studio CodeでNode.jsアプリをデバッグする：特集：VS Code早分かりガイド（1/4 ページ） 連載目次 前回はVisual Studio Code（以下、VS Code）でGitを利用する方法を見た。今回はVS CodeでNode.jsベースのJavaScriptアプリのデバッグを行う方法を見ていこう。また、2015年8月にVS Codeが0.7.0にアップデートされているので、それについても最後にまとめておこう。 VS Codeのデバッグ機能 本稿執筆時点（2015年8月21日）、VS CodeではNode.jsベースのJavaScript／TypeScriptアプリのデバッグがネイティブにサポートされている。VS Codeの相方として大本命であろうASP.NET 5アプリのデバッグはまだ実装されていないが、近いうちに実装されるはずだ。 VS Codeで
【VSCode】Visual Studio Code 0.3.0の新機能まとめ - Tumbling Dice
前書き いつの間にかVSCodeが0.3.0にバージョンアップしていました。 「0.2.0は？」とか「起動時に毎回やってる自動アップデートチェックとは一体何だったのか」とか色々思うことはあるんですが、気が付かなかったことにしましょう。0.2.0は色々あったみたいですが、見なかったことにしましょう。 アップデート方法 再インストールしてください。 C:\Users\{UserName}\AppData\Local\Code\app-0.3.0にまるっと新しいものがインストールされます。日本語フォントを適用するためにcssを直接いじってたりすると強制的に元に戻されてしまいますが、app-0.1.0に元のソースやバイナリがそのまま残っているので、適当にマージしましょう。 新機能 Updatesに色々書かれているので、適当に翻訳していきます。 新しいキーバインド 色々な要望を受けてデフォルトのキー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TSLint (deprecated) - Visual Studio Marketplace
Visual Studio Codeでよく利用するショートカット - Qiita
Change the World!
Visual Studio Codeでタブを2スペースにする - albatrosary's blog