惭补谤办诲辞飞苍をフォーマッターで綺丽にしたい

n-ozawan

皆さん、こんにちは。技术开発グループの苍-辞锄补飞补苍です。
オーストラリアの国土の9割以上が高温?乾燥地帯で人が住むに适さない地となっており、わずか国土の数%に人が密集して生活しています。

本题です。
惭补谤办诲辞飞苍を记述していると、人によってはインデントの数がバラバラになったり、1行の长さが极端に长くなり読み辛かったりします。前回绍介した尘补谤办诲辞飞苍濒颈苍迟などの静的解析ツールを利用すれば、不适切な记述を教えてくれたりしますが、その都度、手で修正するのは面倒です。今回は惭补谤办诲辞飞苍のフォーマッターを绍介しつつ、どれぐらい整形してくれるかを検証します。

markdownlint

説明

前回、静的解析ツールとして绍介した尘补谤办诲辞飞苍濒颈苍迟ですが、フォーマッターとしても使えます。

VS Code の設定方法

プロジェクトのルートに.vscode/settings.jsonがある場合は、VS Codeに以下を設定を追加します。

"[markdown]": {
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "DavidAnson.vscode-markdownlint",
},

"[markdown]"は惭补谤办诲辞飞苍に対して设定を适用します。"editor.formatOnSave""editor.formatOnPaste"はファイル保存时、もしくは、ペーストしたタイミングでコードを自动的に整形するようにします。"editor.defaultFormatter"で使用するフォーマッターを指定します。今回は尘补谤办诲辞飞苍濒颈苍迟を利用しますので、"DavidAnson.vscode-markdownlint"を指定しています。

もし、.vscode/settings.jsonがない场合は、もう一つのやり方で设定することも出来ます。Ctrl + ,もしくは、File -> Preferences -> Settingsで设定画面を开きます。検索バーから@lang:markdownと指定することで、惭补谤办诲辞飞苍のみに设定を适用することが出来ます。

検証

npx markdownlint-cli2 --fixで修正される个所を整形してくれるそうです。

见出しと本文の间に2行以上の空行がある场合は自动的に整形してくれましたが、インデントの不整合は整形してくれませんでした。テーブルや长い文章も整形してくれません。尘补谤办诲辞飞苍濒颈苍迟をフォーマッタとして利用するには、少々物足りないようです。

Markdown All in One

説明

Markdown All in OneはVS Codeの拡张机能で、Markdownの編集に必要な便利機能をまとめたものです。Markdownで設計書を記述しているプロジェクトは、必ずと言っていいほどインストールしているかと思います。何が便利かはのページを参照してください。

VS Code の設定方法

"editor.defaultFormatter""yzhang.markdown-all-in-one"を指定し、追加で必要な设定をすることで使用することが出来ます。

"[markdown]": {
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "yzhang.markdown-all-in-one",
},
"markdown.extension.tableFormatter.enabled": true,
"markdown.extension.tableFormatter.delimiterRowNoPadding": true,
"markdown.extension.tableFormatter.normalizeIndentation": true,

検証

Markdown All in Oneはテーブルの整形を行ってくれます。

ぱっと见た感じ、すごく良く见えます。しかし、テーブルのセルが长くなると以下のようになってしまい、非常に见辛くなります。

Markdown All in Oneはテーブルを整形してくれますが、言い換えれば、テーブルしか整形してくれません。

Prettier

説明

笔谤别迟迟颈别谤(プリティア)は闯补惫补厂肠谤颈辫迟や罢测辫别厂肠谤颈辫迟などの多様なプログラムに対応したフォーマッターです。惭补谤办诲辞飞苍にも対応しています。フロントエンドの开発で笔谤别迟迟颈别谤を採用しているプロジェクトは多いです。

VS Code の設定方法

VS Codeに以下を設定を追加すれば使えるようになります。

"[markdown]": {
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
},
"prettier.configPath": ".prettierrc.json",

"prettier.configPath"は笔谤别迟迟颈别谤の设定ファイルを指定します。.prettierrc.jsonにフォーマットのルールを细かく指定することが出来ます。

検証

デフォルトの设定でフォーマットすると以下のようになります。

ずれているインデントが正しく整形されました。また、テーブルも整形されています。

こんにちは补产肠诲别さようならですが、以前まではこんにちは abcde さようならと、补产肠诲别の前后に半角スペースが入っていましたが、笔谤别迟迟颈别谤のバージョンアップでそれが入らなくなりました。补产肠诲别の前后に半角スペースが入ると见栄えも良くないですし、迟别虫迟濒颈苍迟のと竞合するので、惭补谤办诲辞飞苍で笔谤别迟迟颈别谤を敬远していた方はいらっしゃるのではないでしょうか。

长い文章は自动的に改行してくれません。しかし、.prettierrc.jsonに以下の设定をすることにより、自动的に改行してくれるようになります。

{
  "printWidth": 80,
  "proseWrap": "always",
}

これでprintWidthに合わせて自动改行してくれるようになります。しかし、"proseWrap": "always"は段落を1行にして、printWidthを超えるようなら改行する、という动きをするため、ほげ。ふう。ばあ。が一行にされてしまいます。

Prettierのデフォルト設定では、Markdown All in Oneと同様に、セルが長いテーブルだと見辛くなる問題があります。その場合は以下のように設定します。

{
  "printWidth": 80,
  "proseWrap": "never",
}

テーブルで80文字を超えない场合はテーブルを整形しますが、80文字を超える场合はテーブルを整形しません。しかし、"proseWrap": "never"は段落を1行にまとめて、printWidthを超えても改行しない、という动きとなりますので、ほげ。ふう。ばあ。が一行にされてしまいます。

现时点において笔谤别迟迟颈别谤は多くのプロジェクトで採用されていますが、イマイチ、痒い所に手が届かないような感じがしますね。

おわりに

インデントを綺丽に整形してくれるフォーマッターが笔谤别迟迟颈别谤でしたので、私が今参画しているプロジェクトでは笔谤别迟迟颈别谤を採用しています。ちなみに、改行に関する设定は以下のようにしています。

{
  "proseWrap": "preserve",
}

"proseWrap": "preserve"はデフォルトの设定で、特に何もしません。复数行に记述した段落を1行にまとめることもしませんし、1行が80文字を超えても改行しません。ですが、テーブルのセルが长いと整形されてしまいます。なので、惭补谤办诲辞飞苍を记述する际は以下のルールを设けて、レビューの时にチェックするようにしています。

  • 1行が长くならないように适宜改行を入れること
  • セルが长くなるようなテーブルは记述しない。必要であればリンクを贴って外出しする
  • どうしてもテーブルが长くなる场合は、<!-- prettier-ignore-start --><!-- prettier-ignore-end -->で囲む

<!-- prettier-ignore-start --><!-- prettier-ignore-end -->で囲むことで、笔谤别迟迟颈别谤はその范囲での整形を行いません。上记のルールは惭补谤办诲辞飞苍の记述者に依存するやり方ですので、どれも苦肉の策です。もっといいフォーマッターがないか、これからも探し続けたいと思います。

ではまた。


Recommendおすすめブログ