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
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
Search
Tyankatsu
January 31, 2019
Programming
5
660
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
Vue Night in Fukuoka
ベガコーポレーション チャンカツ(山本勝也)
Tyankatsu
January 31, 2019
Tweet
Share
More Decks by Tyankatsu
See All by Tyankatsu
OSSのあれこれ話すイベントやりたいと思った
tyankatsu
0
320
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
710
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
610
転職初っ端終了しました
tyankatsu
2
800
アニメーションは どうやってできているのか
tyankatsu
0
120
npmパッケージ製作に関するあれこれ
tyankatsu
1
960
commit message 絶対統一させるマン
tyankatsu
1
220
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.2k
Other Decks in Programming
See All in Programming
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.6k
Formの複雑さに立ち向かう
bmthd
1
940
sappoRo.R #12 初心者セッション
kosugitti
0
280
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
41
16k
Better Code Design in PHP
afilina
0
180
React 19アップデートのために必要なこと
uhyo
8
1.5k
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.7k
バッチを作らなきゃとなったときに考えること
irof
2
540
[JAWS DAYS 2025] 最近の DB の競合解決の仕組みが分かった気になってみた
maroon1st
0
140
読まないコードリーディング術
hisaju
0
110
ML.NETで始める機械学習
ymd65536
0
230
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Gamification - CAS2011
davidbonilla
80
5.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Documentation Writing (for coders)
carmenintech
68
4.6k
Facilitating Awesome Meetings
lara
53
6.2k
Building an army of robots
kneath
303
45k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Automating Front-end Workflow
addyosmani
1369
200k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
RailsConf 2023
tenderlove
29
1k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Transcript
Gridsome͚ͷ ESLintύοέʔδΛ࡞ͬͯ ެࣜʹΈࠐ·Εͨ
ࣗݾհ • νϟϯΧπ(@tyankatsu5) • ϕΨίʔϙϨʔγϣϯ • ϑϩϯτΤϯυΤϯδχΞ • GridsomeͷϑΝϯ •
eslint-plugin-gridsomeͷ ίϥϘϨʔλʔ • ӳޠษڧத • ӡӦɿFrontEnd-Fukuoka.spec, Ξχϝʔγϣϯݚڀ ձ
Ұ؏ͯ͠Δ͜ͱ
͋Ε͏ ͳ͚Ε࡞Δ
ࠓ͢͜ͱ • Gridsomeͷհ • ESLintͷϧʔϧ࡞ͷܾ·Γ͝ͱ • Pluginͱͯ͠npmͰެ։͢ΔྲྀΕ • ASTͱ͔parserͱ͔
ࠓ͞ͳ͍͜ͱ • Gridsome͚ͷESLintύοέʔδΛ࡞ͬͯެࣜʹ Έࠐ·Εͨ • eslint-config-xxxͷ࡞Γํ • scoped packageͷ࡞Γํ
Gridsomeͱ
None
Gridsomeͱʢͬ͘͟Γʣ • ReactͷGatsbyʹӨڹΛड͚ͨSSG(Static Site Generator) • LazyLoadΛࡌͨ͠g-imageɺϖʔδͷઌಡΈΛ͢ Δg-linkͳͲΛఏڙ • APImdϑΝΠϧ͔Βऔಘͨ͠σʔλΛมͯ͠ɺ
GraphQLͰΞΫηεՄೳʹ͢Δ • GraphQLcomponent͔ΒಠࣗϒϩοΫͰΞΫηε Մೳ
https://gridsome.org/docs/how-it-works
GraphQLcomponent͔Β ಠࣗϒϩοΫͰΞΫηεՄೳ
None
ݒ೦ • ಠࣗͷϒϩοΫ͔ͩΒPrettierΈ͍ͨͳformatter͕ͳ ͍ • ಠࣗͷϒϩοΫ͔ͩΒLinterΈ͍ͨͳRule͕ͳ͍
ͦͷޙͷྲྀΕ eslint-plugin-gridsomeΛ࡞ͬͨ - Tyankatsu Sketch Book https://tyankatsu.netlify.com/posts/create-eslint- plugin-gridsome
ESLintͷPluginΛ࡞Δ
ඞཁࣝ • parser • AST • ESLintͷPlugin࡞࣌ͷܾ·Γ͝ͱ • Test
ESLintͷparserΛΔ
ESLintͷparserΛΔ • parser = ߏจղੳث • EsprimaΛϑΥʔΫͨ͠Espreeͱ͍͏parserΛ༻ ͍ͯ͠Δ • SFC(.vue)ͷ߹vue-eslint-parserʢ෦Espree
ͱՁʣͱ͍͏parserΛ༻͢Δ • parserଞʹAcornɺ@babel/parser(چBabylon) ͱ͔
mysticatea/vue-eslint-parser
ASTΛΔ
ASTΛΔ • parseͨ݁͠ՌͰநߏจͷ͜ͱ • JSͷparserେମESTreeʹجͮ͘ASTΛग़ྗ͢Δ
const tyankatsu = ‘spinach’;
ESLintͷplugin࡞࣌ͷ جຊͷྲྀΕ https://eslint.org/docs/developer-guide/ working-with-plugins
ESLintͷplugin࡞࣌ͷ جຊͷྲྀΕ • RuleఆٛϑΝΠϧΛ࡞Δ • TestΛॻ͘ • ҰͭͷJSϑΝΠϧʹRuleΛ·ͱΊͯExport • package.jsonͷmainϑΟʔϧυʹͦͷJSͷύεΛॻ
͘ • npmͰύοέʔδެ։
RuleఆٛϑΝΠϧΛ࡞Δ https://eslint.org/docs/developer-guide/working-with- rules
RuleఆٛϑΝΠϧΛ࡞Δ • ObjectΛExport͢Δ • େ͖͘metaϓϩύςΟͱcreateϝιουʹ͔ΕΔ
meta • metaϓϩύςΟࣗମΦϓγϣϯͳͷͰॻ͔ͳͯ͘ ಈ͘ • type,docs,fixable,schema,deprecated,replacedBy͕ ೖΔ • fixable͕ͳ͍ͱɺ--fix ͰfixͰ͖ͳ͍
create • ϧʔϧͷఆٛ • Ҿʹcontext͕ೖΔ • context͔Βੜ͍͑ͯΔϓϩύςΟͱϝιουΛ returnͯ͠࡞Δ • AST͔Βཉ͍͠nodeΛऔಘ͢Δศརͳϝιουͱ͔
ΛESLint͕ఏڙͯ͠Δ
None
TestΛॻ͘
TestΛॻ͘ • Mocha্Ͱeslint͕ఏڙͯ͠Δςελʔ(RuleTester) Λ༻ͯ͠ςετ࣮ߦ • validͰޭύλʔϯ,invalidͰࣦഊύλʔϯΛςετ • fixͤ͞Δ߹invalidͷதͷoutputʹਖ਼͍͠ίʔυ Λॻ͘
varΛconstͱletʹ͢ΔΑ͏ʹ ܯࠂ͢ΔRuleʢଈڵʣ
ҰͭͷJSϑΝΠϧʹ RuleΛ·ͱΊͯExport
ҰͭͷJSϑΝΠϧʹ RuleΛ·ͱΊͯExport • ObjectΛExport͢Δ • rulesϓϩύςΟͷΩʔʹϧʔϧ໊ɺʹϧʔϧΛ requireͨ͠ͷΛࢦఆ • େମ lib/index.js
package.jsonͷmainϑΟʔ ϧυʹͦͷJSͷύεΛॻ͘
package.jsonͷmainϑΟʔϧυ ʹͦͷJSͷύεΛॻ͖·͢
npmͰύοέʔδެ։
npmͰύοέʔδެ։ • ύοέʔδ໊ eslint-plugin-xxxxਪ (eslintrcͰύοέʔδͷࢦఆָ͕ʹͳΔ)
eslint-plugin-gridsome Λ࡞ͬͯΈͯ
eslint-plugin-gridsome Λ࡞ͬͯΈͯ • ެࣜυΩϡϝϯτͰΘ͔Βͳ͍߹eslint-jpͰ࣭ ͢ΔखஈΛߟྀ • AST explorerΛݟͳ͕Β࡞ۀ • npm
publishCIʹͤΔͱָ • ϩʔΧϧͳΒnpָ͕ • ϧʔϧͷdocsΛӳޠͰॻ͘ͷ͠ΜͲ͍
None
eslint-plugin-gridsome ͷࠓޙ
eslint-plugin-gridsome ͷࠓޙ • ϧʔϧΛ࡞Δ্ͰศརʹͳΔUtilityΛ࡞Γ͍ͨ • ࣗಈԽग़དྷΔՕॴscript࡞͍͖͍ͬͯͨ • GridsomeͷఏڙίϯϙʔωϯτΛνΣοΫͰ͖Δ rule࡞Γ͍ͨ
·ͱΊ
·ͱΊ • ϧʔϧΛ૿͢͜ͱ؆୯ • ެ։؆୯ • ESLint͏ଆ͚ͩ͡Όͳͯ͘࡞ΔଆʹཱͬͯΈΑ ͏ʂʂʂ
͓ΘΓ