ESLintプラグインでAST入門

Transcript

1. ESLintϓϥάΠϯͰASTೖ໳ ৽ ೔ग़ւ / @ooDEMi
2. - Profile - Atarashi Hidemi Frontend Engineer @oodemi
3. JavaScript AST
4. Babel Webpack ESLint
5. AST ?
6. Abstract Syntax Tree ந৅ߏจ໦
7. ! ?
9. ! ??
10. ASTͱ͸Կ͔
11. AST 4 ίʔυΛจ๏తʹղऍ͠໦ߏ଄Ͱදݱͨ͠΋ͷ 4 JavaScript AST͸JSONͰදݱ͞ΕΔ 4 ESTree ͕ίϛϡχςΟඪ४
12. JavaScript → AST AST Explorer
13. JavaScript var message = "Hello AST";
14. AST { "range": [ 0, 25 ], "type": "Program", "body": [ { "range": [ 0, 25 ], "type": "VariableDeclaration", "declarations": [ { "range": [ 4, 25 ], "type": "VariableDeclarator", "id": { "range": [ 4, 11 ], "type": "Identifier", "name": "message" }, "init": { "range": [ 14, 25 ], "type": "Literal", "value": "Hello AST", "raw": "\"Hello AST\"" } } ], "kind": "var" } ], "sourceType": "module" }
15. 1 lines → 44 lines
16. !
17. Ͱ΋େৎ෉ɺා͘ͳ͍
18. Կͱͳ͘෼͔Δ 4 Ұ෦ൈਮ "type": "VariableDeclarator" // ม਺એݴ "kind": "var" // "var"Ͱએݴ͞ΕͯΔ "name": "message" // ม਺໊͸"message" "range": [4, 11] // 4จࣈ໨~11จࣈ໨ "value": "Hello AST" // த਎͸"Hello AST"
19. AST͕Ͳ͏͍͏΋ͷ͔Կͱͳ ͘ཧղͰ͖ͨ !
20. Ͱ΋͜ΕΛԿʹ࢖͏ͷʁ
21. ESLint
22. ESLint 4 ASTΛݕূ͠ϧʔϧʹ౰ͯ͸·Δ΋ͷ͕͋Ε͹ ܯࠂΛग़͢ 4 ESLintͷϧʔϧ͸શͯϓϥάΠϯ 4 eslint/lib/rules 4 ࣗ࡞ϧʔϧ΋ϓϥάΠϯΛ࡞Ε͹ಈ͘ 4 Working with Plugins
23. no-var.js "use strict"; module.exports = { create: function(context) { return { // 1. VariableDeclarationͷnodeʹ౸ୡͨ͠Β࣮ߦ͞ΕΔ VariableDeclaration: function(node) { // 2. var͕࢖ΘΕ͍ͯͨΒΤϥʔϝοηʔδΛදࣔ͢Δ if (node.kind === "var") { context.report(node, "Unexpected var, use let or const instead."); } } }; } };
24. ਅࣅͯ͠࡞ͬͯΈΔ
25. no-nemui-comment.js 1. ίʔυ಺ʹίϝϯτͰ[຾͍]͕ଘࡏͨ͠Β 2. [✘ ;͚ͨ͟ίϝϯτ͸ॻ͔ͳ͍ͰԼ͍͞.] ͱ͍͏ΤϥʔΛग़͢ 4 NGίʔυ: //຾͍ let status = "Nemui";
26. JavaScript → AST //຾͍ var status = "Nemui";
27. { "range": [ 6, 27 ], "type": "Program", "body": [ { "range": [ 6, 27 ], "type": "VariableDeclaration", "declarations": [ { "range": [ 10, 26 ], "type": "VariableDeclarator", "id": { "range": [ 10, 16 ], "type": "Identifier", "name": "status" }, "init": { "range": [ 19, 26 ], "type": "Literal", "value": "Nemui", "raw": "\"Nemui\"" } } ], "kind": "var" } ], "sourceType": "module", "comments": [ { "type": "Line", "value": " ຾͍", "range": [ 0, 5 ] } ] }
28. "comments": [ ίϝϯτͰ... { "type": "Line", छྨ͸LineComment "value": "຾͍", த਎͕ʮ຾͍ʯ "range": [ 0, 5 ] } ]
29. no-nemui-comment.js 'use strict'; module.exports = { create: (context) => { return { // 1. LineCommentͷ࣌ʹ "LineComment": (node) => { // 2. த਎͕ʮ຾͍ʯͩͬͨΒ if (node.value === "຾͍") { context.report(node, "✘ ;͚ͨ͟ίϝϯτ͸ॻ͔ͳ͍ͰԼ͍͞."); } } }; } };
30. .eslintrc { "extends": "eslint:recommended", "rules": { "no-nemui-comment": 2 } }
31. ࣮ߦ 4 ESLint CLI $ eslint -c .eslintrc ./nemui.js --rulesdir ./rules
33. !
34. ৽͍͠ϧʔϧͷ࣮૷ 4 ৽͍͠ϧʔϧΛద༻͍ͨ͠ίʔυΛAST ExplorerͰݟͳ͕Β࣮૷͢Δͱ؆୯ʹϧʔϧ Λ࡞Δ͜ͱ͕ग़དྷΔ 4 ͍ͭͰʹASTͷษڧ΋ग़དྷΔ
35. ศརͳϧʔϧΛ୔ࢁ ࡞ͬͯΈ·͠ΐ͏ʂ
36. ͋Γ͕ͱ͏͍͟͝·ͨ͠ :) @ooDEMi