12

よりきれいな拡張機能をインストールしましたが、json オブジェクトの定義がフォーマット後に改行されています。どうすれば回避できますか？インライン オブジェクト宣言を保持したい。

たとえば、フォーマットする前に：

  "properties": {
    "d0":  {"type":"boolean","default":false},
    "d1":  {"type":"boolean","default":false},
    "d2":  {"type":"boolean","default":false},
    "d3":  {"type":"boolean","default":false},
    "d4":  {"type":"boolean","default":false},
    "d5":  {"type":"boolean","default":false},
    "d6":  {"type":"boolean","default":false},
    "d7":  {"type":"boolean","default":false},
    "d8":  {"type":"boolean","default":false},
    "d9":  {"type":"boolean","default":false}
  }

フォーマット後:

  "properties": {
    "d0": {
      "type": "boolean",
      "default": false
    },
    "d1": {
      "type": "boolean",
      "default": false
    },
    "d2": {
      "type": "boolean",
      "default": false
    },
    "d3": {
      "type": "boolean",
      "default": false
    },
    "d4": {
      "type": "boolean",
      "default": false
    },
    "d5": {
      "type": "boolean",
      "default": false
    },
    "d6": {
      "type": "boolean",
      "default": false
    },
    "d7": {
      "type": "boolean",
      "default": false
    },
    "d8": {
      "type": "boolean",
      "default": false
    },
    "d9": {
      "type": "boolean",
      "default": false
    }
  }
4

2 に答える 2

4

この動作が発生する理由:

Print WidthPrettier は、 config オプションで指定された一定量の文字の後で改行します。
このオプションは変更できますが、次の点に注意してください。

Prettier では< 80、読みやすさを向上させるために、このオプションを に設定することをお勧めします ( source ) 。

読みやすくするために、80 文字を超える文字を使用しないことをお勧めします

。コード スタイルガイドでは、行の最大長のルールが 100 または 120 に設定されることがよくあります。開発者は、読みやすくするために空白を使用して長い行を分割することがよくあります。実際には、平均行長は多くの場合、最大長を大幅に下回ります。

Prettier の printWidth オプションは同じようには機能しません。これは、許容される行の長さの厳密な上限ではありません。これは、ラインの長さを Prettier に大まかに伝える方法です。Prettier は短い行と長い行の両方を作成しますが、通常は指定された printWidth を満たすように努めます。

この動作を防ぐ方法:

自動ラッピングを停止する方法をいくつか説明します。

  • 自動ラッピングをグローバルに停止する
  • 自動ラッピングをローカルで停止する
  • 特定のコード グループの自動ラッピングを停止する

自動ラッピングをグローバルに停止する

Visual Studio Codeエディターと拡張機能を使用する場合、esbenp.prettier-vscode自動ラッピングを停止するために必要なことは、グローバルsettings.jsonファイルを変更することだけです。これらは、従う必要がある手順です。

1.開くsettings.json
  • Ctrl+ Shift+を使用Pしてコマンド パレットを開きます。

ここに画像の説明を入力

  • ここから次のように入力して選択します。> Preferences: Open Settings (JSON)

ここに画像の説明を入力

2. オプションを設定しますsettings.json

この行をsettings.jsonファイルの最後に追加すると、文字数Prettierを超えた場合にのみ行が折り返されます1000(基本的には決して折り返されません)。この数値は好みに合わせて変更できます。参考までに、デフォルトは です80。

{
  "prettier.printWidth": 1000
}

変更をファイルに保存するだけで完了です。

自動ラッピングをローカルで停止する

この方法は、IDE に関係なく機能します。.prettierrcプロジェクトのルートにファイルを作成しprintWidth、ローカル プロジェクトに を設定できます。

1..prettierrcファイルを作成する

一部の古いオペレーティング システムでは、拡張子のみのファイルの作成を妨げようとする場合があります。したがって、プロジェクトのルートで、このコマンドを使用してファイルを作成できます。

Linux:

touch .prettierrc

ウィンドウズ：

echo "" > .prettierrc
2.printWidth

これらの行をファイルに追加し.prettierrcます。

{
  "printWidth": 1000
}

ファイルを保存すれば準備完了です。

もう一度：

.prettiercこの行をファイルの末尾に追加するPrettierと、1000 文字を超えた場合にのみ行が折り返されます (基本的には決して折り返されません)。この数値は好みに合わせて変更できます。参考までに、デフォルトは です80。

特定のコード グループの自動ラッピングを停止する

コメントを使用して、prettierに次のコード ブロックをprettier-ignoreフォーマットしないように指示できます。JavaScriptHTMLCSS

JavaScript
// prettier-ignore
matrix(
 1, 0, 0,
 0, 1, 0,
 0, 0, 1
)

それ以外の場合、これは次のようにフォーマットされます。

matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);
HTML
<!-- prettier-ignore -->
<div         class="x"       >hello world</div            >

それ以外の場合、これは次のようにフォーマットされます。

<div class="x">hello world</div>
CSS
/* prettier-ignore */
.my    ugly rule
{

}

それ以外の場合、これは次のようにフォーマットされます。

.my ugly rule {
}

ここでは、言語固有の無視文字列の完全なリストと、ファイルの特定の範囲を無視するためのオプションを確認できます。

注: ファイルのローカル設定は、.prettierrcファイルのグローバル設定を上書きしsettings.jsonます。

于 2021-08-11T23:17:03.080 に答える