Prettier デバッグオプション

Prettier をデバッグするための CLI オプションを３つ紹介します。

次のような JavaScript のコードを test.js として保存している前提です。

test.js

// hi
const foo = "foo";

--debug-print-doc

フォーマット結果の代わりに、Doc を表示します。

./bin/prettier.js test.js --debug-print-doc
[
  "// hi",
  hardline,
  group([
    "const",
    " ",
    group([group("foo"), " =", group(indent([line, '"foo"']))]),
    indent([]),
    ";",
  ]),
  hardline,
]

--debug-print-comments

フォーマット結果の代わりに、コメントのメタデータを表示します。

./bin/prettier.js test.js --debug-print-comments
[
  {
    "type": "CommentLine",
    "value": " hi",
    "start": 0,
    "end": 5,
    "loc": {
      "start": { "line": 1, "column": 0 },
      "end": { "line": 1, "column": 5 }
    },
    "placement": "endOfLine",
    "leading": true,
    "trailing": false,
    "nodeDescription": "VariableDeclaration"
  }
]

debug-print-ast

フォーマット結果の代わりに、コードの AST を表示します。jq とかと組み合わせて使うと便利です。

./bin/prettier.js test.js --debug-print-ast
{"type":"File","start":0,"end":25,"loc":{"start":{"line":1,"column":0},"end":{"line":3,"column":0}},"range":[0,25],"errors":[],"program":{"type":"Program","start":0,"end":25,"loc":{"start":{"line":1,"column":0},"end":{"line":3,"column":0}},"range":[0,25],"sourceType":"module","interpreter":null,"body":[{"type":"VariableDeclaration","start":6,"end":24,"loc":{"start":{"line":2,"column":0},"end":{"line":2,"column":18}},"range":[6,24],"declarations":[{"type":"VariableDeclarator","start":12,"end":23,"loc":{"start":{"line":2,"column":6},"end":{"line":2,"column":17}},"range":[12,23],"id":{"type":"Identifier","start":12,"end":15,"loc":{"start":{"line":2,"column":6},"end":{"line":2,"column":9},"identifierName":"foo"},"range":[12,15],"name":"foo"},"init":{"type":"StringLiteral","start":18,"end":23,"loc":{"start":{"line":2,"column":12},"end":{"line":2,"column":17}},"range":[18,23],"extra":{"rawValue":"foo","raw":"\"foo\""},"value":"foo"}}],"kind":"const","leadingComments":[{"type":"CommentLine","value":" hi","start":0,"end":5,"loc":{"start":{"line":1,"column":0},"end":{"line":1,"column":5}}}]}],"directives":[]},"comments":[{"type":"CommentLine","value":" hi","start":0,"end":5,"loc":{"start":{"line":1,"column":0},"end":{"line":1,"column":5}}}],"tokens":[{"type":"CommentLine","value":" hi","start":0,"end":5,"loc":{"start":{"line":1,"column":0},"end":{"line":1,"column":5}}},{"type":{"label":"const","keyword":"const","beforeExpr":false,"startsExpr":false,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null,"updateContext":null},"value":"const","start":6,"end":11,"loc":{"start":{"line":2,"column":0},"end":{"line":2,"column":5}}},{"type":{"label":"name","beforeExpr":false,"startsExpr":true,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null,"updateContext":null},"value":"foo","start":12,"end":15,"loc":{"start":{"line":2,"column":6},"end":{"line":2,"column":9}}},{"type":{"label":"=","beforeExpr":true,"startsExpr":false,"rightAssociative":false,"isLoop":false,"isAssign":true,"prefix":false,"postfix":false,"binop":null,"updateContext":null},"value":"=","start":16,"end":17,"loc":{"start":{"line":2,"column":10},"end":{"line":2,"column":11}}},{"type":{"label":"string","beforeExpr":false,"startsExpr":true,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null,"updateContext":null},"value":"foo","start":18,"end":23,"loc":{"start":{"line":2,"column":12},"end":{"line":2,"column":17}}},{"type":{"label":";","beforeExpr":true,"startsExpr":false,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null,"updateContext":null},"start":23,"end":24,"loc":{"start":{"line":2,"column":17},"end":{"line":2,"column":18}}},{"type":{"label":"eof","beforeExpr":false,"startsExpr":false,"rightAssociative":false,"isLoop":false,"isAssign":false,"prefix":false,"postfix":false,"binop":null,"updateContext":null},"start":25,"end":25,"loc":{"start":{"line":3,"column":0},"end":{"line":3,"column":0}}}]}