TypeScript plugins

TypeScript plugins

Introduce how to use and create TypeScript LS plugins

893f54413c2bd9ba41d11d753aacaf2c?s=128

Yosuke Kurami

April 28, 2017
Tweet

Transcript

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

  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 

  3. Today’s theme: new TypeScript feature

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

  5. New feature: Plugin support

  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͔ΒಡΈ͜·ΕΔ
  7. Plugin͕Ͱ͖Δ͜ͱ • Plugin͸Language ServiceΛproxy͢Δ • τϥϯεύΠϧͷڍಈมߋ͸Ͱ͖ͳ͍ • https://github.com/Microsoft/TypeScript/issues/14419

  8. Language Service in TS

  9. Language Service in TS

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

    ͸ɺछผΛ໰ΘͣΤσΟλ͕ڗड͢ΔػೳΛ ֦ுͰ͖Δɺͱ͍͏͜ͱ
  11. (ࢀߟ) LSP https://github.com/Microsoft/language-server-protocol

  12. ༇շͳ஥ؒͨͪ

  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
  14. ·ͩ·ͩগͳ͍….

  15. ࡞Ζ͏ʂ

  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;
  17. How to create LS plugins • ඞཁͳܕఆٛ͸ typescript/lib/tsserverlibrary ͔Β import

    • create: (info) => ts.LanguageService Λ࣮૷͢Δ • ඞཁʹԠͯ͡ languageService ͷϝιουΛ্ॻ͖͢Δ • ؆୯ʂ
  18. Thank you !