コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > 開発ツール > VSCode > 本文

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

青灯夜游
リリース： 2022-05-10 21:18:16
転載
5065 人が閲覧しました

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

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

Prettier を見てみましょう

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

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

Prettier

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

VSCode

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

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

コードを美しくするための vscode Prettier オプションの 16 の実用的な属性を見てみましょう。 プロジェクト構成で VSCode に保存するときにコードをフォーマットし、ウィンドウのステータスが変化したときに自動的に保存することもお勧めします。保存が多すぎると、不要なトラブルが発生する可能性があるためです。

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

#属性の紹介:

#印刷幅:

概要と説明: コード行の幅、一般的な推奨事項は、各行の最大長は 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 サイトの他の関連記事を参照してください。

関連ラベル：
vscode
ソース：juejin.cn
前の記事：vscode でコード スニペットをカスタマイズしてコーディングを高速化する方法について話しましょう。 次の記事：vscode スマート プロンプト プラグインの共有:nutui-vscode-extension
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
数独チェッカーが動作しないのですが？エラーの特定を手伝ってくれる人はいますか? オンラインエディターですべてを試しましたが、それでもエラーが発生します。しかし、私のマシンのVSCodeでこれを実行すると、正常に動作します。混乱していて、バグを見つけずにコードを...
から 2024-04-06 21:21:07
0
1
474
私のページには HTML にタイトルがありますが、表示されません 私はコーディングを始めたばかりなので、私を批判しないでください。 vscodeを使用してWebサイトを作成しようとしています。HTMLとCSSを使用していますが、コードの左上隅に配...
から 2024-04-01 18:24:53
0
1
364
VSCode id 属性をカスタマイズするにはどうすればよいですか? 最近 Atom から VSCode に移行しました。エディタの大部分を自分の好みに合わせてカスタマイズすることができましたが、気に入っている Atom の機能がまだ欠けています。そ...
から 2024-03-31 14:13:45
0
1
373
/bin/sh: 1: C:xamppphpphp.exe: 見つかりません 私はWSL2、Ubuntu20.04を使用し、VSCodeを実行しています。 Windows 上の VSCode および XAMPP で CodeRunner 拡張機能を使用してお...
から 2024-03-31 09:10:37
0
1
333
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート