Vue I18n 向けに ESLint プラグインを作った

Transcript

1. Vue I18n ޲͚ʹ
 ESLint ϓϥάΠϯΛ࡞ͬͨ Ginza.js #1 at PLAID, inc. 2019.05.22 @kazupon
2. ࣗݾ঺հ

3. PLAID, inc.
 Vue.js Core Team Member Vue.js Japan User Group Organizer Vue I18n Author WebAssembly Love ❤ @kazu_pon kazupon kazupon
4. ۙگ: PLAID ʹೖࣾ͠·ͨ͠ʂ https://twitter.com/kazu_pon/status/1125583679923744768
5. i18n νʔϜͰ KARTE ։ൃ͍ͯ͠·͢ʂ
6. We are hiring !! •͍ͬ͠ΐʹ KARTE ࡞Γ͍ͨਓ ืूதͰ͢ʂ https://plaid.co.jp/recruit.html
7. ΠϯτϩμΫγϣϯ
8. 2019೥4݄10೔
9. https://twitter.com/kazu_pon/status/1116029099485483009
10. ϑΝʔετόʔδϣϯ ϦϦʔεʂ eslint-plugin-vue-i18n
11. ϦϦʔε 1ϲ݄ͪΐͬͱલ·Ͱ͸…
12. ࣮͸ ESLint ϓϥάΠϯ શ͘࡞ͬͨ͜ͱ͕ͳ͍ʂ
13. ͱ͍͏Θ͚Ͱ
14. ࠓ೔࿩͢͜ͱ • ͳͥϓϥάΠϯΛ࡞ͬͨͷ͔ʁ • Vue I18n ޲͚ʹ࡞ͬͨϧʔϧ • ϓϥάΠϯ࣮૷ͷ࿩ • ϓϥάΠϯ࣮૷ͰϋϚͬͨɺେมͩͬͨࣄ • ϓϥάΠϯͷࠓޙ
15. ͳͥ ϓϥάΠϯΛ࡞ͬͨͷ͔ʁ
16. ຊ୊ʹೖΔલʹ ͪΐͬͱ…
17. i18n ʹ͍ͭͯ
18. i18n ͬͯʁ • internationalization (ΠϯλʔφγϣφϥΠθʔ γϣϯ) ͷུশ (ψϝϩχ΢Ϝ) • ಛఆͷݴޠɺ஍Ҭͦͯ͠จԽʹґଘ͠ͳ͍ ϑΥʔϚοτͰϓϩμΫτΛ൚༻Խ͢Δ͜ͱ i nternationalizatio n 18 จࣈ i18n
19. i18n ͱ l10n ͷؔ܎ • l10n: localization (ϩʔΧϥΠθʔγϣ ϯ:஍ҬԽ)ͷུশ i18n + l10n = g11n (globalization) 11 จࣈ ج൫ ೔ຊޠ ӳޠ தࠃޠ l10n i18n g11n
20. i18n ରԠ߲໨಺༰ • ςΩετϝοηʔδ • ೔࣌ϑΥʔϚοτ • ਺஋ϑΥʔϚοτ • ը૾ɺಈը • จࣈίʔυɺֆจࣈ • ి࿩൪߸ • ॅॴɺ໊લ • ܾࡁॲཧɺ੫ۚ • σʔλϕʔε • UI ϨΠΞ΢τ… ͳͲ
21. ͳΜ͔ ͍ͬͺ͍͋Γ·͢Ͷ…
22. ΋ͬͱৄ͘͠஌Γ͚ͨΕ͹ • άϩʔόϧͳιϑτ΢Σ Ξ։ൃͷઃܭͱϓϩηε • ϩʔΧϥΠθʔγϣϯͷ ϓϩηε • ͜ΕΒʹ͍ͭͯ͸
 ॻ੶ݟͯͶʂ https://book.impress.co.jp/books/1117101057
