Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Vue I18n 向けに ESLint プラグインを作った
kazupon
May 22, 2019
Programming
1
1.2k
Vue I18n 向けに ESLint プラグインを作った
kazupon
May 22, 2019
Tweet
Share
More Decks by kazupon
See All by kazupon
Reactivity Transform
kazupon
1
730
わたしのOSS活動
kazupon
1
820
Vue with Vite
kazupon
2
2.1k
State of Vue I18n
kazupon
3
380
まちにまった Vue.js 3
kazupon
14
5k
Native-ESM powered web dev build tool
kazupon
5
1.1k
まもなくやってくる Vue.js 3
kazupon
38
18k
Vue.js 3 に向けた Vue.js 入門
kazupon
19
6.2k
Vue Fes Japan 2018 舞台裏について
kazupon
4
2k
Other Decks in Programming
See All in Programming
Amazon QuickSightのアップデート -re:Invent 2022の復習&2022年ハイライト-
shogo452
0
230
Refactor with using `available` and `deprecated`
417_72ki
3
380
Most Valuable Bug(?) ~インシデント未遂から得た学び~
tatsumiakahori
0
150
コンピュータビジョンセミナー2 / computer_vision_seminar_libSGM
fixstars
0
320
Azure Functionsをサクッと開発、サクッとデプロイ/vscodeconf2023-baba
nina01
1
340
PHP でガチの電卓を作る
memory1994
PRO
1
110
tidy_rpart
bk_18
0
600
(新米)エンジニアリングマネージャーのしごと #RSGT2023
murabayashi
9
5.8k
Gradle build: The time is now
nonews
1
480
NGK2023S - OCaml最高! スマホ開発にも使えちゃう?!
haochenxie
0
120
Rによる大規模データの処理
s_uryu
2
640
ipa-medit: Memory search and patch tool for IPA without Jailbreaking/ipa-medit-bh2022-europe
tkmru
0
130
Featured
See All Featured
Music & Morning Musume
bryan
37
4.6k
Producing Creativity
orderedlist
PRO
335
38k
The Cult of Friendly URLs
andyhume
69
5.1k
Support Driven Design
roundedbygravity
88
8.9k
GraphQLとの向き合い方2022年版
quramy
20
9.9k
Become a Pro
speakerdeck
PRO
6
3.2k
The Invisible Customer
myddelton
113
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
Thoughts on Productivity
jonyablonski
49
2.7k
Making Projects Easy
brettharned
102
4.8k
Building Applications with DynamoDB
mza
85
5k
Typedesign – Prime Four
hannesfritz
34
1.5k
Transcript
Vue I18n ͚ʹ ESLint ϓϥάΠϯΛ࡞ͬͨ Ginza.js #1 at PLAID, inc.
2019.05.22 @kazupon
ࣗݾհ
PLAID, inc. Vue.js Core Team Member Vue.js Japan User Group
Organizer Vue I18n Author WebAssembly Love ❤ @kazu_pon kazupon kazupon
ۙگ: PLAID ʹೖࣾ͠·ͨ͠ʂ https://twitter.com/kazu_pon/status/1125583679923744768
i18n νʔϜͰ KARTE ։ൃ͍ͯ͠·͢ʂ
We are hiring !! •͍ͬ͠ΐʹ KARTE ࡞Γ͍ͨਓ ืूதͰ͢ʂ https://plaid.co.jp/recruit.html
ΠϯτϩμΫγϣϯ
20194݄10
https://twitter.com/kazu_pon/status/1116029099485483009
ϑΝʔετόʔδϣϯ ϦϦʔεʂ eslint-plugin-vue-i18n
ϦϦʔε 1ϲ݄ͪΐͬͱલ·Ͱ…
࣮ ESLint ϓϥάΠϯ શ͘࡞ͬͨ͜ͱ͕ͳ͍ʂ
ͱ͍͏Θ͚Ͱ
ࠓ͢͜ͱ • ͳͥϓϥάΠϯΛ࡞ͬͨͷ͔ʁ • Vue I18n ͚ʹ࡞ͬͨϧʔϧ • ϓϥάΠϯ࣮ͷ •
ϓϥάΠϯ࣮ͰϋϚͬͨɺେมͩͬͨࣄ • ϓϥάΠϯͷࠓޙ
ͳͥ ϓϥάΠϯΛ࡞ͬͨͷ͔ʁ
ຊʹೖΔલʹ ͪΐͬͱ…
i18n ʹ͍ͭͯ
i18n ͬͯʁ • internationalization (ΠϯλʔφγϣφϥΠθʔ γϣϯ) ͷུশ (ψϝϩχϜ) • ಛఆͷݴޠɺҬͦͯ͠จԽʹґଘ͠ͳ͍
ϑΥʔϚοτͰϓϩμΫτΛ൚༻Խ͢Δ͜ͱ i nternationalizatio n 18 จࣈ i18n
i18n ͱ l10n ͷؔ • l10n: localization (ϩʔΧϥΠθʔγϣ ϯ:ҬԽ)ͷུশ i18n
+ l10n = g11n (globalization) 11 จࣈ ج൫ ຊޠ ӳޠ தࠃޠ l10n i18n g11n
i18n ରԠ߲༰ • ςΩετϝοηʔδ • ࣌ϑΥʔϚοτ • ϑΥʔϚοτ • ը૾ɺಈը
• จࣈίʔυɺֆจࣈ • ి൪߸ • ॅॴɺ໊લ • ܾࡁॲཧɺ੫ۚ • σʔλϕʔε • UI ϨΠΞτ… ͳͲ
ͳΜ͔ ͍ͬͺ͍͋Γ·͢Ͷ…
ͬͱৄ͘͠Γ͚ͨΕ • άϩʔόϧͳιϑτΣ Ξ։ൃͷઃܭͱϓϩηε • ϩʔΧϥΠθʔγϣϯͷ ϓϩηε • ͜ΕΒʹ͍ͭͯ ॻ੶ݟͯͶʂ
https://book.impress.co.jp/books/1117101057
Ε·͕ͨ͠ ଓ͍ͯ
Vue I18n
Vue.js ͚ͷ i18n ϓϥάΠϯ • ςΩετϝοηʔδ • ࣌ϑΥʔϚοτ • ϑΥʔϚοτ
ྫ: ςΩετϝοηʔδͷ i18n Vue ΞϓϦέʔγϣϯ Vue I18n API Locale Messages
en.json ja.json … ͦͷଞͷݴޠ ಡΈࠐΉ ςϯϓϨʔτ ݴޠΛબ ςΩετ બͨ͠ݴޠͰදࣔ
Vue I18n օ͞Μʹͬͯ ͍ͯ·͕͢…
՝৭ʑ͋Δ
৭ʑ͋Δ1ͭͷதͰ…
Locale Messages ͷཧ͕େม •Keysͱ Messages ཧ͕ਏ͍… https://studio-v-tokyo9.studio.design/i18n
STUDIOͷΈ͓͔͞ΜࣗલͰղܾ͍ͯ͠Δ Google spread sheetsɺGASɺͦͯࣗ͠લLint πʔϧͰղܾ͍ͯ͠Δʂ
DX ͕ྑ͘ͳ͍… Կͱ͔͠ͳ͚Εʂ
ରԠ࢝͠Ί͕ͨ… • ࠷ॳɺvue- i18n-extract ͱ Έ߹Θͤͯಠࣗ Lint ࡞͕ͬͯͨ… https://twitter.com/kazu_pon/status/1101414331487465472
Lint ج൫Λ εΫϥον͔Β࡞Δͷ ͪΐͬͱਏ͍
ESLint ͕͋Δ͡Όͳ͍͔
ͦ͏ͩ ESLint ϓϥάΠϯΛ ॻ͜͏ʂ
ͱ͏͍Θ͚Ͱ ESLint ϓϥάΠϯΛ ࡞Γ͡Ίͨ https://twitter.com/kazu_pon/status/1102406805471129601
eslint-plugin-vue-i18n
Vue I18n ͚ʹ ࡞ͬͨϧʔϧ
࡞ͬͨϧʔϧશ෦Ͱ5ͭ • Recommended Vue I18n ͏ʹ͋ͨͬͯ ඞཁʹͳΔϧʔϧܥ • Best Practices
ಋೖ͢Δͱ͞Βʹ i18n ର Ԡ͕Α͘ͳΔϕετϧʔ ϧܥ https://kazupon.github.io/eslint-plugin-vue-i18n/
ϓϥάΠϯͷಋೖํ๏
ੈʹ͋Δ ESLint ϓϥάΠϯͱ΄΅ಉ͡ • Πϯετʔϧ • .eslintrc.* Λ ઃఆ͢Δ •
rules • settings
ESLint ࣮ߦํ๏
eslint-plugin-vue ͱ΄΅ಉ͡ • −−ext Φϓγϣϯ
DEMO
ϓϥάΠϯ࣮ͷ
ͲͷΑ͏ͳྲྀΕͰ࡞͍ͬͯͬͨͷ͔ • ϑΣʔζ1: • ESLint ϓϥάΠϯͷ࡞Γํجຊཧղ • ϑΣʔζ2: • ESLint
ϓϥάΠϯϓϩδΣΫτͷߏங • ϑΣʔζ3: • ESLint ϓϥάΠϯͷ࣮
ϑΣʔζ1 ESLint ϓϥάΠϯͷ࡞Γํ جຊཧղ
ϑΣʔζ1 • ESLint ެࣜυΩϡϝϯτΛಡΉ • ESLint தͷਓͷQiitaಡΉ • Hello WorldతͳϓϥάΠϯΛ࡞ͬͯΈΔ
ESLintެࣜυΩϡϝϯτΛಡΉ • ެࣜυΩϡϝϯτඞಡʂʂ • Developer guide Λͻͱ௨ΓಡΉ https://eslint.org/docs/developer-guide/
ESLintதͷਓͷQiitaಡΉ • mysticatea͞Μ ղઆͷΧελϜ ϧʔϧͷ࣮ʹ ͍ͭͯཧղ͢Δ • ESLintʹ͓͚Δ ୯ମςετཧ ղ͢Δ
https://qiita.com/mysticatea/items/cc3f648e11368799e66c
͜ΕΒΛಡΜͰ
AST ॲཧʹ͍ͭͯཧղͨ͠ • ESLint ͷΧελϜ ϧʔϧͷ࣮ɺ جຊతʹ AST (Abstract Syntax
Tree) ͷ Node λΠϓ ·ͨΫΤϦʹϚο ν͢ΔΑ͏ͳ Visitor ؔͰ࣮͢Δ
Hello WorldతͳϓϥάΠϯΛ࡞ͬͯΈΔ • ࣮ࡍʹखΛಈ͔ͯ͠جຊతͳ࡞ΓํΛ ཧղ͍ͯ͠Δ͔Ͳ͏͔֬ೝʂ
ϑΣʔζ2 ESLintϓϥάΠϯϓϩδΣΫτͷ ߏங
ϑΣʔζ2 • ϦϙδτϦͷߏԽ • εΫϦϓτʹΑΔࣗಈੜͷඋ • ࡞Γ͍ͨϧʔϧͷ༷Λఆٛ
ϦϙδτϦΛߏԽ • OSS ϓϩδΣΫτͳͷͰ ୭ཧղ͘͢͠ϝϯς φϒϧʹʂ • mysticatea͞Μ͕ఏڙ͢Δ ϦϙδτϦeslint-plugin- vueΛࢀߟʹΠϯεύΠΞ
ϦϙδτϦΛ ߏԽͨ݁͠Ռ
TDD ͷϦζϜΛੜΈग़͍͢͠ߏʹʂ tests docs lib ༷ ఆٛ ςετ ࣮ https://twitter.com/kazu_pon/status/1107461420629671937
εΫϦϓτʹΑΔࣗಈੜͷඋ • ϧʔϧҰཡͷυΩϡϝϯτ ϧʔϧͷ meta.docs ͔Βੜ
εΫϦϓτʹΑΔࣗಈੜͷඋ • ESLint Configuration ϑΝΠϧͷੜ ͜Εϧʔϧͷ meta.docs ͔Βੜ
࡞Γ͍ͨϧʔϧͷ༷Λఆٛ • ߏԽͨ͠ϦϙδτϦ υΩϡϝϯτެ։͕લఏ • ͭ·Γɺ༷Λఆٛ͢Δ ͜ͱ͕υΩϡϝϯτʹ ͳΔ • 1
rule ɺ1 md
࡞Γ͍ͨϧʔϧͷ༷Λఆٛ • ϧʔϧυΩϡϝϯ τͷॻ͖ํɺҎ ԼΛࢀߟ • ESLint ຊମ • mysticatea͞Μ
͕ެ։͢Δϓϥ άΠϯ • eslint-plugin-vue
ϑΣʔζ3 ESLint ϓϥάΠϯͷ࣮
ϑΣʔζ3 • ҎԼΛΓͳ͕ΒϓϥάΠϯΛ࣮ͨ͠ • eslint-plugin-vue ͷίʔυಡΉ • vue-eslint-parser Λཧղ͢Δ •
ESLint ެࣜυΩϡϝϯτΛ࠶ಡ͢Δ • ESLint ຊମͷίʔυಡΉ • ͔Βͳ͍͜ͱΛESLintதͷਓʹฉ͘
eslint-plugin-vueͷίʔυಡΉ • Vue I18n ͚ͷ ESLintϓϥάΠϯ ୯ҰϑΝΠϧίϯ ϙʔωϯτ(ҎԼ SFC)Λ੩తղੳ͢ Δඞཁ͋Δ
• طʹ͋ΔͷΛࢀߟ ʹͨ͠ํ͕ޮ͍͍ https://github.com/vuejs/eslint-plugin-vue
vue-eslint-parserΛཧղ͢Δ • SFC Λ੩తղੳ ͢ΔͨΊͷϧʔ ϧΛ࣮͢Δʹ ɺύʔαͷ ͍ํు͖ग़͢ ASTΛཧղ͢Δ ඞཁ͕͋Δ
https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md
ESLint ެࣜυΩϡϝϯτΛ࠶ಡ͢Δ • ϓϥάΠϯͷ࣮ ΛਐΊ͍ͯ͘ ͱ͍Ζ͍Ζͱٙ ͕ग़ͯ͘Δ • ఏڙAPIͲΜͳͷ ͋Δ͔
https://eslint.org/docs/developer-guide/nodejs-api
ESLint ຊମͷίʔυΛಡΉ • ESLint ͷಈ࡞͕Γͨ ͘ͳͬͨΓ • ESLint ຊମͷίʔυΛ ಡΜͩΓͨ͠
• Processor ͷHookͷ ݺͼग़͠λΠϛϯά • ESLint Configuration ͷಡΈࠐΈλΠϛϯά • … ͳͲ https://twitter.com/kazu_pon/status/1103998606514696192
͔Βͳ͍͜ͱΛESLintதͷਓʹฉ͘ • υΩϡϝϯτɺίʔυͰ͔Βͳ͍͜ͱ mysticatea ͞Μʹฉ͍ͨ https://github.com/eslint/eslint-jp/issues/11
͔Βͳ͍͜ͱΛESLintதͷਓʹฉ͘ • Twitter Ͱฉ͍ͨΓ https://twitter.com/kazu_pon/status/1105876085688823808
͔Βͳ͍͜ͱΛESLintதͷਓʹฉ͘ • Twitter ͰͭͿ ͍͍ͯΔͱ mysticatea ͞ Μ͔Βίϝϯ τ͕Β͑ͨ https://twitter.com/kazu_pon/status/1104738201678172161
Ҏ্ͷϑΣʔζΛܦͯ 3݄͝Ζʹ ॳظόʔδϣϯ͕ग़དྷ্͕Γ 4݄10ʹϦϦʔεͨ͠
ϓϥάΠϯ࣮Ͱ ϋϚͬͨɺେมͩͬͨࣄ
ϋϚͬͨࣄ
Vue 2.6 ରԠʹ͏ഁյతมߋ • vue-eslint-parser ͕ ు͖ग़͢ AST ߏ ͕มΘͬͯͨ…
https://twitter.com/kazu_pon/status/1102991567944540160
AST ͷରԠ • Visitor ଆͰ eslint-plugin-vue ͱಉ͡Α͏ ͳରॲͨ͠
େมͩͬͨࣄ
ΉΧελϜύʔα͕ͳ͍ • eslint-plugin-json ͱ͍͏ͷ͕͋Δͷ͕ɺ ͜Ε͡Όͳ͍ײ • ·ͣϦϦʔε͔ͨͬͨ͠ͷͰɺESLint ͷ Preprocessor ͱJSON
Lint Λͬͯ Darty Hack ͳํ๏ͰରԠͨ͠
• JSONΛJavaScriptίϝϯτͱͯ͠ຒΊࠐ Ή… Preprocessor ͰͷରԠ
• Visitor ଆͰड͚औͬͨ JSON Λ JSON Lint ͔ͯ͠ Βɺͦͷ݁ՌΛ ESLint
ଆʹϚοϐϯά… JSON Lint ͰͷରԠ
ϓϥάΠϯͷࠓޙ
ࠓޙͷରԠ GitHub issues https://github.com/kazupon/eslint-plugin-vue-i18n/issues
• ESLint ͚ʹΧελϜύʔαʔΛ࣮͢Δඞཁ͕ ͋Δ (Dirty Hack ͨ͠෦Կͱ͔͍ͨ͠) Big Issue: support
`eslint —fix` https://twitter.com/kazu_pon/status/1110569748071243781
ฐࣾϓϩδΣΫτͰ ඞཁʹͳ͖͍ͬͯͯΔͷͰ OSS ࠓޙ͍͖ͬͯ
Ϋϩʔδϯά
·ͱΊ • Vue I18n ͷ Locale Messages ͷ՝ղܾ͢Δ ͨΊʹ ESLint
ϓϥάΠϯΛ࡞Γ࢝Ίͨ • ֤छ ESLintυΩϡϝϯτɺطʹੈʹ͋Δ ESLint ϓϥάΠϯΛࢀߟʹͭͭ͠ɺͦͯ͠ ESLint தͷਓʹฉ͘͜ͱͰظؒͰ࣮Ͱ͖ ͨ
ײ • ESLint ϓϥάΠϯͱ͍͏ͱɺAST Λۦͨ͠ݴޠॲ ཧܥͷͨΊɺ࣮ྔ͕ͳ͘ɺ໘͍͘͞ͱ͍͏ Πϝʔδ͕͋Δ • ࣮ࡍʹɺAST ʹରͯ͠
Visitor ؔΛ࣮ͯ͠ΰχϣ ΰχϣ͢Δ͚ͩͰॲཧͰ͖ΔͷͰͦΜͳʹ͘͠ͳ ͍͜ͱ͕͔ͬͨ • ͦͯ͠ɺԿͱ͍ͬͯ AST ۦ͢Δͷָ͘͠ײͨ͡
AST ۦ͢Δͱ৭ʑͰ͖Δ • i18n αϙʔτπʔϧ • a11y νΣοΫπʔϧ • ηΩϡϦςΟݕূπʔϧ
… ͳͲ
ESLint Ͱ AST ΰχϣΰχϣ͢Δͷ ָ͍͠Ͱ͢Αʂ
Έͳ͞Μ ES Lint Ͱ ָ͘͠Γ·͠ΐ͏ʂ
AST ೖͷͨΊͷࢀߟϦιʔε • Visitor ύλʔϯ ʮJavaݴޠͰֶͿσβΠϯύλʔϯೖʯ ݁ ߒ (ஶ) •
JavaScript ASTΛ࢝ΊΔ࠷ॳͷҰา https://efcl.info/2016/03/06/ast-first-step/ • ΧδϡΞϧJavaScript AST http://azu.github.io/slide/JSojisan/ • ؆୯ʂศརʂJavaScript ASTೖ https://rabbit-house.tokyo/ast-book-sample-10-16-rev3.pdf • AST Explorer https://astexplorer.net/
࠷ޙʹ
ESLint தͷਓ mysticatea͞Μʹ େมײँ https://twitter.com/mysticatea
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