Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SourceKit-LSPをブラウザでコードを読むために活用する

 SourceKit-LSPをブラウザでコードを読むために活用する

SourceKit-LSPをブラウザでコードを読むために活用する
1. SourceKit for Safari Demo
2. SourceKit-LSPとは
3. LSP(Language Server Protocol)とは
4. SourceKit-LSPを使ってみる
5. SourceKit-LSPと通信する
6. Safari ExtensionとSourceKit-LSPを連携する
7. iPadでSourceKit-LSPを使う!?

w/ Presenter Note
https://www.icloud.com/keynote/0TuUNBtyBEnm5Mxqe0o7ROIRQ#iOSDC_-_SourceKit_LSP

Kishikawa Katsumi

September 19, 2020
Tweet

More Decks by Kishikawa Katsumi

Other Decks in Programming

Transcript

  1. Kishikawa Katsumi
    SourceKit-LSPΛϒϥ΢βͰ
    ίʔυΛಡΉͨΊʹ׆༻͢Δ

    View Slide

  2. ໨࣍
    1. SourceKit for Safari Demo

    2. SourceKit-LSPͱ͸

    3. LSPʢLanguage Server Protocolʣͱ͸

    4. SourceKit-LSPΛ࢖ͬͯΈΔ

    5. SourceKit-LSPͱ௨৴͢Δ

    6. Safari ExtensionͱSourceKit-LSPΛ࿈ܞ͢Δ

    7. iPadͰSourceKit-LSPΛ࢖͏ʂʁ

    View Slide

  3. SourceKit for Safari Demo

    View Slide

  4. View Slide

  5. SourceKit for Safari Demo
    Quick Help popup

    View Slide

  6. SourceKit for Safari Demo
    Quick Help popup

    View Slide

  7. SourceKit for Safari Demo
    Jumps to Definition

    View Slide

  8. SourceKit for Safari Demo
    Find References

    View Slide

  9. SourceKit for Safari Demo
    Highlights References

    View Slide

  10. GitHub Code Navigation
    https://docs.github.com/en/github/managing-files-in-a-repository/navigating-code-on-github

    View Slide

  11. SourceKit-LSPͱ͸

    View Slide

  12. SourceKit-LSPͱ͸
    SourceKit-LSP is an implementation of the Language Server
    Protocol (LSP) for Swift and C-based languages.

    It provides features like code-completion and jump-to-definition to
    editors that support LSP.

    SourceKit-LSP is built on top of sourcekitd and clangd for high-fidelity
    language support, and provides a powerful source code index as well
    as cross-language support.
    https://github.com/apple/sourcekit-lsp

    View Slide

  13. SourceKit-LSPͱ͸
    • SwiftɺCɺC++ɺObjective-C༻ͷLanguage Server Protocolͷ࣮૷

    • LSPʢLanguage Server ProtocolʣΛαϙʔτ͢ΔςΩετΤσΟλͰ

    ίʔυิ׬΍ఆٛݩʹδϟϯϓͳͲͷػೳ͕࢖͑ΔΑ͏ʹͳΔ

    • SourceKit-LSP͸sourcekitdͱclangdͱ࿈ܞͯͦ͠ΕΒͷػೳΛఏڙ͍ͯ͠Δ

    View Slide

  14. LSPʢLanguage Server Protocolʣͱ͸
    Adding features like auto complete, go to definition, or documentation on hover for a
    programming language takes significant effort. Traditionally this work had to be
    repeated for each development tool, as each tool provides different APIs for
    implementing the same feature.

    A Language Server is meant to provide the language-specific smarts and
    communicate with development tools over a protocol that enables inter-process
    communication.

    The idea behind the Language Server Protocol (LSP) is to standardize the protocol for
    how such servers and development tools communicate. This way, a single Language
    Server can be re-used in multiple development tools, which in turn can support
    multiple languages with minimal effort.
    https://microsoft.github.io/language-server-protocol/

    View Slide

  15. LSPʢLanguage Server Protocolʣͱ͸
    LSPʢLanguage Server Protocolʣ͸IDEͰඞཁͱ͞ΕΔιʔείʔυͷΦʔτ
    ίϯϓϦʔτ΍γϯϘϧͷఆٛݩʹδϟϯϓ͢ΔͳͲͷϓϩάϥϜΛղੳͯ͠
    ৘ใΛఏڙ͢ΔػೳΛαʔϏεͱ࣮ͯ͠ݱ͢Δ΋ͷͰ͢ɻ

    IDEͰඞཁͱ͞ΕΔػೳͱ͍͏΋ͷ͸ɺϓϩάϥϛϯάݴޠ͕มΘͬͯ΋΍Γͨ
    ͍͜ͱ͸΄΅ಉ͡Ͱ͢ɻLSP͕ొ৔͢ΔҎલ͸ݴޠ͝ͱͷIDE͕ͦΕͧΕ࣮૷͠
    ͯఏڙ͍ͯ͠·ͨ͠ɻ

    LSP͸ɺ͜ͷΑ͏ͳݴޠ͕มΘͬͯ΋ڞ௨ͯ͠ٻΊΒΕΔIDEͷػೳΛந৅Խ͠
    ͯ։ൃπʔϧ͔Β࢖͑ΔΑ͏ʹ͢Δ࢓༷Ͱ͢ɻ

    View Slide

  16. LSPʢLanguage Server Protocolʣͱ͸
    https://nshipster.com/language-server-protocol/

    View Slide

  17. SourceKit-LSPΛ࢖ͬͯΈΔ

    View Slide

  18. SourceKit-LSPΛ࢖ͬͯΈΔ
    1. SourceKit-LSPΛೖख͢Δ

    2. ςΩετΤσΟλͰSourceKit-LSPΛར༻͢ΔઃఆΛ͢Δ

    3. swift buildίϚϯυͰϓϩδΣΫτΛϏϧυ͢Δ

    4. ςΩετΤσΟλͰϓϩδΣΫτΛ։͘
    https://github.com/apple/sourcekit-lsp#getting-started

    View Slide

  19. SourceKit-LSPΛ࢖ͬͯΈΔ
    with VS Code
    1. SourceKit-LSP Visual Studio Code extensionΛϏϧυɾΠϯετʔϧ

    2. VS CodeʹSourceKit-LSPͷઃఆΛ͢Δ
    https://github.com/apple/sourcekit-lsp/tree/master/Editors#visual-studio-code

    View Slide

  20. SourceKit-LSPΛ࢖ͬͯΈΔ
    Visual Studio Code extensionΛϏϧυɾΠϯετʔϧ

    View Slide

  21. View Slide

  22. xcrun --find sourcekit-lsp

    View Slide

  23. SourceKit-LSPΛ࢖ͬͯΈΔ

    View Slide

  24. SourceKit-LSPΛ࢖ͬͯΈΔ

    View Slide

  25. SourceKit-LSPΛ࢖ͬͯΈΔ
    iOS SDKΛར༻͢ΔઃఆΛ௥Ճ

    View Slide

  26. SourceKit-LSPΛ࢖ͬͯΈΔ

    View Slide

  27. SourceKit-LSPͱ௨৴͢Δ

    View Slide

  28. SourceKit-LSPͱ௨৴͢Δ
    https://microsoft.github.io/language-server-protocol/overviews/lsp/overview/
    A language server runs as a separate process and development tools communicate with the server using the
    language protocol over JSON-RPC.

    View Slide

  29. SourceKit-LSPͱ௨৴͢Δ
    https://microsoft.github.io/language-server-protocol/overviews/lsp/overview/
    Request Response

    View Slide

  30. SourceKit-LSPͱ௨৴͢Δ
    https://microsoft.github.io/language-server-protocol/specifications/specification-current/
    Request Response
    Content-Length: ...\r\n
    \r\n
    {
    "jsonrpc": "2.0",
    "id": 1,
    "method": "textDocument/didOpen",
    "params": {
    ...
    }
    }
    Header
    Content

    View Slide




  31. View Slide

  32. View Slide

  33. SourceKit-LSPͱ௨৴͢Δ
    VS Code LSP
    initialize
    initialized
    didOpen
    hover
    hover
    didOpen
    hover

    View Slide

  34. SourceKit-LSPͱ௨৴͢Δ
    The protocol does not make any provisions about how requests,
    responses and notifications are transferred between client and server.

    https://en.wikipedia.org/wiki/Language_Server_Protocol#Transport_layer

    View Slide

  35. SourceKit-LSPͱ௨৴͢Δ
    The protocol does not make any provisions about how requests,
    responses and notifications are transferred between client and server.

    In this implementation, an editor communicates through stdin/stdout
    with the TypeScript server process and uses a JSON payload
    https://en.wikipedia.org/wiki/Language_Server_Protocol#Transport_layer
    https://docs.microsoft.com/en-us/visualstudio/extensibility/language-server-protocol?view=vs-2019#how-work-on-the-lsp-started

    View Slide

  36. View Slide

  37. SourceKit-LSPͱ௨৴͢Δ

    View Slide

  38. SourceKit-LSPͱ௨৴͢Δ

    View Slide

  39. SourceKit-LSPͱ௨৴͢Δ

    View Slide

  40. SourceKit-LSPͱ௨৴͢Δ

    View Slide

  41. SourceKit-LSPͱ௨৴͢Δ

    View Slide

  42. View Slide

  43. Symbols Hover

    View Slide

  44. https://github.com/kishikawakatsumi/SourceKitForSafari
    SourceKit-LSPͱ௨৴͢Δ

    View Slide

  45. https://github.com/kishikawakatsumi/SourceKitForSafari

    View Slide

  46. https://github.com/kishikawakatsumi/SourceKitForSafari
    SourceKit-LSPͱ௨৴͢Δ

    View Slide

  47. Safari Extensionͱ
    SourceKit-LSPΛ࿈ܞ͢Δ

    View Slide

  48. Safari ExtensionͱSourceKit-LSPΛ࿈ܞ͢Δ
    Safari Extension
    https://developer.apple.com/documentation/safariservices/safari_app_extensions

    View Slide

  49. Safari ExtensionͱSourceKit-LSPΛ࿈ܞ͢Δ
    Safari Extension

    View Slide

  50. Safari ExtensionͱSourceKit-LSPΛ࿈ܞ͢Δ
    Safari Extension
    SourceKit-LSP

    View Slide

  51. Chrome ExtensionͱSourceKit-LSPΛ࿈ܞ͢Δ
    Chrome Extension
    SourceKit-LSP Native Messaging

    View Slide

  52. Safari ExtensionͱSourceKit-LSPΛ࿈ܞ͢Δ
    App Side

    View Slide

  53. Safari ExtensionͱSourceKit-LSPΛ࿈ܞ͢Δ
    JS Side

    View Slide

  54. iPadͰSourceKit-LSPΛ࢖͏ʂʁ

    View Slide

  55. View Slide

  56. ·ͱΊ
    • SourceKit-LSPΛ࢖͏ͱXcode͕ఏڙ͍ͯ͠Δίʔυิ׬΍ϦϑΝΫλϦϯά
    ͷ৘ใΛऔಘͰ͖Δ

    • SourceKit-LSP͸ΫϥΠΞϯτϥΠϒϥϦ΋͋ΔͷͰ࿈ܞ͢Δ͜ͱ͸೉͘͠ͳ
    ͍

    • HTTPӽ͠ʹSourceKit-LSPΛૢ࡞͢ΔͱXcode for iOS͕࡞ΕΔ͔΋ʁ

    • SourceKit for SafariʢChrome֦ு΋͋Γ·͢ʣࢀߟʹ͍ͯͩ͘͠͞

    https://github.com/kishikawakatsumi/SourceKitForSafari

    View Slide