Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TypeScript plugins
Search
Yosuke Kurami
April 28, 2017
Programming
0
1.7k
TypeScript plugins
Introduce how to use and create TypeScript LS plugins
Yosuke Kurami
April 28, 2017
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
Next.js App Router
quramy
14
2.3k
Fragment Composition of GraphQL
quramy
14
1.7k
reg-viz VRT tools
quramy
4
900
NoInfer
quramy
0
120
Precondition with schema directives
quramy
0
1.1k
T3 Stack and TypeScript ecosystem
quramy
4
1.7k
apollo client / react / esm
quramy
1
210
Apollo Client useFragment
quramy
1
630
About Type Syntax Proposal
quramy
1
1.9k
Other Decks in Programming
See All in Programming
How to improve maintainability and readability of your automated tests? ( #scrumniigata )
teyamagu
PRO
1
130
Enjoy Creative Coding with Ruby (RubyKaigi2024)
chobishiba
0
1k
Open standards for building event-driven applications in the cloud
meteatamel
0
240
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
orgachem
PRO
19
2.5k
RailsConf 2024: Riffing on Rails: sketch your way to better designed code
kaspth
1
220
Amazon Aurora Serverless v2が意外と高かった話と、AWS Database Migration Serviceの話
satoshi256kbyte
1
110
Escolhendo (ou não) o melhor ORM para o seu projeto
andreiacsilva
1
170
仕様と実装で学ぶOpenTelemetry
drumato
2
1.2k
slog登場に伴うloggerの取り回し手法の見直し / kamakura.go #6
arthur1
0
170
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
2k
TypeScriptの型とパフォーマンス (TSKaigi 2024)
ypresto
14
5.2k
The test code generator using static analysis and LLM
mikik0
1
300
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
In The Pink: A Labor of Love
frogandcode
138
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Statistics for Hackers
jakevdp
790
220k
Documentation Writing (for coders)
carmenintech
60
4k
Robots, Beer and Maslow
schacon
PRO
155
8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
130
Mobile First: as difficult as doing things right
swwweet
217
8.6k
It's Worth the Effort
3n
180
27k
Fireside Chat
paigeccino
22
2.7k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
The Mythical Team-Month
searls
217
42k
Transcript
TypeScript Plugin 2017.04.28 Meguro.es x Gotanda.js
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 coming https://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
Language Service in TS
What’s Language Service • ΤσΟλɾIDEʹछʑͷݴޠใΛఏڙ͢Δ • ฤूதιʔείʔυͷΤϥʔɺิɺetc • Language ServiceΛ֦ுͰ͖Δͱ͍͏͜ͱ
ɺछผΛΘͣΤσΟλ͕ڗड͢ΔػೳΛ ֦ுͰ͖Δɺͱ͍͏͜ͱ
(ࢀߟ) LSP https://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 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;
How to create LS plugins • ඞཁͳܕఆٛ typescript/lib/tsserverlibrary ͔Β import
• create: (info) => ts.LanguageService Λ࣮͢Δ • ඞཁʹԠͯ͡ languageService ͷϝιουΛ্ॻ͖͢Δ • ؆୯ʂ
Thank you !