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
630
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
Vue Night in Fukuoka
ベガコーポレーション チャンカツ(山本勝也)
Tyankatsu
January 31, 2019
Tweet
Share
More Decks by Tyankatsu
See All by Tyankatsu
OSSのあれこれ話すイベントやりたいと思った
tyankatsu
0
300
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
680
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
600
転職初っ端終了しました
tyankatsu
2
780
アニメーションは どうやってできているのか
tyankatsu
0
120
npmパッケージ製作に関するあれこれ
tyankatsu
1
940
commit message 絶対統一させるマン
tyankatsu
1
210
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.2k
Other Decks in Programming
See All in Programming
RubyLSPのマルチバイト文字対応
notfounds
0
120
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
最新TCAキャッチアップ
0si43
0
190
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
みんなでプロポーザルを書いてみた
yuriko1211
0
260
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.4k
受け取る人から提供する人になるということ
little_rubyist
0
230
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
130
Quine, Polyglot, 良いコード
qnighy
4
640
ヤプリ新卒SREの オンボーディング
masaki12
0
130
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
100
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
427
64k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Bash Introduction
62gerente
608
210k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
For a Future-Friendly Web
brad_frost
175
9.4k
Making Projects Easy
brettharned
115
5.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͏ଆ͚ͩ͡Όͳͯ͘࡞ΔଆʹཱͬͯΈΑ ͏ʂʂʂ
͓ΘΓ