コードを美しくするための vscode Prettier オプションの 16 の実用的な属性を見てみましょう。

この記事では、Prettier のオプションを紹介し、コードを美しくする 16 個の属性を要約して共有します。

私は長い間フロントエンド開発を行ってきましたが、統一されたスタイルでコードを記述するために毎回スキャフォールディングまたはオープンソース コード テンプレートに依存しています。気に入らないものに遭遇しました。調整方法がわかりません。Baidu は何度か失敗したため、それでなんとかすることができました。今回は、特に

Prettier を見てみましょう

オプションを使用して、一度で解決しました。これは、コードの書式設定シナリオでよく使用されます (20,533,053 インストール) のツールです。 [推奨学習: 「vscode 入門チュートリアル 」]

より分かりやすい導入と使用構成:

Prettier

は、少ない設定でコードのフォーマットを行うための複数のプログラミング言語をサポートし、最も一般的に使用されるエディターにプラグインを統合して提供するツールです。 記事の最後に記載されているプラ​​グイン アドレスを使用するか、

VSCode

でストア内を検索して、ダウンロード量が最も大きいプラグインを見つけることができます。プラグインをインストールした後、プロジェクトのルート ディレクトリにある .prettierrc ファイルを構成することで、カスタマイズに一致するスタイルを構成できます。ファイルのコンテンツには JSON 形式の組み合わせを使用することをお勧めします。もちろん、他の構成ファイルの名前付けと書き込み方法もサポートされています。元のドキュメントの対応するアドレスも記事の最後に記載されています。デフォルトのフォーマッタとして Prettier を選択することを忘れないでください。

プロジェクト構成で VSCode に保存するときにコードをフォーマットし、ウィンドウのステータスが変化したときに自動的に保存することもお勧めします。保存が多すぎると、不要なトラブルが発生する可能性があるためです。

#属性の紹介:

#印刷幅:

概要と説明: コード行の幅、一般的な推奨事項は、各行の最大長は 100/120 ですが、これら 2 つの数値を超えないことが最善です。

API:

printWidth
• パラメータの種類: intデフォルト値: 80
• タブの幅:

概要と説明: 各インデントのスペースの数を指定します。

API:

tabWidth
• パラメータの種類: intデフォルト値: 2
• タブ:

#概要と説明: インデントを実行するためにスペースの代わりにタブを使用するかどうか。 API:

useTabs

• パラメータの種類: bool
• デフォルト値: false
• セミコロン:

#概要と説明: コード ステートメントの最後にセミコロンを追加するかどうか。

API: semi

• パラメータの種類: bool
• デフォルト値: true
• Quotes

はじめにと説明: シングルクォートを使用するかどうか、JSX は個別に設定されます。

API: singleQuote

• パラメータの種類: bool
• デフォルト値: false
• JSX Quotes
• #概要と説明: JSX で一重引用符を使用するかどうか。

API: jsxSingleQuote

パラメータの種類: bool
• デフォルト値: false
末尾のカンマ
• #はじめにと説明: カンマで区切られた複数行の構文では、末尾にできるだけカンマを追加してください。

API:

trailingComma

パラメータの種類: es5 / none / all

• デフォルト値: es5
• #es5
• ES5 の補足 (オブジェクト、配列)

すべて をサポートします。

大括弧の間隔

• 概要と説明: オブジェクトのプロパティと中括弧の間のスペースを埋めるかどうか。
• API: bracketSpacing
• パラメータの種類: bool
• デフォルト値: true

ブラケット行

#概要と説明: 開始タグの右山括弧が属性の最終行の末尾に続くかどうか。
• 前提条件: 非自己終了タグ、HTML 複数行属性 (HTML、JSX、Vue、Angular)
• API:
• bracketSameLine
パラメータの種類: bool
• デフォルト値: false

アロー関数の括弧

概要と説明: 単一パラメータのアロー関数は使用します括弧。
• API:
• arrowParens
パラメータの種類: always /回避
• #​​##デフォルト値: always

Require Pragma

概要と説明: フォーマット ファイルの先頭に特別なコメントがあるコードのみをフォーマットするかどうか。

• API:
requirePragma
• パラメータの種類: bool
• デフォルト値: false

• /**
   * @prettier
   */
   or
  /**
   * @format
   */

プラグマの挿入

はじめにと説明: ファイルにマークを挿入するかどうかは、ファイルがフォーマットされていることを示します。

• API:
insertPragma
• パラメータの種類: bool
• デフォルト値: false

Vue ファイル スクリプトおよびスタイル タグのインデント

概要と説明: Vue ファイル、スクリプト、スタイル パーツ内のコードとタグをインデントするかどうか。

• API:
vueIndentScriptAndStyle
• パラメータの種類: bool
• デフォルト値: false

行末

概要と説明: オペレーティング システムの違いによって生じる大量のコードの差分を避けるために、改行スタイルを設定します。

• API:
endOfLine
• パラメータの種類: lf / crlf / cr / auto
• デフォルト値: lf

埋め込み言語の書式設定

概要と説明: プラグインが認識できる場合に、一部のファイルに埋め込まれているコード スニペットのスタイルを書式設定するかどうか。

• API:
embeddedLanguageFormatting
• パラメータの種類: off / auto
• デフォルト値: auto
• #単一属性Per Line

概要と説明: Html、Vue、JSX で各属性が 1 行を占めるように強制するかどうか。

API:
• singleAttributePerLine
• パラメータの種類: bool
デフォルト値: false
• end ：

整理したら、急いで保存してください。属性の使い方を忘れたときは、この記事を読んでください。これで、4 月の記事更新チャレンジは終了です. ありがとうございます。jym はいいねと励みになります。

#リンク配置:

#Prettier: https://prettier.io/

##Prettier ( vscode プラグイン): https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
設定ファイル: https://prettier.io/docs/ en /configuration.html
オンライン デバッグ: https://prettier.io/playground/
VSCode の詳細については、次のサイトを参照してください。 :
• vscode チュートリアル

  ! ！

none	補足なし
関数パラメータや関数呼び出しを含め、可能な限り補足し、TS

以上がコードを美しくするための vscode Prettier オプションの 16 の実用的な属性を見てみましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。