prettier-markdownでmarkdown内のコードを整える

markdown内のコードブロックにprettierを用いたコードフォーマットを実行するツール。これは欲しかったやつなので、試してみました。

インストール

prettier-markdownではなく、@dschau/prettier-markdownなので注意。prettier-markdownもUSAGEを見ると同じような機能だが、動かしてみると前者はscssのフォーマットがちゃんと動かなかった。また、--single-quoteなどのprettierにあるオプションももしかして指定できない感じ？であまり良くなさそう。

$ yarn add -D @dschau/prettier-markdown

実行

以下のようなコードブロックが汚いmarkdownファイルを用意する

$ cat README.md
## JS

```js
      function hoge(
        arg1,
    arg2) {
          return
        'hoge';
}
```

## SCSS

```scss
.hoge      { .fuga {
    .duga {
      text-align:
        center;
  } } }
```

CLIは、prettier-markdown 対象ファイル オプションの形式で実行する。対象ファイルはsrc/**/*.mdみたいな形式でもOK。オプションはprettierにダイレクトに渡されるっぽいので、--single-quoteなど、prettierにあるオプションはそのまま使える。--dryオプションだけが例外で、--dryオプションを使うと、どのファイルが更新されるかが表示されるが、実際にはファイルは更新されないお試しモード（dryrun）で実行できる。（prettierのWarningっぽいのが出力されるが、バグかしら？）

# dryrunで実行
$ yarn run prettier-markdown README.md --single-quote --dry
yarn run v1.1.0
warning package.json: No license field
$ "/Users/xxx/xxx/xxx/node_modules/.bin/prettier-markdown" "README.md" "--single-quote" "--dry"
Warning: `parser` with value "postcss" is deprecated. Use "css", "less" or "scss" instead.
Prettified 1 file
✔︎ Updated /README.md
✨  Done in 0.43s.

# 実行
$ yarn run prettier-markdown README.md --single-quote
yarn run v1.1.0
warning package.json: No license field
$ "/Users/xxx/xxx/xxx/node_modules/.bin/prettier-markdown" "README.md" "--single-quote"
Warning: `parser` with value "postcss" is deprecated. Use "css", "less" or "scss" instead.
Prettified 1 file
✔︎ Updated /README.md
✨  Done in 0.49s.

実行した結果を見てみる。

$ cat README.md

## JS

```js
function hoge(arg1, arg2) {
  return;
  ('hoge');
}
```

## SCSS

```scss
.hoge {
  .fuga {
    .duga {
      text-align: center;
    }
  }
}
```

きれいになっている〜。prettierがサポートしている言語ならばフォーマット可能。~~あとは、pre-commit、lint-stagedを使って、コミット時に自動フォーマットするようにすれば、漏れなくフォーマットされる。~~と、思ったが、prettier-markdown 対象ファイル　オプションの形式なので、--single-quoteなどオプションを指定する場合にlint-stagedが使えないかも（何か方法があったら教えてください）。

複数人で行う執筆活動等で最後に確認したら全員のコードフォーマットが違う、みたいなことがよくあるので、prettier-markdownを使って一気に統一するとよさそうですね。