Introduce how to use and create TypeScript LS plugins
TypeScript Plugin2017.04.28 Meguro.es x Gotanda.js
View Slide
About me• @Quramy (Yosuke Kurami)• Frontend Web Developer at WACUL INC.• develop SPA with TypeScript and Angular• झຯͰTypeScript༻ͷVimϓϥΪϯ։ൃͯ͠·͢• http://vimawesome.com/plugin/tsuquyomi
Today’s theme:new TypeScript feature
TypeScript 2.3 is cominghttps://blogs.msdn.microsoft.com/typescript/2017/04/27/announcing-typescript-2-3/
New feature: Plugin support
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͔ΒಡΈ͜·ΕΔ
Plugin͕Ͱ͖Δ͜ͱ• PluginLanguage ServiceΛproxy͢Δ• τϥϯεύΠϧͷڍಈมߋͰ͖ͳ͍• https://github.com/Microsoft/TypeScript/issues/14419
Language Service in TS
What’s Language Service• ΤσΟλɾIDEʹछʑͷݴޠใΛఏڙ͢Δ• ฤूதιʔείʔυͷΤϥʔɺิɺetc• Language ServiceΛ֦ுͰ͖Δͱ͍͏͜ͱɺछผΛΘͣΤσΟλ͕ڗड͢ΔػೳΛ֦ுͰ͖Δɺͱ͍͏͜ͱ
(ࢀߟ) LSPhttps://github.com/Microsoft/language-server-protocol
༇շͳؒͨͪ
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
·ͩ·ͩগͳ͍….
࡞Ζ͏ʂ
Let’s create LS pluginsimport * 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;
How to create LS plugins• ඞཁͳܕఆٛ typescript/lib/tsserverlibrary ͔Βimport• create: (info) => ts.LanguageService Λ࣮͢Δ• ඞཁʹԠͯ͡ languageService ͷϝιουΛ্ॻ͖͢Δ• ؆୯ʂ
Thank you !