広告が嫌いですか? 行く 広告なし 今日

Prettier コンフィグジェネレーター

データ開発者
入力
JSONが最も一般的です。動的設定や環境ごとの切り替えが必要な場合は、JS形式を選択してください。

基本オプション

プリントが折り返される行長。Prettierのデフォルト値:80。
インデントレベルごとのスペース数。Prettierのデフォルト値:2。
オブジェクトプロパティ名のクォート方法を変更。
複数行構文にトレーリングカンマを表示。
単一のアロー関数パラメータに括弧を囲む。
ファイルに記述される行終端スタイル。

JSX

マーカード&HTML

Prettierがマーカードテキストの巻き戻しをどのように処理するか。
PrettierがHTMLのスペースをどのように扱うか。

言語ごとのオーバーライド

Linux/macOSマシンで overrides 特定のファイルタイプに設定を調整するためのblock。

出力オプション

ガイド

設定を正確に作成するため、ドキュメントを検索せずにチェックリストからすべてのフォーマットオプションを選択し、Markdown、HTML、YAMLおよびJSONの言語ごとのオーバーライドを追加し、結果を

Prettier コンフィグジェネレーター

正しいPrettier設定を作成するため、ドキュメントを検索せずにチェックリストからすべてのフォーマットオプションを選択し、Markdown、HTML、YAMLおよびJSONの言語ごとのオーバーライドを追加し、結果を .prettierrc.json, .prettierrc.yaml、ESモジュール、CommonJSモジュール、または直接貼り付ける "prettier" キーを package.json. マッチする .prettierignore テンプレートが同時に生成され、リポジトリは最初のコミット時にフォーマット可能になります。

使用方法

  1. 選択 出力形式 — JSONは最もシンプルな共有ファイル、YAMLは人間が編集しやすい、JSモジュールは条件分岐が必要な場合、またはpackage.jsonキーを使用してリポジトリ内のファイルを1つ減らしたい場合。
  2. [名前]を設定してください 基本オプション: 行幅、タブ幅、セミコロン、クォートスタイル、トレーリングカンマ、ブレットスペース、アロー関数の括弧、および行終端スタイル。
  3. チューニング JSX ブロックをReactを使用している場合に適用し、 マーカード&HTML ブロックでプロセスの巻き戻しとスペース処理を調整。
  4. 任意の 言語ごとのオーバーライド を適用して、特定のファイルタイプに異なるルールを適用 — たとえば、JSONの幅を広くしたり、HTMLの属性1行にしたり。 printWidth 生成された設定に。プロジェクトのルートに配置し、
  5. クリック コピー または ダウンロード すべての公式Prettierオプション npx prettier --write ..

機能

  • — printWidth、tabWidth、useTabs、semi、singleQuote、quoteProps、jsxSingleQuote、trailingComma、bracketSpacing、bracketSameLine、arrowParens、endOfLine、proseWrap、htmlWhitespaceSensitivity、singleAttributePerLine。 5つの出力形式
  • — JSON、YAML、ESM(.mjs)、CommonJS(.cjs)、およびpackage.jsonのフラグメント。 言語ごとのオーバーライドブロック
  • Markdown、HTML、YAML、およびJSONに適切なデフォルト値を提供し、そのままコピーまたは調整できます。 自動生成
  • テンプレートは、ビルド出力、依存関係、ロックファイル、最小化されたアセット、および一般的なフレームワークキャッシュフォルダをカバーします。 .prettierignore JSDoc
  • アノテーション @type JSモジュール出力に設定され、エディタが自動補完と型チェックを有効にします。 — すべての変更が即時更新され、オプション組み合わせをA/B比較できるようになります。
  • ライブプレビュー なぜPrettierはあらゆるオプションを故意に少なくしているのか?

よくある質問

  1. Prettierの設計目標は、スタイルの議論を終えることにより、意見を明確にすることです。各オプションは慎重に追加され、正しいデフォルトに合意が不可能だったためです。チームは新しいオプションを追加することを明確に拒否しており、設定のポータビリティとプロジェクト間のレビューの予測可能性を維持しています。そのため、「キーワードの周りにスペース」のようなオプションは設定できません。Prettierはフォーマットの選択を商品的な決定として扱い、個人の表現とは見なしていません。

    trailingComma 'es5' と 'all' の違いは?

  2. 'es5' はES5で許容された場所(配列とオブジェクト)にトレーリングカンマを追加しますが、関数パラメータや呼び出しには追加しません。'all' は関数パラメータリストと呼び出し場所にも追加し、ES2017以降で有効であり、引数の追加または削除時にGitの差分がきれいになります。'all' は現在のPrettierのデフォルト値であり、現代的なJavaScriptやトランスパイルを対象とするプロジェクトでは推奨される選択です。

    PrettierはESLintとどのように相互作用するか?

  3. Prettierはフォーマットを処理し、ESLintは正確性をチェックします。クォートやセミコロンなどのスタイルルールで重複しており、ESLintが問題を報告し、Prettierがそれを再書く場合があります。解決策はeslint-config-prettier — Prettierが制御するすべてのESLintルールを無効にする共有設定です。まずPrettierでフォーマットし、その後ESLintでバグを検出します。eslint-plugin-prettierのようなPrettierをルールとして実行するプラグインは、ESLintの処理速度を遅らせるため、推奨されず、エラーの原因を隠す可能性があります。

    マーカードファイルでのproseWrapはどのような役割を果たすか?

  4. 'preserve'は既存の改行をそのまま保持します。'always'はprintWidthでプロセスを硬く折り返し、すべてのエディタでソースが読みやすくなるため、ドキュメントリポジトリに適しています。'never'は折り返された段落を1行に結合し、ツールで編集されるファイルや、改行が別々の段落として表示される環境でレンダリングされるファイルに適しています。デフォルトは'preserve'です。なぜなら、マーカードの改行が一部のバリエーションで意味を変える可能性があるからです。

    JS設定を使用するべきタイミングは?

  5. 設定が静的でチーム全体で共有される場合、JSONを使用します。これは最もシンプルでポータブルな形式です。設定が共有ルールをインポートする必要がある、環境変数に基づいてオプションを切り替えたり、コード内のグローバルリストからオーバーライドを導出したり、JSDoc @type インポートを使用する必要がある場合、JS設定を使用します。JS設定は読み込みが遅いですが、エディタの保存速度ではそのコストは見えません。

    Prettier設定生成器1

広告なしで楽しみたいですか? 今すぐ広告なしで

拡張機能をインストールする

お気に入りのブラウザにIOツールを追加して、すぐにアクセスし、検索を高速化します。

に追加 Chrome拡張機能 に追加 エッジ拡張 に追加 Firefox 拡張機能 に追加 Opera 拡張機能

スコアボードが到着しました!

スコアボード ゲームを追跡する楽しい方法です。すべてのデータはブラウザに保存されます。さらに多くの機能がまもなく登場します!

ニュースコーナー 技術ハイライト付き

参加する

価値ある無料ツールの提供を継続するためにご協力ください

コーヒーを買って