VSCode開発環境_導入と拡張機能メモ

# 内容
　VSCodeを導入＆活用する上での忘備録。
　GithubやMarkdownの基本も、参考にさせてもらった記事のリンクを記載しています。

# 記事内項目一覧
   * [導入編](#導入編)
   * [git編](#git編)
   * [Markdown編](#markdown編)
   * [作図_デザイン編](#作図_デザイン編)
   * [拡張機能編](#拡張機能編)
   * [デバッグ](#デバッグ)

# VSCodeを使っている環境(私の場合)
　windows上のVScodeで開発 ⇒ github ⇒Raspi,jetsonで実行といった流れが主。
　今後は作図やプレゼンもVSCodeで完結させていきたい。

# 導入編
* [Visual Studio Code (Windows版) のインストール](https://qiita.com/psychoroid/items/7d85ae6bade4a67aedb1)
* [UbuntuにVSCodeをインストールする3つの方法](https://qiita.com/yoshiyasu1111/items/e21a77ed68b52cb5f7c8)
* [Hello VS Code ハンズオンテキスト](https://github.com/vscodejp/handson-hello-vscode)
* [VSCodeのSSH接続機能で、RaspberryPi内のコードを編集してデバッグ](https://qiita.com/c60evaporator/items/26ab9cfb9cd36facc8fd)
* [VS Code の便利なショートカットキー](https://qiita.com/12345/items/64f4372fbca041e949d0?utm_content=buffer86ac1&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer&fbclid=IwAR29BviNdlMCZ6vjX91LZLTjKfQ8-auR2sJE1GVrZlguqUaEvj5z_jSruLk)
* [Visual Studio CodeでHTML作成環境を整える](https://qiita.com/84zume/items/476a29264fdc98d98201?utm_content=bufferfb460&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer&fbclid=IwAR2fqCuOKtxQLtjUh48Vj0J3E9mYhkUnwQeDnrgRkwv9CHE_YDzJdUfARLM)


# git編
* [VSCodeでのGitの基本操作まとめ](https://qiita.com/y-tsutsu/items/2ba96b16b220fb5913be)
* [VSCodeでGit・GitHubを使う方法を解説する【2021最新】](https://miya-system-works.com/blog/detail/128)
* [Visual Studio Code で GitHub リポジトリをクローンして使用する](https://docs.microsoft.com/ja-jp/azure/developer/javascript/how-to/with-visual-studio-code/clone-github-repository)

<details><summary>git cloneの方法</summary>
　F1 キーを押してコマンド パレットを表示します。
 <div>
　コマンド パレットのプロンプトに「gitcl」と入力し、Git: Clone コマンドを選択して、Enter キーを押します。
　[リポジトリの URL] の入力を求められたら、GitHub リポジトリの URL を入力し、Enter キーを押します。
 </div>
 </details>

# Markdown編
* [Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d#links---%E3%83%AA%E3%83%B3%E3%82%AF)
* [VSCodeとMarkdownで技術同人誌書いたので拡張機能とかまとめ](https://qiita.com/reona396/items/40b234108f7664267db8)
* [Qiitaの数式チートシート](https://qiita.com/PlanetMeron/items/63ac58898541cbe81ada)
* [ディレクトリ構成図を書くときに便利な記号](https://qiita.com/paty-fakename/items/c82ed27b4070feeceff6?utm_content=buffer1181c&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer&fbclid=IwAR1t-yVYxtaw2IpDKxfOJxef5lZXmyy7Ta-lkJ2H6b5YMs6QHFrP54R0qzI)
* [[Qiita Markdown記法]ページ内リンク・注釈・折りたたみ等](https://qiita.com/aymikmts/items/71e550bf2c10f36883e9)
* [UMLとかシーケンス図とかAWSの図とかどれで描くと良いのよ？と思ったときの選択肢](https://qiita.com/e99h2121/items/eaca084ae7b0488ab686?utm_content=buffer7a2a8&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer&fbclid=IwAR0wWbvXSZZjWxrk2wlPT-OQe5oiP-Hx7SNdJR_xn-QikF3dFJ-9GKKVwdg)
* [Visual Studio Codeでmarkdownを書くときに便利な組み合わせ見つけたから晒す](https://www.suzu6.net/posts/307-vscode-markdown-image/)

<details><summary>コピペで使える便利Markdownのメモ</summary>
<div>

 ・折り畳み 
`<details><summary>タイトル</summary><div>内容</div></details>`
   
 ・画像のリサイズ
 `<img src="***画像のURL***" width="***サイズ***">`
 
 ・ディレクトリツリー表示
```
 モノRasPi3B
 ├ 証明書
 │  └ ポリシー
 ├ エンドポイント
 ├ トピック：RasPi3B/sample ← Publish ← test ← subscribe ← ラズパイのpython
 ```

・折りたたみの中身にコードが含まれる場合
`<details></details>の中で、コード部分を<div>～</div>で囲む必要がある`

</div>
</details>



# 作図_デザイン編
### Draw.io
* [VSCodeでDraw.ioが使えるようになったらしい](https://qiita.com/riku-shiru/items/5ab7c5aecdfea323ec4e)

### plantUML
* [Visual Studio CodeでPlantUMLを使う(MacOS)](https://zenn.dev/shimiyu/articles/e898f1936775cb)
* [plantUMLで業務フローを整理する](https://qiita.com/siskw/items/fa06bc59a80e923f95c2)
* [PlantUML シーケンス図で便利だと思った機能・使い方](https://qiita.com/yhornisse/items/b5ff87e63125828b52c1)
* [便利すぎるPlantUML - シーケンス図 | アクティビティ図 よく使うパターン備忘録](https://qiita.com/kenboo/items/9fa1265b38f9166907ad)
* [Visual Studio Codeでシーケンス図を描く(PlantUML拡張機能)](https://ohke.hateblo.jp/entry/2017/11/26/230000)
* [モデル化技法と UML](https://inokara.hateblo.jp/entry/2018/05/13/090437#7-%E3%83%A2%E3%83%87%E3%83%AB%E5%8C%96%E6%8A%80%E6%B3%95%E3%81%A8-UML)
* [タイミング図](https://plantuml.com/ja/timing-diagram)
 <img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483299/9327aa75-13c1-a8fb-96f6-59506e2da699.png width=320>

* [状態遷移表・状態遷移図の手引き](https://qiita.com/yugokitajima/items/16052dbec666292794f9)
* [ステートダイアグラム](https://plantuml.com/ja/state-diagram#google_vignette)
* [アクティビティ図](https://plantuml.com/ja-dark/activity-diagram-beta)
* [状態遷移図の書き方, 状態遷移表からのテスト抽出方法](https://www.wakuwakubank.com/posts/290-design-state/)
* [ステートマシン図](https://onct.oita-ct.ac.jp/seigyo/nishimura_hp/coursework/2018/SystemDesign/12/Note.html)


### Marp プレゼンスライド
* [【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る](https://qiita.com/tomo_makes/items/aafae4021986553ae1d8)

### そのほか
* [立体的な表現で見やすいネットワーク図がブラウザ上で作成できる](https://gigazine.net/amp/20210722-isoflow?__twitter_impression=true)0
* [状態遷移図の構文と機能](https://plantuml.com/ja/state-diagram)

# 拡張機能編
### 入れている拡張機能
* Git Graph
* GitLens — Git supercharged
    * commit単位でのファイル比較、最新のcommit内容表示
* Remote - SSH
    * vscodeでsshの接続先を開くことができる。
* Draw.io Integration
* Trailing Spaces
* Marp
* [Bash シェルスクリプトのデバッグや入力補完ができる Visual Studio Code 拡張機能（WSL2,mac,Linux対応）](https://qiita.com/Takakiri/items/41d0d1ed67e9505598a1)


* [VS Code拡張機能まとめ25選!!](https://zenn.dev/umi_mori/articles/dd121abf2a2f77)
* [VSCode に必ず入れておきたい拡張機能](https://qiita.com/ucan-lab/items/e85931bf8276da43cc97)
* [Visual Studio Codeで作るLT資料 〜 脱パワーポイント](https://qiita.com/gogogonkun/items/b90c5ef3ca4710211c76)
* [VSCodeでJavaの開発環境構築する方法](https://qiita.com/takuma-jpn/items/b49785a314fb4db85775)
* [VS Code（Visual Studio Code）エディタを便利に使うための拡張機能](https://karaage.hatenadiary.jp/entry/2018/10/01/073000)
* [vscodeのros拡張機能でモデルプレビューしながらurdf編集まで](https://sgrsn1711.hatenablog.com/entry/2020/05/25/164934)
* [VSCodeでPython書いてる人はとりあえずこれやっとけ〜](https://qiita.com/nanato12/items/ddf26487eb30714251c3)
* [VSCodeのおすすめ拡張機能と便利な設定、キーバインド集](https://zenn.dev/ruru/articles/396265425c9740)

# デバッグ
* [printデバッグから卒業しよう！](https://zenn.dev/karaage0703/books/80b6999d429abc8051bb/viewer/898591)