Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Masashi Hirano

December 29, 2019
Tweet

More Decks by Masashi Hirano

Other Decks in Programming

Transcript

  1. Prettier Plugins
    ϑϩϯτΤϯυ ೥ӽ͠ LT๨೥ձ 2019 #frontkansai
    Masashi Hirano(@shisama)

    View full-size slide

  2. ฏ໺ ণ࢜ / Masashi Hirano
    @shisama_
    Node.js Core Collaborator
    ؔ੢NodeֶԂ & W3K Organizer

    View full-size slide

  3. https://prettier.io/

    View full-size slide

  4. Prettier
    • ίʔυϑΥʔϚολʔ
    • JavaScriptɺTypeScriptɺJSONɺCSSɺLessɺMarkdownͳͲ
    Λඪ४Ͱαϙʔτ͍ͯ͠Δ
    • ઃఆϑΝΠϧͰϑΥʔϚοτϧʔϧΛఆٛͰ͖Δ

    View full-size slide

  5. https://prettier.io/docs/en/plugins.html

    View full-size slide

  6. Prettier Plugins
    • PluginΛࣗ෼Ͱ࡞࣮ͬͯߦ͢Δ͜ͱ͕Ͱ͖Δ
    • ·ͩbetaͳػೳ
    • ඪ४Ͱαϙʔτ͞Ε͍ͯͳ͍ݴޠͰ΋PrettierΛ࣮ߦ͢Δ͜ͱ͕
    Ͱ͖Δ

    View full-size slide

  7. https://prettier.io/docs/en/plugins.html

    View full-size slide

  8. https://prettier.io/docs/en/plugins.html

    View full-size slide

  9. JavaScript/TypeScript༻ͷPlugin΋͋Δ
    https://github.com/ggascoigne/prettier-plugin-import-sort

    View full-size slide

  10. How to use
    npm install prettier prettier-plugin-java
    Javaͷ৔߹
    yarn add prettier prettier-plugin-java

    View full-size slide

  11. How to use
    prettier —-write Main.java —-plugin=./node_modules/prettier-plugin-java
    Javaͷ৔߹
    QMVHJOΛࢦఆ͢Δ
    ࣗલͰ࡞ͬͨQMVHJOͷஔ͖৔͸೚ҙ

    View full-size slide

  12. How to use
    prettier —-write Main.java —-plugin-search-dir=./my-prettier-plugins
    Javaͷ৔߹
    σΟϨΫτϦ಺ͷQMVHJOͷ୳ࡧ΋Մೳ

    View full-size slide

  13. How to use
    package jp.com.test;
    public class Main {
    public static void main(String[] args) {
    System.out.println("Hello, world");
    }
    }
    Javaͷ৔߹
    Πϯσϯτ͕ἧ͍ͬͯͳ͔ͬͨΓɺ
    ແବͳۭനߦ͕͋Δ৔߹

    View full-size slide

  14. How to use
    package jp.com.test;
    public class Main {
    public static void main(String[] args) {
    System.out.println("Hello, world");
    }
    }
    Javaͷ৔߹
    1SFUUJFSʹΑΓϑΥʔϚοτ͞ΕΔ

    View full-size slide

  15. How to develop Prettier Plugin

    View full-size slide

  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

    View full-size slide

  17. How to develop Prettier Plugin
    • languages: Ͳͷ֦ுࢠΛର৅ʹ͢Δ͔ͳͲΛࢦఆ͢Δ
    • parsers: AST΁ͷύʔαʔΛ࣮૷͢Δ
    • printers: ग़ྗํ๏Λ࣮૷͢Δ

    View full-size slide

  18. languages (TOMLͷ৔߹)
    const languages = [
    {
    extensions: ['.toml'],
    name: 'TOML',
    parsers: ['toml-parse']
    }
    ]
    ֦ுࢠɺ໊લɺQBSTFST ޙड़
    ͷ໊લΛࢦఆ

    View full-size slide

  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Ͱ࢖͍·͢

    View full-size slide

  20. printers (TOMLͷ৔߹)
    const printers = {
    'toml-ast': {
    print: printToml
    }
    }
    QBSTFSTͷBTU'PSNBUͰࢦఆͨ͠UPNMBTUͷ
    QSJOUʹؔ਺Λࢦఆ͢Δ

    View full-size slide

  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͝ͱʹग़ྗ಺༰Λม͑Δ

    View full-size slide

  22. Prettier PluginͷνϡʔτϦΞϧ (TOML)
    https://medium.com/@fvictorio/how-to-write-a-plugin-for-prettier-a0d98c845e70

    View full-size slide

  23. ASTͱ͸
    • Abstract Syntax Tree(ந৅ߏจ໦)
    • ίʔυΛߏจղੳͯ݁͠ՌΛπϦʔͱͯ͠දݱ
    • ESLintɺBabelɺTypeScriptͳͲίʔυΛղੳɾม׵͢Δܥͷπʔϧ͸
    ASTΛ࢖͍ͬͯΔ
    • acornɺbabylonɺespreeɺesprimaͳͲJavaScript͚ͩͰ΋༷ʑͳAST
    ύʔαʔ͕͋Δ

    View full-size slide

  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ม׵

    View full-size slide

  25. "type": "VariableDeclaration",
    "start": 0,
    "end": 12,
    "declarations": [
    // …
    "kind": "const"
    const a = 1;

    View full-size slide

  26. "id": {
    "type": "Identifier",
    "start": 6,
    "end": 7,
    "name": "a"
    }
    const a = 1;

    View full-size slide

  27. "init": {
    "type": "Literal",
    "start": 10,
    "end": 11,
    "value": 1,
    "raw": "1"
    }
    const a = 1;

    View full-size slide

  28. ΋ͬͱ஌Γ͍ͨਓ͸ astexplorer.net ΁

    View full-size slide

  29. ༷ʑͳparserΛࢼ͢͜ͱ͕Ͱ͖·͢

    View full-size slide

  30. • Babel PluginΛ࡞Γͳ͕ΒASTͱBabelΛֶͿ (@__sakito__)
    • JavaScriptͷϦϑΝΫλϦϯάπʔϧʮjscodeshiftʯͷ࢖͍ํ
    (@toshi__toma)
    • ESLintͷϧʔϧΛࣗ࡞͠Α͏ʂ(@pirosikick)
    PrettierҎ֎ͷASTΛ࢖ͬͨπʔϧʹ͍ͭͯࢀߟهࣄ

    View full-size slide

  31. ·ͱΊ
    • PluginΛ࢖͑͹ඪ४Ͱ͸αϙʔτ͍ͯ͠ͳ͍ϓϩάϥϛϯάݴ
    ޠͷPrettierΛ͔͚ΒΕΔΑ͏ʹͳΔ
    • Parser͸طଘͷnpmύοέʔδͷ࢖͏͜ͱ͕Ͱ͖Δ
    • ASTΛ࢖͑͹ίʔυͷม׵͕ՄೳʹͳΔ

    astexplorer.netͰASTͷม׵݁ՌΛ֬ೝՄೳ

    View full-size slide

  32. Thanks
    @shisama_
    shisama

    View full-size slide