Prose Wrap
「Prose Wrap」はPrettierというプログラミングのフォーマッタにおける設定項目の一つで、主にコメントやMarkdownファイルのような「散文(プログラミングコードではない、自然言語の文章)」の折り返し方を制御するものです。
Prettierにおける「Prose Wrap」とは?
Prettierは、JavaScript、TypeScript、CSS、HTML、Markdownなど、様々な種類のコードやファイルを一貫したスタイルに自動的にフォーマットしてくれるツールです。その中で、「Prose Wrap」は特に以下のファイルタイプに影響します。
- Vueファイルなどの
<template>
タグ内のテキスト - HTML、JavaScript、TypeScriptなどのコード内のコメント
- YAMLファイル (.yml, .yaml)
- Markdownファイル (.md)
これらのファイルや場所に含まれる「散文」(つまり、プログラミングコードではない、人が読むための文章)について、Prettierがどのように行を折り返すかを決定します。
設定可能な値とそれぞれの意味
「Prose Wrap」には主に以下の3つの設定値があります。
-
- 意味
常に文章を折り返します。Prettierは、指定されたprintWidth
(行の最大幅)を超えないように、自動的に文章の行を折り返してくれます。 - 用途
コメントやMarkdownファイルが、どのエディタや環境で見ても横に長くなりすぎず、読みやすい状態を保ちたい場合に最適です。特に、コードレビューなどで横スクロールを減らしたい場合に有用です。 - 例 (Markdown)
↓ Prettierでフォーマット後(printWidth=80の場合)これは非常に長い文章の例です。Prettierが設定されたprintWidthに従って、この文章を適切に折り返します。
これは非常に長い文章の例です。Prettierが設定されたprintWidthに 従って、この文章を適切に折り返します。
- 意味
-
"never"
- 意味
文章を自動的に折り返しません。行がprintWidth
を超えても、Prettierは改行を挿入しません。改行は、元々手動で入力されたものだけが保持されます。 - 用途
文章の行の折り返しをPrettierに任せたくない場合や、特定の理由で長い一行のコメントを維持したい場合などに使用します。例えば、Gitのコミットメッセージの冒頭行など、特定のフォーマットを維持したい場合に選択することがあります。 - 例 (Markdown)
↓ Prettierでフォーマット後(これは非常に長い文章の例です。Prettierはこれを折り返しません。
printWidth
を超えていても変化なし)これは非常に長い文章の例です。Prettierはこれを折り返しません。
- 意味
-
"preserve"
- 意味
既存の改行をそのまま保持します。Prettierは、文章の行をprintWidth
に従って折り返すことも、強制的に折り返さないこともせず、入力された通りの改行を維持します。しかし、単語間の余分なスペースなどは整形されます。 - 用途
原文の行の折り返しを最大限尊重したい場合に有用です。 - 注意点
この設定は、printWidth
を超過する行があってもPrettierがそれを修正しないことを意味します。
- 意味
Prettierの設定ファイル(例: .prettierrc
や package.json
内の "prettier"
キー)で設定します。
例 (.prettierrc.json)
{
"printWidth": 80,
"proseWrap": "always" // または "never", "preserve"
}
想定通りに文章が折り返されない(または折り返されすぎる)
エラーの症状
proseWrap: "preserve"
に設定しているのに、既存の改行が無視されてしまう。proseWrap: "never"
に設定しているのに、文章が勝手に折り返されてしまう。proseWrap: "always"
に設定しているのに、文章がprintWidth
で折り返されない。
原因とトラブルシューティング
-
Markdownの特殊な要素
- Markdownのリンク定義やコードブロックなど、一部の要素は
proseWrap
のルールに従わない場合があります。これはPrettierの設計上の意図であることもあります。 - トラブルシューティング
そのMarkdown要素がproseWrap
の対象外であるかをPrettierのドキュメントで確認します。必要であれば、prettier-ignore
コメントなどを使用して、その部分のフォーマットをPrettierに任せないようにします。[長いリンク定義]: https://www.example.com/this-is-a-very-very-very-long-url-that-i-dont-want-prettier-to-wrap
- Markdownのリンク定義やコードブロックなど、一部の要素は
-
Prettierのバージョンが古い
- 古いバージョンのPrettierでは、特定の
proseWrap
オプションが完全に機能しない、または挙動が異なる場合があります。特に"preserve"
オプションは比較的新しいバージョンで導入されました。 - トラブルシューティング
Prettierを最新バージョンにアップデートしてみます。
- 古いバージョンのPrettierでは、特定の
-
対象のファイルタイプではない、または対象箇所ではない
proseWrap
は、HTMLやJavaScript内のコメント、Markdown、YAMLなどの特定のファイルタイプや箇所にのみ適用されます。例えば、単なる文字列リテラルには適用されません。- トラブルシューティング
問題が発生しているのがproseWrap
が適用されるべき箇所であるかを確認します。
-
- Prettierは
printWidth
を基準に文章を折り返します。この値が期待通りに設定されているか確認してください。 - 複数の設定ファイル(例:
.prettierrc
,package.json
,.editorconfig
)がある場合、優先順位によって設定が上書きされている可能性があります。どの設定が最終的に適用されているかを確認しましょう。VS Codeなどのエディタを使っている場合、Prettierの拡張機能の設定も確認が必要です。 - トラブルシューティング
設定ファイルでprintWidth
とproseWrap
の両方を明示的に設定し、他の設定ファイルとの競合がないか確認します。
- Prettierは
ESLintとの競合
エラーの症状
- 逆に、ESLintのルールで改行が入るが、Prettierがそれを元の長い一行に戻してしまう。
- Prettierでフォーマットすると文章が折り返されるが、ESLintが「行の長さが長すぎる」というエラー(
max-len
など)を出す。
原因とトラブルシューティング
-
PrettierとESLintの実行順序
- 保存時やコミット前にPrettierとESLintが両方実行される場合、どちらが先に実行されるかによって最終的なフォーマットが変わることがあります。
- トラブルシューティング
基本的には、Prettierでフォーマットした後にESLintでLintチェックを行うのが推奨されます。VS Codeのeditor.formatOnSave
とeditor.codeActionsOnSave
の設定を調整することで、Prettierが先に実行されるようにできます。// .vscode/settings.json { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": "never" // Prettierによるフォーマット後にESLintの自動修正は実行しない(または"explicit"など) } }
source.fixAll.eslint
をnever
に設定することで、ESLintのフォーマットに関する自動修正がPrettierのフォーマットと競合するのを防ぎます。
-
ESLintのmax-lenルールとprintWidthの不一致
- Prettierの
printWidth
とESLintのmax-len
ルール(行の最大長を制限するルール)が異なる値に設定されていると、競合が発生します。 - トラブルシューティング
ESLintのmax-len
ルールをPrettierのprintWidth
と同じ値に設定するか、eslint-config-prettier
を使用してPrettierと競合するESLintの整形ルールを無効にします。これが最も推奨されるアプローチです。// .eslintrc.json { "extends": [ "eslint:recommended", "plugin:react/recommended", "prettier" // prettierを最後に記述することで、競合するルールを無効化 ], "rules": { // max-lenは通常prettierが解決するため不要だが、 // 特定の理由で保持したい場合はprettierのprintWidthと合わせる // "max-len": ["error", { "code": 80, "ignoreComments": true }] } }
- Prettierの
エディタ(VS Codeなど)での自動フォーマットが効かない
エラーの症状
proseWrap
の設定がエディタで反映されない。- ファイル保存時にPrettierが自動でフォーマットしてくれない。
原因とトラブルシューティング
-
Prettierがインストールされていない、またはパスが通っていない
- プロジェクトの
node_modules
にPrettierがインストールされていない、またはエディタがPrettierの実行パスを見つけられない場合に発生します。 - トラブルシューティング
プロジェクトでnpm install prettier
またはyarn add prettier
を実行してPrettierがインストールされていることを確認します。VS Codeの場合、prettier.prettierPath
設定でPrettierのパスを明示的に指定することもできます。
- プロジェクトの
-
ファイルがprettierignoreで無視されている
.prettierignore
ファイルに対象のファイルやディレクトリが記載されている場合、Prettierはそのファイルをフォーマットしません。- トラブルシューティング
.prettierignore
ファイルの内容を確認し、問題のファイルが意図せず無視されていないか確認します。
-
ワークスペース設定とユーザー設定の競合
- VS Codeにはユーザー設定とワークスペース設定があります。ワークスペース設定が優先されるため、ユーザー設定でPrettierを設定していても、ワークスペース設定で別のフォーマッタが指定されているとPrettierが動作しないことがあります。
- トラブルシューティング
.vscode/settings.json
などのワークスペース設定を確認し、Prettierが適切に設定されていることを確認します。
-
デフォルトのフォーマッタがPrettierに設定されていない
- 複数のフォーマッタがインストールされている場合、Prettierがデフォルトになっていないと、期待通りに動作しません。
- トラブルシューティング
エディタの設定で、対象言語のデフォルトフォーマッタをPrettierに設定します。VS Codeの場合、editor.defaultFormatter
を設定します。
-
Prettier拡張機能がインストールされていない、または有効になっていない
- VS CodeなどのエディタでPrettierを利用するには、対応する拡張機能が必要です。
- トラブルシューティング
エディタのマーケットプレイスからPrettier拡張機能をインストールし、有効になっていることを確認します。
まず、Prettier の設定ファイル (.prettierrc.json
など) と、フォーマットされる対象となるファイルを用意します。
Prettier 設定ファイル (.prettierrc.json)
printWidth
は、行の最大幅を定義するものです。この例では 80
に設定します。
{
"printWidth": 80,
"proseWrap": "always"
// ここを "never" や "preserve" に変更して試します
}
フォーマット対象のファイル(例: README.md)
以下のMarkdownファイルを考えます。非常に長い行が含まれています。
# Prettier Prose Wrap のデモ
これはPrettierのProse Wrap機能の動作を示すためのデモファイルです。Prettierは、指定されたprintWidthに基づいて文章の行を自動的に整形し、読みやすくするために改行を挿入します。特に長い説明やドキュメントにおいて、この機能は非常に役立ちます。
この非常に長い文章は、Prettierによってどのように折り返されるでしょうか?これは、Prettierの設定ファイルで指定された`printWidth`オプションに大きく依存します。もし`printWidth`が80に設定されている場合、Prettierは80文字を超えないようにこの文章を適切に改行します。
これは短い文章です。
これはコードブロックではありませんが、意図的にインデントされた長い文章です。Prettierがこれをどう扱うか見てみましょう。
```javascript
// これはJavaScriptのコードブロックです。
// コードブロック内のコメントもproseWrapの影響を受ける場合があります。
const message = "これは非常に長い文字列なので、proseWrapの設定によっては折り返されるかもしれません。";
console.log(message);
これは別の長い文章です。この文章の長さは、printWidth
の設定を超えている可能性があります。Prettierが自動的に改行を挿入することで、この文章が様々な環境で読みやすくなることを期待しています。
---
#### 3. `proseWrap` オプションごとの動作例
上記の設定ファイルとMarkdownファイルを使って、`proseWrap` の各オプションがどのように動作するかを見ていきます。
##### **オプション 1: `"always"`** (デフォルト)
`proseWrap` を `"always"` に設定すると、Prettier は `printWidth` (この例では 80) を超える文章の行を常に自動的に折り返します。
**`.prettierrc.json`:**
```json
{
"printWidth": 80,
"proseWrap": "always"
}
README.md を Prettier でフォーマットした後
# Prettier Prose Wrap のデモ
これはPrettierのProse Wrap機能の動作を示すためのデモファイルです。
Prettierは、指定されたprintWidthに基づいて文章の行を自動的に整形し、
読みやすくするために改行を挿入します。特に長い説明やドキュメントにおいて、
この機能は非常に役立ちます。
この非常に長い文章は、Prettierによってどのように折り返されるでしょうか?
これは、Prettierの設定ファイルで指定された`printWidth`オプションに大きく依存します。
もし`printWidth`が80に設定されている場合、Prettierは80文字を超えないように
この文章を適切に改行します。
これは短い文章です。
これはコードブロックではありませんが、意図的にインデントされた長い文章です。
Prettierがこれをどう扱うか見てみましょう。
```javascript
// これはJavaScriptのコードブロックです。
// コードブロック内のコメントもproseWrapの影響を受ける場合があります。
const message =
"これは非常に長い文字列なので、proseWrapの設定によっては折り返されるかもしれません。";
console.log(message);
**ポイント:**
* 長い文章が`printWidth`(80文字)を超えないように自動的に改行されています。
* インデントされた文章やコードブロック内のコメントも同様に折り返されています。
##### **オプション 2: `"never"`**
`proseWrap` を `"never"` に設定すると、Prettier は `printWidth` を超える文章の行を自動的に折り返しません。既存の改行のみが維持されます。
**`.prettierrc.json`:**
```json
{
"printWidth": 80,
"proseWrap": "never"
}
README.md を Prettier でフォーマットした後
# Prettier Prose Wrap のデモ
これはPrettierのProse Wrap機能の動作を示すためのデモファイルです。Prettierは、指定されたprintWidthに基づいて文章の行を自動的に整形し、読みやすくするために改行を挿入します。特に長い説明やドキュメントにおいて、この機能は非常に役立ちます。
この非常に長い文章は、Prettierによってどのように折り返されるでしょうか?これは、Prettierの設定ファイルで指定された`printWidth`オプションに大きく依存します。もし`printWidth`が80に設定されている場合、Prettierは80文字を超えないようにこの文章を適切に改行します。
これは短い文章です。
これはコードブロックではありませんが、意図的にインデントされた長い文章です。Prettierがこれをどう扱うか見てみましょう。
```javascript
// これはJavaScriptのコードブロックです。
// コードブロック内のコメントもproseWrapの影響を受ける場合があります。
const message = "これは非常に長い文字列なので、proseWrapの設定によっては折り返されるかもしれません。";
console.log(message);
**ポイント:**
* `printWidth`を超えても、文章が全く折り返されていません。すべて元のままの長い一行に保たれています。
* コードブロック内のコメントも同様です。
##### **オプション 3: `"preserve"`**
`proseWrap` を `"preserve"` に設定すると、Prettier は文章の既存の改行をそのまま保持し、`printWidth` に基づく自動的な折り返しは行いません。ただし、余分なスペースの削除など、他の基本的な整形は適用されます。
**`.prettierrc.json`:**
```json
{
"printWidth": 80,
"proseWrap": "preserve"
}
README.md を Prettier でフォーマットした後
(元の README.md
に手動で改行を挿入していない限り、結果は "never"
と同じに見えるかもしれません。しかし、もし文章中に手動で改行を入れていた場合、その改行は保持されます。)
例として、README.md
の一部を以下のように変更してみます。
変更前の README.md の一部
これは非常に長い文章の例です。
ここで手動で改行を入れました。
この改行はpreserveモードでは保持されます。
proseWrap: "preserve" でフォーマットした後
これは非常に長い文章の例です。
ここで手動で改行を入れました。
この改行はpreserveモードでは保持されます。
- しかし、元のファイルに手動で挿入された改行はそのまま維持されます。これは、
"never"
が全ての改行を削除して一行にするのとは異なる点です(ただし、今回の例の元のREADME.md
では、手動改行がないため、"never"
と同一の結果に見えます)。 "never"
と同様に、printWidth
を超えても自動的な改行は入りません。
Prettier 「Prose Wrap」の代替方法
proseWrap
の代替方法は、大きく分けて以下のカテゴリに分類できます。
- Prettier 自体の機能で細かく制御する
- Lint ツールとの連携
- エディタの機能を利用する
- 手動でのフォーマット
Prettier 自体の機能で細かく制御する
proseWrap
の設定自体を変更する以外に、Prettier が提供する以下の機能を利用して、特定の箇所のフォーマットを制御できます。
-
printWidth の調整
根本的な解決策ではありませんが、proseWrap: "always"
を使用している場合に、文章の折り返し頻度を調整する最も直接的な方法です。メリット
- プロジェクト全体のフォーマットルールを一括で変更できる。
デメリット
- 文章だけでなく、コードの折り返しにも影響を与えるため、他のコードに予期せぬ影響が出る可能性がある。
- 極端な値に設定すると、可読性が損なわれる場合がある。
- プロジェクト全体のフォーマットルールを一括で変更できる。
デメリット
-
prettier-ignore コメント
特定のブロックや行を Prettier のフォーマット対象から除外したい場合に最も強力な方法です。proseWrap
の影響を受けたくないテキストの直前に記述します。例 (JavaScript のコメント)
// prettier-ignore // これは非常に長いコメントで、proseWrap: "always" が設定されていても折り返してほしくないです。 const data = {};
例 (Markdown)
これはMarkdownの非常に長い一行です。 `proseWrap: "always"` でも折り返されません。
- 特定の箇所だけ Prettier のフォーマットを完全に無視できる。
- 柔軟性が高い。
デメリット
- 対象箇所ごとに手動で記述する必要があるため、大量の箇所に適用するのは手間がかかる。
- コメントが増え、コードが煩雑に見える可能性がある。
Lint ツールとの連携(特に ESLint)
Prettier は「整形」に特化していますが、ESLint のような Lint ツールは「品質チェック」や「コーディング規約違反の指摘」を行います。両者を連携させることで、Prettier が行わない(あるいはできない)文章の行の長さに制約を設けたり、別の方法で警告を出したりすることができます。
-
ESLint の max-len ルール
JavaScript/TypeScript コード内の行の最大長を制限するルールです。コメントや文字列リテラルにも適用できます。Prettier のproseWrap
とは独立して動作するため、proseWrap: "never"
に設定している場合でも、ESLint で行の長さを監視できます。.eslintrc.json の設定例
{ "rules": { "max-len": ["warn", { "code": 120, // コードの最大行長 "ignoreComments": false, // コメントも対象にする "ignoreStrings": false, // 文字列リテラルも対象にする "ignoreTemplateLiterals": false // テンプレートリテラルも対象にする }] } }
メリット
- Prettier の設定とは独立して、コード内のコメントや文字列の行の長さを制御できる。
warn
レベルに設定すれば、開発者に注意を促しつつ、ビルドをブロックしない柔軟な運用が可能。 デメリット:- Prettier との競合が発生しないように、
eslint-config-prettier
などで適切に設定する必要がある。 - 自動修正ではないため、手動での修正が必要になる場合がある。
エディタの機能を利用する
開発者が使用するエディタ(VS Codeなど)には、Prettier とは独立したテキストの折り返し機能が組み込まれている場合があります。
-
VS Code の editor.wordWrap 設定
これは Prettier とは無関係に、エディタ上での表示のみを制御する機能です。ファイルの内容を実際に変更するわけではありませんが、長い行を画面内で折り返して表示してくれるため、可読性が向上します。.vscode/settings.json の設定例
{ "editor.wordWrap": "on", // エディタ上で自動折り返しを有効にする "editor.wordWrapColumn": 80, // 80文字で折り返す(表示のみ) "editor.wrappingIndent": "indent" // 折り返された行のインデント方法 }
メリット
- ファイルの実際の変更を伴わないため、Git の差分に影響しない。
- 個人設定として利用できるため、プロジェクト全体の設定を汚さない。
デメリット
- 他の開発者の環境では反映されない(エディタ設定のため)。
- ファイル自体は長い一行のままであるため、Prettier や Lint ツールとは目的が異なる。
手動でのフォーマット(Prettier を避ける)
proseWrap: "never"
を設定している場合や、Prettier の自動フォーマットを完全に避けたい特定の場合に有効な方法です。
-
手動での改行と整形
Prettier に頼らず、コメントや Markdown の改行位置を開発者自身が手動で管理します。proseWrap: "never"
または"preserve"
を使用している場合に、このアプローチを選択することになります。メリット
- 改行位置を完全に制御できる。
- 特定の視覚的なレイアウトを厳密に維持したい場合に有効。
デメリット
- 一貫性を保つのが難しい。
- コードレビューでスタイルに関する指摘が増える可能性がある。
- 手間がかかる。
- 「文章の改行を完全に手動で管理したい」 →
proseWrap: "never"
または"preserve"
を設定し、手動で改行を入れます。 - 「ファイルの内容は変えずに、エディタ上での見え方だけを調整したい」 → エディタの
wordWrap
機能を利用します。 - 「コード内のコメントや文字列の長さをチェックしたいが、Prettier には触ってほしくない」 → ESLint の
max-len
ルールとprettier-ignore
を組み合わせるのが良いでしょう。 - 「特定の箇所だけ Prettier の自動整形を避けたい」 →
prettier-ignore
コメントが最も適しています。