NHN Cloud Meetup 編集部
NHN Cloudの技術ナレッジやお得なイベント情報を発信していきます
Prettier 2.0で変更されたオプションについて
2020.07.21
10,809
Prettier 2.0が2020年3月に正式リリースされました。NHNでは、すぐには適用せずにしばらく様子を見てから適用することにし、約2ヶ月が経ったところで、Chart 4.0の開発にPrettier2.0を適用しました。今回は、以前のPrettierバージョンから変更された点について簡単に紹介したいと思います。
Prettierとは？
Prettierはコードフォーマットツールです。JavaScript、JSX、Vue、Angular、HTML、CSS、マークダウンなど、複数のスタイルのコードを自動的にフォーマットします。
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
上のように書かれたコードを見てみましょう。少し「長い」という印象を受けますか？
Prettierを使うと、以下のように一貫性のあるコーディングスタイルを自動的に適用してくれます。
foo( reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne() );
NHNでは、かなり前からESLintとPrettierを使用して、一貫性のあるコーディングスタイルを追求できるように努めています。複数の開発者が作成したさまざまなスタイルをPrettierに任せることで、まるで一人が作成したかのようなコーディングスタイルを維持することができ、可読性が高くなりました。
それでは、2.0で変更された点を見てみましょう。
すべての内容を紹介するのは難しいので、オプションにおいて変更された内容を見ていこうと思います。
2.0で変更された点（重要な変更）
1. Prettier Dot（ .
2. Node 10バージョン以前のサポートを終了
3. trailingCommaのデフォルトをnoneからes5に変更
既存の旧型ブラウザ（IE8）で当該機能を提供していないことから、デフォルトではnone、つまり末尾にカンマ処理しないように設定されていました。カンマ処理には、git diffをより整然に保ち、値を削除したい時に簡単に除去しやすくするなど多くのメリットがありますが、それを手放すのは残念だという意見があったのでしょう。2.0からは当該オプションがデフォルトで入ることになりました。
4.arrowParensのデフォルトをavoidからalwaysに変更
arrowParensはv1.9.0で追加された内容です。矢印関数で、単一パラメータに括弧をつけるか（”always”）否か（”avoid”）を決定します。一見、avoidは視覚的にすっきりしています。しかし、alwaysで括弧を常に入れることで、新しいパラメータを追加したり、タイプを追加する際、より良いユーザービリティを提供できると判断され、デフォルト値が変更されることになりました。
// Input const fn = (x) => y => x + y; // Prettier 1.19 const fn = x => y => x + y; // Prettier 2.0 const fn = (x) => (y) => x + y;
5. endOfLineのデフォルトをautoからlfに変更
従来のファイル互換性のためにautoで定義されていました。改行文字により、git diffとgit blameの難しさを取り除くため、lfを使用することになりました。lfを強制した場合、行末が混ざったり、誤ったgit blameを避けることができます。
6.その他
- prettier.getSupportInfoのパラメータであるversionを消去（リンク）
- 非推奨のoptionsとoptions
の値を削除（リンク） - prettier.util
APIの変更（リンク） - 検索結果のキャッシング（リンク）
ほかにも、さまざまな変更点が存在します。これまで「なぜこのように変更するのだろう？」と思っていた部分が、非常に合理的な方向に変化しているので、上記のリンクから一度確認してみることをお勧めします。
vueIndentScriptAndStyle (v1.19.0)
2.0バージョンリリース前の最後のバージョンであるv1.19.0から、新しいオプションvueIndentScriptAndStyleが追加されました。Vueファイルで<script>や<style>タグ内のコードが改行されることを選択できるように追加されたオプションです。
<script>
export default {
mounted() {
console.log("Component mounted!");
}
};
</script>
<style>
body {
color: #fff;
}
</style>
上記のコードは、デフォルト値falseのときのコードです。falseの場合は改行を行いません。
<script>
export default {
mounted() {
console.log('Component mounted!')
}
}
</script>
<style>
body {
color: #fff;
}
</style>
さらに詳しい内容は、こちらのイシューをご参考ください。
実際の適用例
NHNではこれまで、デフォルトのオプションを除き、変更された内容のみを明示する方法で、Prettierを設定・作成して使用していました。しかし、今後Prettierのバージョンが上がるにつれて変更されるデフォルト値が増えることが予想されるため、使用可能なすべてのオプションを明示して使用することにしました。
私たちは、次のオプションを使って開発を進めています。
{
"singleQuote": true,
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"trailingComma": "es5",
"arrowParens": "always",
"endOfLine": "lf",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"requirePragma": false,
"insertPragma": false,
"proseWrap": "preserve",
"vueIndentScriptAndStyle": false
}
おまけ
PrettierとESLintを使用する場合、重複するスタイルの問題を整理するため、eslint-config-prettierとeslint-plugin-prettierを使用している方が多いと思います。
- eslint-config-prettierは6.10.0
バージョン以降を使用すると、Prettier 2.0を使用することができます。 - eslint-plugin-prettierはアップデートしなくても使用できるようです。
