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

TypeScript plugins

TypeScript plugins

Introduce how to use and create TypeScript LS plugins

Yosuke Kurami

April 28, 2017
Tweet

More Decks by Yosuke Kurami

Other Decks in Programming

Transcript

  1. TypeScript Plugin
    2017.04.28 Meguro.es x Gotanda.js

    View Slide

  2. About me
    • @Quramy (Yosuke Kurami)
    • Frontend Web Developer at WACUL INC.
    • develop SPA with TypeScript and Angular
    • झຯͰTypeScript༻ͷVimϓϥΪϯ։ൃͯ͠·͢
    • http://vimawesome.com/plugin/tsuquyomi 


    View Slide

  3. Today’s theme:
    new TypeScript feature

    View Slide

  4. TypeScript 2.3 is coming
    https://blogs.msdn.microsoft.com/typescript/2017/04/27/announcing-typescript-2-3/

    View Slide

  5. New feature: Plugin support

    View Slide

  6. How to use plugins
    {
    "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "strict": true,
    "sourceMap": false,
    "plugins": [
    { "name": "hoge-plugin" },
    { "name": "foo-plugin" }
    ]
    }
    }
    • tsconfig.jsonʹpluginsΛࢦఆ͢Δ
    • node_modules͔ΒಡΈ͜·ΕΔ

    View Slide

  7. Plugin͕Ͱ͖Δ͜ͱ
    • Plugin͸Language ServiceΛproxy͢Δ
    • τϥϯεύΠϧͷڍಈมߋ͸Ͱ͖ͳ͍
    • https://github.com/Microsoft/TypeScript/issues/14419

    View Slide

  8. Language Service in TS

    View Slide

  9. Language Service in TS

    View Slide

  10. What’s Language Service
    • ΤσΟλɾIDEʹछʑͷݴޠ৘ใΛఏڙ͢Δ
    • ฤूதιʔείʔυͷΤϥʔɺิ׬ɺetc
    • Language ServiceΛ֦ுͰ͖Δͱ͍͏͜ͱ
    ͸ɺछผΛ໰ΘͣΤσΟλ͕ڗड͢ΔػೳΛ
    ֦ுͰ͖Δɺͱ͍͏͜ͱ

    View Slide

  11. (ࢀߟ) LSP
    https://github.com/Microsoft/language-server-protocol

    View Slide

  12. ༇շͳ஥ؒͨͪ

    View Slide

  13. Plugins:
    • Angular: ςϯϓϨʔτͷิ׬, ΤϥʔνΣοΫ, etc…

    https://github.com/angular/angular
    • Vue.js: Single File Components αϙʔτ

    https://github.com/sandersn/vue-ts-plugin
    • tslint: tslintΤϥʔͷ௥Ճ

    https://github.com/angelozerr/tslint-language-service
    • CSS Modules: .cssϑΝΠϧͷղܾ

    https://github.com/HerringtonDarkholme/ts-css-plugin
    • GraphQL: GraphQLΫΤϦͷิ׬ɺΤϥʔνΣοΫ

    https://github.com/Quramy/ts-graphql-plugin

    View Slide

  14. ·ͩ·ͩগͳ͍….

    View Slide

  15. ࡞Ζ͏ʂ

    View Slide

  16. Let’s create LS plugins
    import * as ts from 'typescript/lib/tsserverlibrary';
    function create(info: ts.server.PluginCreateInfo) {
    const ls = info.languageService;
    // extend ls object...
    return ls;
    }
    const factory: ts.server.PluginModuleFactory = () => {
    return { create };
    }
    export = factory;

    View Slide

  17. How to create LS plugins
    • ඞཁͳܕఆٛ͸ typescript/lib/tsserverlibrary ͔Β
    import
    • create: (info) => ts.LanguageService Λ࣮૷͢Δ
    • ඞཁʹԠͯ͡ languageService ͷϝιουΛ্ॻ͖͢Δ
    • ؆୯ʂ

    View Slide

  18. Thank you !

    View Slide