[メモ] VS Code Meetup #3 - Extensionを使う編 #vscodejp 

# VS Code Meetup #3 - Extensionを使う編

## イベント詳細

Compassページ

- https://vscode.connpass.com/event/166047/
- ※オンライン参加

## LT

### VSCode+Java Extension PackでJava開発

登壇者:setoazusa（大中浩行 MVP）

#####  資料

- https://slides.com/hiroyuki_onaka/vscode-meetup3#/

##### メモ

- Stacoverflowの「Developer Survey Result 2019」では
  - 全言語でVSCodeは1番使われている
  - Javaのシェアでは、IntelliJ、Eclipse、NetBeansの順
  - 全言語では、VSCodeは、IntelliJ、Eclipse、NetBeansを抑えて1位

- お題
  - 時代はVSCode
  - javaプログラミングをテキストエディターで行う時代再び！

- 導入
  - VSCode ver.13以降
  - VSCode Java Pack Installer

- ポイントはLanguage Server Protocol（LSP）
  - 言語がソースコードエディターやIDEに対して機能を提供するためのJSON-RPCベースのプロトコル
  - EclipseのJava向け機能（JDT）を使用するLSP実装（Eclips JDT Language Server）
- Lambda が苦手
- 初回起動が遅い

- デモ
  - ショートカットやシンタックスはEclipseと同じ
  - リファクタリングも可能
  - breakポイントを設定し、デバッグ可能
  - JUnitの実行
    - UTのクラスとメソッド上部に「Run Test」「Debug Test」の各リンク
  - taskに設定でgradle経由でWebApp起動も可能


### Creating your own extensions

登壇者:Naturalclar

#####  資料

- https://creating-your-own-extensions.naturalclar.now.sh/

##### メモ

- TypeScrpt and Flow
  - Flow でReact Native
  - Flowを使うためにVS CodeのTypeScriptの設定をOFFにする必要がある
  - 毎回、設定OFFは辛い
  - ワークスペース毎に設定を変えられるExtensionを作成
    - workspace-settings-json
    - https://marketplace.visualstudio.com/items?itemName=Naturalclar.workspace-settings-json

- workspace-settings-json をどう作ったか
  - boilerplateを元に作成？
    - ※具体的にどのようなテンプレートを流用したのか聞き取れなかった
      - このあたり？
        - https://github.com/microsoft/vscode-extension-samples
        - https://github.com/Almenon/vscode-extension-boilerplate
      - まさか
        - https://marketplace.visualstudio.com/items?itemName=mantou.vscode-boilerplate&ssr=false#overview

- Yeoman and Generator for VSC Exttension
  - Yarn global にインストール

    ```bash
    yarn global add yo generator-code
    ```

    ```bash
    yo code
    ```

  - VSCodeのExtensionは簡単なものであれば数行で作成できる

- Debugger Extension
  - https://code.visualstudio.com/api/extension-guides/debugger-extension

- Publishing Extensions
  - https://code.visualstudio.com/api/working-with-extensions/publishing-extension

  - vsce
    - cli for vs code extension
    ```bash
    yarn global add vsce
    ```

    - Publish
    ```bash
    vsce publish
    ```

- marketplaceにも簡単にUPできる
  - 登録などの事前準備は必要


### Extension(を検索するAPI)を使う
登壇者:Sho Sato

#####  資料
- https://www.slideshare.net/cssho/extensionapi

##### メモ
- VSCodeやAzure DevOpsのソース、Marketplaceの通信ログからhack

- Endpoint
  - https://marketplace.visualstudio.com/_apis/public/galle
ry/extensionquery
- HTTP Method
  - POST
- HTTP Header
  - Content-Type: application/json
  - Accept: application/json;api-version=3.0-preview.1
- Flags
  - レスポンスに関する諸条件
 
    ```cs
    enum Flags {
      None = 0x0,
      IncludeVersions = 0x1,
      IncludeFiles = 0x2,
      IncludeCategoryAndTags = 0x4,
      IncludeSharedAccounts = 0x8,
      IncludeVersionProperties = 0x10,
      ExcludeNonValidated = 0x20,
      IncludeInstallationTargets = 0x40,
      IncludeAssetUri = 0x80,
      IncludeStatistics = 0x100,
      IncludeLatestVersionOnly = 0x200,
      Unpublished = 0x1000
    }
    ```
- FilterType、SortByもある

- 上記APIを使用してランキングを取るBotを作成
  - Botを作ると機能拡張を探すのがはかどる


### PlantUMLと関連するExtension
登壇者:YutakaOhe（大栄 豊 (株)オーバス勤務((株)デンソーより出向中)）
- SWEST/LED-Camp実行委員

