TypeScript plugins

Introduce how to use and create TypeScript LS plugins

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