Gridsome向けの ESLintパッケージを作って公式に組み込まれた話

by Tyankatsu

Slide 1

Slide 1 text

Gridsome޲͚ͷ ESLintύοέʔδΛ࡞ͬͯ ެࣜʹ૊Έࠐ·Εͨ࿩

Slide 2

Slide 2 text

ࣗݾ঺հ • νϟϯΧπ(@tyankatsu5) • ϕΨίʔϙϨʔγϣϯ • ϑϩϯτΤϯυΤϯδχΞ • GridsomeͷϑΝϯ • eslint-plugin-gridsomeͷ  ίϥϘϨʔλʔ • ӳޠษڧத • ӡӦɿFrontEnd-Fukuoka.spec, Ξχϝʔγϣϯݚڀ ձ

Slide 3

Slide 3 text

Ұ؏ͯ͠Δ͜ͱ

Slide 4

Slide 4 text

͋Ε͹࢖͏ ͳ͚Ε͹࡞Δ

Slide 5

Slide 5 text

ࠓ೔࿩͢͜ͱ • Gridsomeͷ঺հ • ESLintͷϧʔϧ࡞੒ͷܾ·Γ͝ͱ • Pluginͱͯ͠npmͰެ։͢ΔྲྀΕ • ASTͱ͔parserͱ͔

Slide 6

Slide 6 text

ࠓ೔࿩͞ͳ͍͜ͱ • Gridsome޲͚ͷESLintύοέʔδΛ࡞ͬͯެࣜʹ૊ Έࠐ·Εͨ࿩ • eslint-conﬁg-xxxͷ࡞Γํ • scoped packageͷ࡞Γํ

Slide 7

Slide 7 text

Gridsomeͱ͸

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Gridsomeͱ͸ʢͬ͘͟Γʣ • ReactͷGatsbyʹӨڹΛड͚ͨSSG(Static Site Generator) • LazyLoadΛ౥ࡌͨ͠g-imageɺϖʔδͷઌಡΈΛ͢ Δg-linkͳͲΛఏڙ • API΍mdϑΝΠϧ͔Βऔಘͨ͠σʔλΛม׵ͯ͠ɺ GraphQLͰΞΫηεՄೳʹ͢Δ • GraphQL͸component͔ΒಠࣗϒϩοΫͰΞΫηε Մೳ

Slide 10

Slide 10 text

https://gridsome.org/docs/how-it-works

Slide 11

Slide 11 text

GraphQL͸component͔Β ಠࣗϒϩοΫͰΞΫηεՄೳ

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

ݒ೦఺ • ಠࣗͷϒϩοΫ͔ͩΒPrettierΈ͍ͨͳformatter͕ͳ ͍ • ಠࣗͷϒϩοΫ͔ͩΒLinterΈ͍ͨͳRule͕ͳ͍

Slide 14

Slide 14 text

ͦͷޙͷྲྀΕ eslint-plugin-gridsomeΛ࡞ͬͨ - Tyankatsu Sketch Book https://tyankatsu.netlify.com/posts/create-eslint- plugin-gridsome

Slide 15

Slide 15 text

ESLintͷPluginΛ࡞Δ

Slide 16

Slide 16 text

ඞཁ஌ࣝ • parser • AST • ESLintͷPlugin࡞੒࣌ͷܾ·Γ͝ͱ • Test

Slide 17

Slide 17 text

ESLintͷparserΛ஌Δ

Slide 18

Slide 18 text

ESLintͷparserΛ஌Δ • parser = ߏจղੳث • EsprimaΛϑΥʔΫͨ͠Espreeͱ͍͏parserΛ࢖༻ ͍ͯ͠Δ • SFC(.vue)ͷ৔߹͸vue-eslint-parserʢ಺෦͸Espree ͱ౳Ձʣͱ͍͏parserΛ࢖༻͢Δ • parser͸ଞʹ΋Acornɺ@babel/parser(چBabylon) ͱ͔

Slide 19

Slide 19 text

mysticatea/vue-eslint-parser

Slide 20

Slide 20 text

ASTΛ஌Δ

Slide 21

Slide 21 text

ASTΛ஌Δ • parseͨ݁͠ՌͰந৅ߏจ໦ͷ͜ͱ • JSͷparser͸େମESTreeʹجͮ͘ASTΛग़ྗ͢Δ

Slide 22

Slide 22 text

const tyankatsu = ‘spinach’;

Slide 23

Slide 23 text

ESLintͷplugin࡞੒࣌ͷ جຊͷྲྀΕ https://eslint.org/docs/developer-guide/ working-with-plugins

Slide 24

Slide 24 text