#####  資料
- https://1drv.ms/b/s!AkLB2eZss6SqgdU6YWY3iyMjbEYU5Q

##### メモ
- UMLツールはGUI製品が多い
- PlantUML はmarkdownテキストで記述できるUMLツール
  - https://plantuml.com/ja/
- インストール
  - 必要なもの
    - Java(JRE)
    - Graphviz
      - cinst graphviz-y
    - PlantUML
      - cinst plantuml-y
  - Chocolatey を使うと自動的にインストール可能
    - https://chocolatey.org/
    - 管理者権限でChocolateyをインストール
  - Extensionのインストール
    - VSCodeExtension for PlantUML
- PlantUML言語リファレンスガイド
  - http://plantuml.com/ja/guide
- Markdown表記によるシンプル＆省記述
  - キーボード操作だけで、記述可能
  - モデル図を簡単な文法で書き分け可能
- リアルタイムプレビューによる編集
  - 左右分割でコード⇒モデル図の確認容易
- 他のUMLツールでは面倒なレイアウト編集不要
  - 要素の記述順序次第で自動配置＆整列


### VS Code-textlintを使ってREADMEの初期品質UP！
登壇者:san-tak

#####  資料
- https://speakerdeck.com/santak/using-vs-code-textlint-extension

##### メモ
- textlint
  - テキストのチェックを行う校正ツール
    - 文書内での用語のゆらぎ
    - 助詞の重複
    - 二重否定
    - １文の長さ
    - など
  - チェックを行うルールは、用意されているものや独自にルール定義することもできる
- Ansible Role のREADME.md をチェックするため
  - READMEのテンプレートは決めているが、ミドルウェアによって書く内容は異なる
- 開発者が複数の拠点(国内・海外)に分散
  - レビューを開始するための一定の品質レベルが必要となる（レビュー開始のベースラインを定める）
- fixable は、textlint の実行で修正が可能

- textlint 本体利用の効果
  - レビューアの効率化
- VS Code textlint Extension 利用の効果開
  - 開発者の効率化
- 利用のポイント
  - テキストはチェック範囲が自由で多岐にわたる。PJとしての辞書の取捨選択がポイント
  - 辞書の分散による開発者間での不整合
    - →Jenkinsでの最終チェックを正とする、定期的な辞書のpullをするなど、全体プロセスの仕掛けが必要


### VSCode Remoteでも画像コピペしたい！
登壇者:tyamadajp

#####  資料
- https://www.slideshare.net/tyamadajp/vscode-remote

##### メモ
- Markdown All in One + Paste Image
  - VSCode RemoteだとPaste Imageが動かない
  - Extensionもリモート実行になり、存在しないクリップボードからペーストできない

- UI extensionとWorkspace extension
  - UI extensionはローカル実行を強制
  - Workspace extensionはリモート実行

- VSCode Reamoteでも画像のコピペはできる
- VSCodeのクリップボードAPIに期待
- 正面がだめでも裏口はある 

### 人知れず活躍するVS Codeについて
登壇者:もっちゃん(mochan-tk)

##### メモ
- Katacoda
  - https://www.katacoda.com/
  - Web上で様々な技術を学ぶサービス
  - 無料コースあり
  - IDEがVSCode
  - ハンズオン界隈で注目
  - ブラウザ＋Katacoda　スマートフォンでもハンズオン？


### VSCode書籍紹介、VSCode♡YAML
登壇者:74th（森本 篤 「Visual Studio Code 実践ガイド」著者）

#####  資料
- https://speakerdeck.com/74th/vscodeyaml

##### メモ
- YAML
  - VSCodeでサポートするには
  - JSONはJSON schemaに従って、エラー検出、コード補完
- YAML Extension
  - Red-Hat製
  - https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml
  - JSONスキーマを使用
    - 設定で対応を書くと、エラー検出、コード補完が利用可能


### Visual Studio Code + Docker + Remote DevelopmentでTomcat上のWebアプリを超簡単にデバッグ
登壇者:Noriyuki TAKEI

#####  資料
- https://speakerdeck.com/noriyukitakei/visual-studio-code-plus-docker-plus-remote-developmentdetomcatshang-falsewebapuriwochao-jian-dan-nidebatugu

##### メモ
- いけてない方法
  - ソースコード＋Tomcat をVSCode
  - ローカルを汚す（プラグインなど）
- いけてる方法
  - DockerコンテナにTomacat for Java プラグイン＋VSCode Server＋Webアプリ＋Tomacat＋Java
    - ソースコードのみVSCode
  - ローカルが汚れない