23. ࿩͸൓Ε·͕ͨ͠ ଓ͍ͯ
24. Vue I18n
25. Vue.js ޲͚ͷ i18n ϓϥάΠϯ • ςΩετϝοηʔδ • ೔࣌ϑΥʔϚοτ • ਺஋ϑΥʔϚοτ
26. ྫ: ςΩετϝοηʔδͷ i18n Vue ΞϓϦέʔγϣϯ Vue I18n API Locale Messages en.json ja.json … ͦͷଞͷݴޠ ಡΈࠐΉ ςϯϓϨʔτ ݴޠΛબ୒ ςΩετ͸ બ୒ͨ͠ݴޠͰදࣔ
27. Vue I18n օ͞Μʹ࢖ͬͯ ௖͍ͯ·͕͢…
28. ՝୊͸৭ʑ͋Δ
29. ৭ʑ͋Δ1ͭͷதͰ΋…
30. Locale Messages ͷ؅ཧ͕େม •Keysͱ Messages ؅ ཧ͕ਏ͍… https://studio-v-tokyo9.studio.design/i18n
31. STUDIOͷΈ΍͓͔͞Μ͸ࣗલͰղܾ͍ͯ͠Δ Google spread sheetsɺGASɺͦͯࣗ͠લLint πʔϧͰղܾ͍ͯ͠Δʂ
32. DX ͕ྑ͘ͳ͍… Կͱ͔͠ͳ͚Ε͹ʂ
33. ରԠ࢝͠Ί͕ͨ… • ࠷ॳ͸ɺvue- i18n-extract ͱ૊ Έ߹Θͤͯಠࣗ Lint ࡞͕ͬͯͨ… https://twitter.com/kazu_pon/status/1101414331487465472
34. Lint ج൫Λ εΫϥον͔Β࡞Δͷ͸ ͪΐͬͱਏ͍
35. ESLint ͕͋Δ͡Όͳ͍͔
36. ͦ͏ͩ ESLint ϓϥάΠϯΛ ॻ͜͏ʂ
37. ͱ͏͍Θ͚Ͱ ESLint ϓϥάΠϯΛ ࡞Γ͸͡Ίͨ https://twitter.com/kazu_pon/status/1102406805471129601
38. eslint-plugin-vue-i18n
39. Vue I18n ޲͚ʹ ࡞ͬͨϧʔϧ
40. ࡞ͬͨϧʔϧ͸શ෦Ͱ5ͭ • Recommended
 Vue I18n ࢖͏ʹ͋ͨͬͯ ඞཁʹͳΔϧʔϧܥ • Best Practices
 ಋೖ͢Δͱ͞Βʹ i18n ର Ԡ͕Α͘ͳΔϕετϧʔ ϧܥ https://kazupon.github.io/eslint-plugin-vue-i18n/
41. ϓϥάΠϯͷಋೖํ๏
42. ੈʹ͋Δ ESLint ϓϥάΠϯͱ΄΅ಉ͡ • Πϯετʔϧ
 • .eslintrc.* Λ ઃఆ͢Δ • rules • settings
43. ESLint ࣮ߦํ๏
44. eslint-plugin-vue ͱ΄΅ಉ͡ • −−ext Φϓγϣϯ
45. DEMO
46. ϓϥάΠϯ࣮૷ͷ࿩
47. ͲͷΑ͏ͳྲྀΕͰ࡞͍ͬͯͬͨͷ͔ • ϑΣʔζ1: • ESLint ϓϥάΠϯͷ࡞Γํجຊཧղ • ϑΣʔζ2: • ESLint ϓϥάΠϯϓϩδΣΫτͷ౔୆ߏங • ϑΣʔζ3: • ESLint ϓϥάΠϯͷ࣮૷
48. ϑΣʔζ1
 ESLint ϓϥάΠϯͷ࡞Γํ جຊཧղ
49. ϑΣʔζ1 • ESLint ެࣜυΩϡϝϯτΛಡΉ • ESLint தͷਓͷQiitaಡΉ • Hello WorldతͳϓϥάΠϯΛ࡞ͬͯΈΔ
50. ESLintެࣜυΩϡϝϯτΛಡΉ • ެࣜυΩϡϝϯτ͸ඞಡʂʂ • Developer guide Λͻͱ௨ΓಡΉ https://eslint.org/docs/developer-guide/
51. ESLintதͷਓͷQiitaಡΉ • mysticatea͞Μ ղઆͷΧελϜ ϧʔϧͷ࣮૷ʹ ͍ͭͯཧղ͢Δ • ESLintʹ͓͚Δ ୯ମςετ΋ཧ ղ͢Δ https://qiita.com/mysticatea/items/cc3f648e11368799e66c
52. ͜ΕΒΛಡΜͰ
53. AST ॲཧʹ͍ͭͯཧղͨ͠ • ESLint ͷΧελϜ ϧʔϧͷ࣮૷͸ɺ
 جຊతʹ͸ AST (Abstract Syntax Tree) ͷ Node λΠϓ ·ͨ͸ΫΤϦʹϚο ν͢ΔΑ͏ͳ Visitor ؔ਺Ͱ࣮૷͢Δ
54. Hello WorldతͳϓϥάΠϯΛ࡞ͬͯΈΔ • ࣮ࡍʹखΛಈ͔ͯ͠جຊతͳ࡞ΓํΛ ཧղ͍ͯ͠Δ͔Ͳ͏͔֬ೝʂ
55. ϑΣʔζ2
 ESLintϓϥάΠϯϓϩδΣΫτͷ ౔୆ߏங
