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.7k
Vue I18n 向けに ESLint プラグインを作った
kazupon
May 22, 2019
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
3
490
Vapor Revolution
kazupon
3
3.5k
Vue.js最新動向
kazupon
3
1.5k
Vue 3.4
kazupon
13
4.7k
Vue & Vite Rustify
kazupon
4
2.3k
Vue.jsエコシステム動向2023
kazupon
17
7.8k
Reactivity Transform
kazupon
1
1.4k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.6k
Other Decks in Programming
See All in Programming
ニーリーにおけるプロダクトエンジニア
nealle
0
840
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
120
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
150
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
790
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Building an army of robots
kneath
306
45k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Producing Creativity
orderedlist
PRO
346
40k
How GitHub (no longer) Works
holman
314
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Building Applications with DynamoDB
mza
95
6.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
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