ESLintͷplugin࡞੒࣌ͷ جຊͷྲྀΕ • RuleఆٛϑΝΠϧΛ࡞Δ • TestΛॻ͘ • ҰͭͷJSϑΝΠϧʹRuleΛ·ͱΊͯExport • package.jsonͷmainϑΟʔϧυʹͦͷJSͷύεΛॻ ͘ • npmͰύοέʔδެ։

Slide 25

Slide 25 text

RuleఆٛϑΝΠϧΛ࡞Δ https://eslint.org/docs/developer-guide/working-with- rules

Slide 26

Slide 26 text

RuleఆٛϑΝΠϧΛ࡞Δ • ObjectΛExport͢Δ • େ͖͘metaϓϩύςΟͱcreateϝιουʹ෼͔ΕΔ

Slide 27

Slide 27 text

meta • metaϓϩύςΟࣗମΦϓγϣϯͳͷͰॻ͔ͳͯ͘΋ ಈ͘ • type,docs,fixable,schema,deprecated,replacedBy͕ ೖΔ • fixable͕ͳ͍ͱɺ--fix ͰfixͰ͖ͳ͍

Slide 28

Slide 28 text

create • ϧʔϧͷఆٛ • Ҿ਺ʹcontext͕ೖΔ • context͔Βੜ͍͑ͯΔϓϩύςΟͱϝιουΛ returnͯ͠࡞Δ • AST͔Βཉ͍͠nodeΛऔಘ͢Δศརͳϝιουͱ͔ ΛESLint͕ఏڙͯ͠Δ

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

TestΛॻ͘

Slide 31

Slide 31 text

TestΛॻ͘ • Mocha্Ͱeslint͕ఏڙͯ͠Δςελʔ(RuleTester) Λ࢖༻ͯ͠ςετ࣮ߦ • validͰ੒ޭύλʔϯ,invalidͰࣦഊύλʔϯΛςετ • ﬁxͤ͞Δ৔߹͸invalidͷதͷoutputʹਖ਼͍͠ίʔυ Λॻ͘

Slide 32

Slide 32 text

varΛconstͱletʹ͢ΔΑ͏ʹ ܯࠂ͢ΔRuleʢଈڵʣ

Slide 33

Slide 33 text

ҰͭͷJSϑΝΠϧʹ RuleΛ·ͱΊͯExport

Slide 34

Slide 34 text

ҰͭͷJSϑΝΠϧʹ RuleΛ·ͱΊͯExport • ObjectΛExport͢Δ • rulesϓϩύςΟͷΩʔʹϧʔϧ໊ɺ஋ʹϧʔϧΛ requireͨ͠΋ͷΛࢦఆ • େମ lib/index.js

Slide 35

Slide 35 text

package.jsonͷmainϑΟʔ ϧυʹͦͷJSͷύεΛॻ͘

Slide 36

Slide 36 text

package.jsonͷmainϑΟʔϧυ ʹͦͷJSͷύεΛॻ͖·͢

Slide 37

Slide 37 text

npmͰύοέʔδެ։

Slide 38

Slide 38 text

npmͰύοέʔδެ։ • ύοέʔδ໊͸ eslint-plugin-xxxxਪ঑  (eslintrcͰύοέʔδͷࢦఆָ͕ʹͳΔ)

Slide 39

Slide 39 text

eslint-plugin-gridsome Λ࡞ͬͯΈͯ

Slide 40

Slide 40 text

eslint-plugin-gridsome Λ࡞ͬͯΈͯ • ެࣜυΩϡϝϯτͰΘ͔Βͳ͍৔߹͸eslint-jpͰ࣭໰ ͢ΔखஈΛߟྀ • AST explorerΛݟͳ͕Β࡞ۀ • npm publish͸CIʹ೚ͤΔͱָ • ϩʔΧϧͳΒnpָ͕ • ϧʔϧͷdocsΛӳޠͰॻ͘ͷ͠ΜͲ͍

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

eslint-plugin-gridsome ͷࠓޙ

Slide 43

Slide 43 text

eslint-plugin-gridsome ͷࠓޙ • ϧʔϧΛ࡞Δ্ͰศརʹͳΔUtilityΛ࡞Γ͍ͨ • ࣗಈԽग़དྷΔՕॴ͸script࡞͍͖͍ͬͯͨ • GridsomeͷఏڙίϯϙʔωϯτΛνΣοΫͰ͖Δ rule࡞Γ͍ͨ

Slide 44

Slide 44 text

·ͱΊ

Slide 45

Slide 45 text

·ͱΊ • ϧʔϧΛ૿΍͢͜ͱ͸؆୯ • ެ։΋؆୯ • ESLint࢖͏ଆ͚ͩ͡Όͳͯ͘࡞Δଆʹ΋ཱͬͯΈΑ ͏ʂʂʂ

Slide 46

Slide 46 text

͓ΘΓ