56. ϑΣʔζ2 • ϦϙδτϦͷߏ଄Խ • εΫϦϓτʹΑΔࣗಈੜ੒ͷ੔උ • ࡞Γ͍ͨϧʔϧͷ࢓༷Λఆٛ
57. ϦϙδτϦΛߏ଄Խ • OSS ϓϩδΣΫτͳͷͰ ୭΋ཧղ͠΍͘͢ϝϯς φϒϧʹʂ • mysticatea͞Μ͕ఏڙ͢Δ ϦϙδτϦ΍eslint-plugin- vueΛࢀߟʹΠϯεύΠΞ
58. ϦϙδτϦΛ ߏ଄Խͨ݁͠Ռ
59. TDD ͷϦζϜΛੜΈग़͠΍͍͢ߏ଄ʹʂ tests docs lib ࢓༷ ఆٛ ςετ ࣮૷ https://twitter.com/kazu_pon/status/1107461420629671937
60. εΫϦϓτʹΑΔࣗಈੜ੒ͷ੔උ • ϧʔϧҰཡͷυΩϡϝϯτ ϧʔϧͷ meta.docs ͔Βੜ੒
61. εΫϦϓτʹΑΔࣗಈੜ੒ͷ੔උ • ESLint Configuration ϑΝΠϧͷੜ੒ ͜Ε΋ϧʔϧͷ meta.docs ͔Βੜ੒
62. ࡞Γ͍ͨϧʔϧͷ࢓༷Λఆٛ • ߏ଄Խͨ͠ϦϙδτϦ͸ υΩϡϝϯτެ։͕લఏ • ͭ·Γɺ࢓༷Λఆٛ͢Δ ͜ͱ͕υΩϡϝϯτʹ΋ ͳΔ • 1 rule ɺ1 md
63. ࡞Γ͍ͨϧʔϧͷ࢓༷Λఆٛ • ϧʔϧυΩϡϝϯ τͷॻ͖ํ͸ɺҎ ԼΛࢀߟ • ESLint ຊମ • mysticatea͞Μ ͕ެ։͢Δϓϥ άΠϯ • eslint-plugin-vue
64. ϑΣʔζ3
 ESLint ϓϥάΠϯͷ࣮૷
