Prettier Plugins

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本体がサポートしている言語に関しても機能拡張できます。

5cf7e9533a457726cd51232e06c1da9a?s=128

Masashi Hirano

December 29, 2019
Tweet

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