Prettier Plugins

フロントエンド 年越し LT忘年会 2019でPrettier PluginsについてLTをしました。
イベントページ( https://kfug.connpass.com/event/153648/ )

Prettier Pluginsを使って何ができるか、ASTについて話しました。

Prettier PluginsによりJavaやRuby、PHP、Kotlin、Elmなどの言語へのPrettierの実行が可能になります。また、JavaScript / TypeScriptなどPrettier本体がサポートしている言語に関しても機能拡張できます。

Transcript

1. Prettier Plugins ϑϩϯτΤϯυ ೥ӽ͠ LT๨೥ձ 2019 #frontkansai Masashi Hirano(@shisama)
2. ฏ໺ ণ࢜ / Masashi Hirano @shisama_ Node.js Core Collaborator ؔ੢NodeֶԂ & W3K Organizer
3. https://prettier.io/
4. Prettier • ίʔυϑΥʔϚολʔ • JavaScriptɺTypeScriptɺJSONɺCSSɺLessɺMarkdownͳͲ Λඪ४Ͱαϙʔτ͍ͯ͠Δ • ઃఆϑΝΠϧͰϑΥʔϚοτϧʔϧΛఆٛͰ͖Δ
5. https://prettier.io/docs/en/plugins.html
6. Prettier Plugins • PluginΛࣗ෼Ͱ࡞࣮ͬͯߦ͢Δ͜ͱ͕Ͱ͖Δ • ·ͩbetaͳػೳ • ඪ४Ͱαϙʔτ͞Ε͍ͯͳ͍ݴޠͰ΋PrettierΛ࣮ߦ͢Δ͜ͱ͕ Ͱ͖Δ
7. https://prettier.io/docs/en/plugins.html
8. https://prettier.io/docs/en/plugins.html
9. JavaScript/TypeScript༻ͷPlugin΋͋Δ https://github.com/ggascoigne/prettier-plugin-import-sort
10. How to use npm install prettier prettier-plugin-java Javaͷ৔߹ yarn add prettier prettier-plugin-java
11. How to use prettier —-write Main.java —-plugin=./node_modules/prettier-plugin-java Javaͷ৔߹ QMVHJOΛࢦఆ͢Δ
    ࣗલͰ࡞ͬͨQMVHJOͷஔ͖৔͸೚ҙ
12. How to use prettier —-write Main.java —-plugin-search-dir=./my-prettier-plugins Javaͷ৔߹ σΟϨΫτϦ಺ͷQMVHJOͷ୳ࡧ΋Մೳ
13. How to use package jp.com.test; public class Main { public static void main(String[] args) { System.out.println("Hello, world"); } } Javaͷ৔߹ Πϯσϯτ͕ἧ͍ͬͯͳ͔ͬͨΓɺ
    ແବͳۭനߦ͕͋Δ৔߹
14. How to use package jp.com.test; public class Main { public static void main(String[] args) { System.out.println("Hello, world"); } } Javaͷ৔߹ 1SFUUJFSʹΑΓϑΥʔϚοτ͞ΕΔ
15. How to develop Prettier Plugin
16. How to develop Prettier Plugin • languagesɺparsersɺprintersɺoptionsɺdefaultOptionsΛ༻ҙ͠ ͯnamed export͢Δ • ࠷௿ݶˢͷ੺ࣈ͸ඞཁ • ίʔυ͔ΒASTʹม׵͢ΔParser͸npm͔ΒΠϯετʔϧͯ͠࢖͏͜ ͱ͕Մೳ
 e.g. toml_nodeɺjava-parserɺpug-lexerɺ…etc
17. How to develop Prettier Plugin • languages: Ͳͷ֦ுࢠΛର৅ʹ͢Δ͔ͳͲΛࢦఆ͢Δ • parsers: AST΁ͷύʔαʔΛ࣮૷͢Δ • printers: ग़ྗํ๏Λ࣮૷͢Δ
18. languages (TOMLͷ৔߹) const languages = [ { extensions: ['.toml'], name: 'TOML', parsers: ['toml-parse'] } ] ֦ுࢠɺ໊લɺQBSTFST ޙड़ ͷ໊લΛࢦఆ
19. parsers (TOMLͷ৔߹) const parser = require('toml/lib/parser') const parsers = { 'toml-parse': { parse: text => parser.parse(text), astFormat: 'toml-ast' } } UPNM@OPEFͷQBSTFSΛ࢖ͬͯ"45ʹม׵͢Δ
    BTU'PSNBU͸ޙड़ͷQSJOUFSTͰ࢖͍·͢
20. printers (TOMLͷ৔߹) const printers = { 'toml-ast': { print: printToml } } QBSTFSTͷBTU'PSNBUͰࢦఆͨ͠UPNMBTUͷ QSJOUʹؔ਺Λࢦఆ͢Δ
21. printers༻ͷؔ਺ (TOMLͷ৔߹) function printToml(path, options, print) { const node = path.getValue() if (Array.isArray(node)) { return concat(path.map(print)) } switch (node.type) { case 'Assign': return concat([node.key, ' = ', path.call(print, 'value'), hardline]) case 'String': // return concat(['"', node.value, '"']) return `"${node.value}"` // ... default: return '' } } "45Λ࢖ͬͯίʔυ΁ͷग़ྗ಺༰Λ࣮૷͢Δɻ
    ม਺એݴͳͷ͔จࣈྻͳͷ͔ͳͲ͕UZQFͰ൑ఆՄ ೳɺUZQF͝ͱʹग़ྗ಺༰Λม͑Δ
22. Prettier PluginͷνϡʔτϦΞϧ (TOML) https://medium.com/@fvictorio/how-to-write-a-plugin-for-prettier-a0d98c845e70
23. ASTͱ͸ • Abstract Syntax Tree(ந৅ߏจ໦) • ίʔυΛߏจղੳͯ݁͠ՌΛπϦʔͱͯ͠දݱ • ESLintɺBabelɺTypeScriptͳͲίʔυΛղੳɾม׵͢Δܥͷπʔϧ͸ ASTΛ࢖͍ͬͯΔ • acornɺbabylonɺespreeɺesprimaͳͲJavaScript͚ͩͰ΋༷ʑͳAST ύʔαʔ͕͋Δ
24. const a = 1; { "type": "Program", "start": 0, "end": 12, "body": [ { "type": "VariableDeclaration", "start": 0, "end": 12, "declarations": [ { "type": "VariableDeclarator", "start": 6, "end": 11, "id": { "type": "Identifier", "start": 6, "end": 7, "name": "a" }, "init": { "type": "Literal", "start": 10, "end": 11, "value": 1, "raw": "1" } } ], "kind": "const" } ], "sourceType": "module" } ASTม׵
25. "type": "VariableDeclaration", "start": 0, "end": 12, "declarations": [ // … "kind": "const" const a = 1;
26. "id": { "type": "Identifier", "start": 6, "end": 7, "name": "a" } const a = 1;
27. "init": { "type": "Literal", "start": 10, "end": 11, "value": 1, "raw": "1" } const a = 1;
28. ΋ͬͱ஌Γ͍ͨਓ͸ astexplorer.net ΁
29. ༷ʑͳparserΛࢼ͢͜ͱ͕Ͱ͖·͢
30. • Babel PluginΛ࡞Γͳ͕ΒASTͱBabelΛֶͿ (@__sakito__) • JavaScriptͷϦϑΝΫλϦϯάπʔϧʮjscodeshiftʯͷ࢖͍ํ (@toshi__toma) • ESLintͷϧʔϧΛࣗ࡞͠Α͏ʂ(@pirosikick) PrettierҎ֎ͷASTΛ࢖ͬͨπʔϧʹ͍ͭͯࢀߟهࣄ
31. ·ͱΊ • PluginΛ࢖͑͹ඪ४Ͱ͸αϙʔτ͍ͯ͠ͳ͍ϓϩάϥϛϯάݴ ޠͷPrettierΛ͔͚ΒΕΔΑ͏ʹͳΔ • Parser͸طଘͷnpmύοέʔδͷ࢖͏͜ͱ͕Ͱ͖Δ • ASTΛ࢖͑͹ίʔυͷม׵͕ՄೳʹͳΔ
 astexplorer.netͰASTͷม׵݁ՌΛ֬ೝՄೳ
32. Thanks @shisama_ shisama