[メモ] 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 にインストール

    yarn global add yo generator-code
    

    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

    yarn global add vsce
    

    • Publish

    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

  • レスポンスに関する諸条件

    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
  • ローカルが汚れない