小村記録

小村の開発環境構築（８）　VSCodeの拡張機能

開発環境構築記録

こんばんは、小村だよ！
今日は私がVSCodeで使用している拡張機能を紹介するよ！
このページは追加があり次第更新していくとおもわれ！

やること

VSCode 拡張機能インストール
PlantUMLの設定

事前準備

VSCodeからUbuntuにSSH接続していること（手順はこちらの事前準備）

手順

VSCode 拡張機能インストール

必要な機能をマーケットプレイスからインストールするよ！
私が現在使っているものを全部記載するね！
ローカルとUbuntu両方に入れる必要があるやつがあるかもしれない！
- その辺ちょっとあいまい。両方に入れておけば間違いはないと思われまス！

拡張機能名	重要度	用途
Bracket Pair Colorizer	★☆☆	()の色を変更する
Japanese Language Pack for VS Code	★★★	VS Codeの日本語化
Material Icon Theme	★★★	アイコン集。ここは趣味が出る
Remote Development	★★★	VSCodeのリモート接続パッケージ
ESLint	★★★	JavaScriptのLintをリアルタイムで実施
Git Graph	★★★	Gitのコミット状況をグラフ化
indent-rainbow	★☆☆	インデントの色を変更する
Markdown All in One	★★★	マークダウンを書くなら入れとけ
Markdown PDF	★☆☆	マークダウンをPDF化。時々つかう
Markdown Preview Enhanced	★☆☆	マークダウンにPlantUMLを埋め込める
markdownlint	★★☆	マークダウン用Lint。時々わずらわしい
partial Diff	★★☆	手軽にDiff可能
Path Intellisense	★☆☆	Pathの入力を補助する
PlantUML	★★☆	UML書くならこれ使う。Javaが必要
Prettier - Code formatter	★★★	フォーマッタ。Nuxt.jsで使う
Rainbow CSV	★☆☆	CSVが見やすくなる
StyleLint	★★★	CSS、SCSSのリンター
Vetur	★★★	vue.js nuxt.js書くなら必須

だいたいこんな感じかなー！
え～〇〇使ってないの～～～！？ぷーくすくす！情弱ー！！！
って思った人はぜひ教えてくれると嬉しいよ！
- 私喜ぶよ！靴舐めるよ！

PlantUMLについて

前置き

しれっと入れたPlantUMLだけど、これはちょっと解説が必要なのでするね！
これはUMLをVSCodeで書けるすごいやつです！時々使う！
ただ、これ使うにはJava実行環境が必要！
というわけでUbuntuで使えるように設定をしていきまーーース！

PlantUML実行環境のインストール

参考：PlantUMLをUbuntuにインストールする
早速UbuntuにJavaの実行環境を入れていくよ
Javaで開発する予定があるなら[JDK]、ないなら[JRE]をインストールすればおっけー
私はjava触ることしばらくないと思うのでJREでいくよ！
あと[graphviz]というものも必要みたいなので同様に入れるね！

sudo apt-get install default-jre
sudo apt-get install graphviz

そしたら[.uml]ファイルを作ってUMLを記述して確認しよー！
私は[ Markdown Preview Enhanced ]も入れてるので[.md]ファイルにも書けるよ！
とりあえず[Hello World]的なものを記載してー

UMLの描画確認

おいィ？？？？？描画されねんだが？？？？？？？？
なんぞ？？？？？？？？？？？？？

あらためてUMLの描画確認

参考：VSCode拡張のPlantUMLプレビューが表示されない場合の対応
設定でRenderとServerを設定してあげる必要があったみたい！！！
参考サイトのとおり、下記のように設定を変更したよ！
Render
- PlantUMLServer
Server
- https://www.plantuml.com/plantuml
無事かけてめでたしめでたし！

おわりに

最近拡張機能の情報を得てないから、もっと便利なの出てるだろうなーーー
そのうち情報収集してこのページを更新していきたいと思いまス
さてさて！！！
次回はおまちかね、ついに！nuxt.jsアプリの作成するよ！長丁場の予感！
それじゃーまたね～～～！ちゃおちゃお～～～！！！