65. ϑΣʔζ3 • ҎԼΛ΍Γͳ͕ΒϓϥάΠϯΛ࣮૷ͨ͠ • eslint-plugin-vue ͷίʔυಡΉ • vue-eslint-parser Λཧղ͢Δ • ESLint ެࣜυΩϡϝϯτΛ࠶ಡ͢Δ • ESLint ຊମͷίʔυಡΉ • ෼͔Βͳ͍͜ͱΛESLintதͷਓʹฉ͘
66. eslint-plugin-vueͷίʔυಡΉ • Vue I18n ޲͚ͷ ESLintϓϥάΠϯ΋ ୯ҰϑΝΠϧίϯ ϙʔωϯτ(ҎԼ SFC)Λ੩తղੳ͢ Δඞཁ͋Δ • طʹ͋Δ΋ͷΛࢀߟ ʹͨ͠ํ͕ޮ཰͍͍ https://github.com/vuejs/eslint-plugin-vue
67. vue-eslint-parserΛཧղ͢Δ • SFC Λ੩తղੳ ͢ΔͨΊͷϧʔ ϧΛ࣮૷͢Δʹ ͸ɺύʔαͷ࢖ ͍ํ΍ు͖ग़͢ ASTΛཧղ͢Δ ඞཁ͕͋Δ https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md
68. ESLint ެࣜυΩϡϝϯτΛ࠶ಡ͢Δ • ϓϥάΠϯͷ࣮ ૷ΛਐΊ͍ͯ͘ ͱ͍Ζ͍Ζͱٙ ໰͕ग़ͯ͘Δ • ఏڙAPIͲΜͳͷ ͋Δ͔ https://eslint.org/docs/developer-guide/nodejs-api
69. ESLint ຊମͷίʔυΛಡΉ • ESLint ͷಈ࡞͕஌Γͨ ͘ͳͬͨΓ • ESLint ຊମͷίʔυΛ ಡΜͩΓͨ͠ • Processor ͷHookͷ ݺͼग़͠λΠϛϯά • ESLint Configuration ͷಡΈࠐΈλΠϛϯά • … ͳͲ https://twitter.com/kazu_pon/status/1103998606514696192
70. ෼͔Βͳ͍͜ͱΛESLintதͷਓʹฉ͘ • υΩϡϝϯτɺίʔυͰ෼͔Βͳ͍͜ͱ ͸ mysticatea ͞Μʹฉ͍ͨ https://github.com/eslint/eslint-jp/issues/11
71. ෼͔Βͳ͍͜ͱΛESLintதͷਓʹฉ͘ • Twitter Ͱ΋ฉ͍ͨΓ https://twitter.com/kazu_pon/status/1105876085688823808
72. ෼͔Βͳ͍͜ͱΛESLintதͷਓʹฉ͘ • Twitter ͰͭͿ ΍͍͍ͯΔͱ mysticatea ͞ Μ͔Βίϝϯ τ͕΋Β͑ͨ https://twitter.com/kazu_pon/status/1104738201678172161
73. Ҏ্ͷϑΣʔζΛܦͯ 3݄຤͝Ζʹ ॳظόʔδϣϯ͕ग़དྷ্͕Γ 4݄10೔ʹϦϦʔεͨ͠
74. ϓϥάΠϯ࣮૷Ͱ ϋϚͬͨɺେมͩͬͨࣄ
75. ϋϚͬͨࣄ
76. Vue 2.6 ରԠʹ൐͏ഁյతมߋ • vue-eslint-parser ͕ ు͖ग़͢ AST ߏ଄ ͕มΘͬͯͨ… https://twitter.com/kazu_pon/status/1102991567944540160
77. AST ͷରԠ • Visitor ଆͰ eslint-plugin-vue ͱಉ͡Α͏ ͳରॲͨ͠
78. େมͩͬͨࣄ
79. ๬ΉΧελϜύʔα͕ͳ͍ • eslint-plugin-json ͱ͍͏΋ͷ͕͋Δͷ͕ɺ ͜Ε͡Όͳ͍ײ • ·ͣ͸ϦϦʔε͔ͨͬͨ͠ͷͰɺESLint ͷ Preprocessor ͱJSON Lint Λ࢖ͬͯ Darty Hack ͳํ๏ͰରԠͨ͠
80. • JSONΛJavaScriptίϝϯτͱͯ͠ຒΊࠐ Ή… Preprocessor ͰͷରԠ
81. • Visitor ଆͰड͚औͬͨ JSON Λ JSON Lint ͔ͯ͠ Βɺͦͷ݁ՌΛ ESLint ଆʹϚοϐϯά… JSON Lint ͰͷରԠ
82. ϓϥάΠϯͷࠓޙ
83. ࠓޙͷରԠ GitHub issues https://github.com/kazupon/eslint-plugin-vue-i18n/issues
84. • ESLint ޲͚ʹΧελϜύʔαʔΛ࣮૷͢Δඞཁ͕ ͋Δ (Dirty Hack ͨ͠෦෼΋Կͱ͔͍ͨ͠) Big Issue: support `eslint —fix` https://twitter.com/kazu_pon/status/1110569748071243781
85. ฐࣾϓϩδΣΫτͰ ඞཁʹͳ͖͍ͬͯͯΔͷͰ OSS ΋ࠓޙ΍͍͖ͬͯ
86. Ϋϩʔδϯά
87. ·ͱΊ • Vue I18n ͷ Locale Messages ͷ՝୊ղܾ͢Δ ͨΊʹ ESLint ϓϥάΠϯΛ࡞Γ࢝Ίͨ • ֤छ ESLintυΩϡϝϯτɺطʹੈʹ͋Δ ESLint ϓϥάΠϯΛࢀߟʹͭͭ͠ɺͦͯ͠ ESLint தͷਓʹฉ͘͜ͱͰ୹ظؒͰ࣮૷Ͱ͖ ͨ
88. ײ૝ • ESLint ϓϥάΠϯͱ͍͏ͱɺAST Λۦ࢖ͨ͠ݴޠॲ ཧܥͷͨΊɺ࣮૷ྔ͕൒୺ͳ͘ɺ໘౗͍͘͞ͱ͍͏ Πϝʔδ͕͋Δ • ࣮ࡍʹɺAST ʹରͯ͠ Visitor ؔ਺Λ࣮૷ͯ͠ΰχϣ ΰχϣ͢Δ͚ͩͰॲཧͰ͖ΔͷͰͦΜͳʹ೉͘͠ͳ ͍͜ͱ͕෼͔ͬͨ • ͦͯ͠ɺԿͱ͍ͬͯ΋ AST ۦ࢖͢Δͷָ͘͠ײͨ͡
89. AST ۦ࢖͢Δͱ৭ʑͰ͖Δ • i18n αϙʔτπʔϧ • a11y νΣοΫπʔϧ • ηΩϡϦςΟݕূπʔϧ … ͳͲ
90. ESLint Ͱ AST ΰχϣΰχϣ͢Δͷ͸ ָ͍͠Ͱ͢Αʂ
91. Έͳ͞Μ ES Lint Ͱ ָ͘͠΍Γ·͠ΐ͏ʂ
92. 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/
93. ࠷ޙʹ
94. ESLint தͷਓ mysticatea͞Μʹ େมײँ https://twitter.com/mysticatea
95. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