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

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

https://prettier.io/

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

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

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

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

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

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

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

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

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

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

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

How to develop Prettier Plugin

How to develop Prettier Plugin • languagesɺparsersɺprintersɺoptionsɺdefaultOptionsΛ༻ҙ͠ ͯnamed export͢Δ • ࠷௿ݶˢͷ੺ࣈ͸ඞཁ • ίʔυ͔ΒASTʹม׵͢ΔParser͸npm͔ΒΠϯετʔϧͯ͠࢖͏͜ ͱ͕Մೳ
 e.g. toml_nodeɺjava-parserɺpug-lexerɺ…etc

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Thanks @shisama_ shisama