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
Vue I18n 向けに ESLint プラグインを作った
Search
kazupon
May 22, 2019
Programming
1
1.4k
Vue I18n 向けに ESLint プラグインを作った
kazupon
May 22, 2019
Tweet
Share
More Decks by kazupon
See All by kazupon
Vue.js最新動向
kazupon
3
1.1k
Vue 3.4
kazupon
13
4.1k
Vue & Vite Rustify
kazupon
4
1.9k
Vue.jsエコシステム動向2023
kazupon
17
7k
Reactivity Transform
kazupon
1
1.1k
わたしのOSS活動
kazupon
1
940
Vue with Vite
kazupon
2
2.4k
State of Vue I18n
kazupon
3
510
まちにまった Vue.js 3
kazupon
14
5.4k
Other Decks in Programming
See All in Programming
FoodGram
iseruuuuu
0
230
JavaScript Closure
asoluka
0
1.9k
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
140
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
420
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
620
Sheets API使ってみた
toshi0383
2
180
Balkan Ruby 2024 — How and why to run SQLite on Rails in production
fractaledmind
0
110
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
2
460
Documentation testsの恩恵 / Documentation testing benefits
ssssota
1
540
Try creating your own orderedmap
kazamori
1
280
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
510
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
170
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
Facilitating Awesome Meetings
lara
43
5.6k
Designing for humans not robots
tammielis
247
25k
Designing for Performance
lara
601
67k
Producing Creativity
orderedlist
PRO
338
39k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
Being A Developer After 40
akosma
67
580k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
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
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