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

JavaScriptコードフォーマッター

開発者文章

スタイルオプション

行長のためのソフトターゲット。長いオブジェクトリテラルや配列は、フィットするように分割されます。

ガイド

JavaScriptコードフォーマッター

JavaScriptコードフォーマッター

ミニフィードされた、ごちゃごちゃした、または圧縮されたJavaScriptを貼り付け、読みやすいクリーンで一貫したフォーマットのバージョンを取得できます。フォーマッターはトークンを理解しており、文字列リテラル、テンプレートリテラル、正規表現、コメントを理解しているため、正規表現の内部を誤ってフォーマットしたり、あなたのを再配置したりしません。 ${...} すべてがブラウザで実行され、貼り付けたコードはあなたのマシンに残ります。

使用方法

  1. JavaScriptを入力ボックスに貼り付けます。
  2. インデント、引用記号のスタイル、セミコロンのポリシーを選択します。
  3. ブレースのスタイル(1TBSまたはAllman)およびトレーリングコマのポリシーを選択します。
  4. ターゲットの印刷幅を設定します——長いオブジェクトリテラルや配列は、フィットするように分割されます。
  5. フォーマットされた出力をコピーするか、または .js ファイル。

機能

  • 決定論的出力 — 同じ入力が常に同じ結果を生成します。
  • 設定可能なインデント – 2スペース、4スペース、またはタブ。
  • 引用記号の変換 — シングル、ダブル、または元のスタイルを保持し、安全なエスケープ処理を適用します。
  • セミコロンのポリシー — 常に挿入、すべてを削除、または既存のものに従います。
  • ブレースのスタイル — 1TBS(同じ行)またはAllman(次の行)。
  • 終端カンマ — 無し、ES5(オブジェクトおよび配列のみ)、またはすべて(関数引数を含む)。
  • 印刷幅の折り返し — 長いリテラルは複数行にわたって折り返されます。
  • 現代的な構文 — 関数アロー、async/await、スプレッド/レスト、デストラクティング、クラス、テンプレートリテラル、BigInt、および正規表現リテラルがすべて認識されます。
  • コメントの保持 — インラインおよびブロックコメントはフォーマットプロセスを通過します。
  • ローカル実行 — あなたのコードはブラウザに残りません。

このツールを使用するタイミング

ミニフィードされたバンドルや第三者のスニペットを読むとき、チャットやメールからコードをプロジェクトにコピーするとき、チームメイトのスタイルを標準化してプルリクエストをレビューするとき、このフォーマッターを使いましょう。フルリントと異なり、このフォーマッターはスペースとピリオドにのみ焦点を当てており、論理はそのままです。

よくある質問

  1. JavaScriptのミニフィアとフォーマッターの違いは何ですか?

    ミニフィアは不要なスペースを削除し、識別子を短縮し、コメントを削除して、ブラウザに送るための最も小さなコードを生成します。フォーマッターまたはフォーマットは逆に、一貫したインデント、改行、スペースを追加して人間が読めるようにします。これらは通常、開発中のフォーマットとデプロイ前のミニフィアの両端に使われます。

  2. 決定論的なフォーマットがAIによるコードの再フォーマットよりも良い理由は何ですか?

    決定論的なフォーマッターは同じ入力に対して常に同じルールを適用し、関数が今日と来月に再フォーマットされても、同じ差分が得られます。AIモデルは、微妙なスタイルのズレを引き起こす可能性があり、場合によっては論理を書き換えたり、存在しないオプションを発明したりします。バージョン管理に含まれるコードでは、予測可能な出力により差分がレビュー可能になり、誤った動作変更を回避できます。

  3. 1TBSブレーススタイルとAllmanの違いは何ですか?

    1TBS — One True Brace Style — は、導入する文と同じ行に開きブレースを配置します。例えば function foo() {。Allmanスタイルは開きブレースをその行の下に独自の行に配置します。どちらも有効ですが、1TBSは現代JavaScriptの主要な慣習であり、Prettierおよび多くのESLintのプリセットが採用しています。

  4. JavaScriptでトレーリングコマを使うべきタイミングはいつですか?

    マルチライン配列およびオブジェクトリテラルにおけるトレーリングコマは、すべての現代JavaScript実行環境で有効であり、アイテムを追加する際に、以前はコマと新しいアイテムの両方が必要だった行が、今ではコマのみで変更されるため、より短く、クリーンな差分を生成します。関数パラメータおよび引数リストにおけるトレーリングコマもES2017以降で有効ですが、古いツールとの互換性のために時々無効にされています。ES5モードを使用して、オブジェクトおよび配列にコマを含めたいが、関数呼び出しには含めたくない場合があります。

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

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

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

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

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

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

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

参加する

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

コーヒーを買って