vscode で Prettier Code プラグインを使用する詳細なチュートリアル

vscode で Prettier Code プラグインを使用する詳細なチュートリアル

なぜprettierを使うのですか?

大企業では、フロントエンド開発コードに独自のコード標準がある場合があります。独自のコード標準を迅速に生成するにはどうすればよいでしょうか? Prettierを使用するのがより良い選択です!

Prettier Code プラグインをインストールするにはどうすればいいですか?

ここに画像の説明を挿入

サイドバーの最後のオプションで、検索バーで Prettier Code を検索してインストールします。

プロジェクトでの設定方法

新しいプロジェクトでは、2 つの新しい構成ファイルを作成できます。1 つは .prettierignore ファイルで、ファイルを無視するための .gitignore ファイルに似ています。もう 1 つは .prettierrc.js ファイルで、コード検証ルールを構成するために使用されます。

.prettierignoreは以下のように設定されます

**/*.md
**/*.svg
**/*.ejs
**/*.html
パッケージ.json
.ウミ
.umiプロダクション
.umi-テスト

.prettierrc.jsは次のように設定されます

モジュール.エクスポート = {
    // 1行に最大100文字まで含めることができます printWidth: 100,
    // インデントにはスペース2つを使用します tabWidth: 2,
    // インデント文字を使用せず、スペースを使用する useTabs: false,
    // 行末にセミコロンが必要です。semi: true,
    // シングルクォートを使用する singleQuote: true,
    // オブジェクトキーは必要な場合にのみ引用符で囲まれます quoteProps: 'as-needed',
    // jsx は一重引用符ではなく二重引用符を使用しますjsxSingleQuote: false,
    // 末尾のカンマは不要 trailingComma: 'all',
    // 中括弧の先頭と末尾にはスペースが必要です。bracketSpacing: true,
    // jsx タグの逆山括弧は囲む必要があります jsxBracketSameLine: false,
    // 矢印関数では、パラメータが 1 つしかない場合、括弧も必要です。arrowParens: 'always'、
    // 各ファイル形式の範囲はファイルの内容全体です。rangeStart: 0,
    範囲終了: 無限大、
    // ファイルの先頭に @prettier を書く必要はありません
    プラグマを要求: false、
    // ファイルの先頭に@prettierを自動的に挿入する必要はありません
    挿入プラグマ: false、
    // デフォルトの行折り返し標準を使用する proseWrap: 'preserve',
    //表示スタイルに基づいて HTML をラップするかどうかを決定します htmlWhitespaceSensitivity: 'css',
    // 改行には lf を使用する
    行末: '自動'、
};

これですべての設定が完了しました。コードを記述するたびに、右クリックして「ドキュメントのフォーマット」を選択します。

これで、vscode で Prettier Code プラグインを使用する詳細なチュートリアルに関するこの記事は終了です。vscode で Prettier Code を使用する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • vscode で eslint と prettier を正しく設定する
  • vscode の Prettier プラグインを使用してコードを使用して構成をフォーマットする方法の詳細な説明
  • vscode は vue+vetur+eslint+prettier の自動フォーマット機能を設定します
  • vscode での eslint プラグインの設定 (prettier 設定が無効)

<<:  Alibaba Cloud イメージリポジトリの Docker 構成変更の実装

>>:  MySQL 5.7.29 + Win64 解凍バージョンのインストールチュートリアル(画像とテキスト付き)

推薦する

SQL 文における複合主キーと結合主キーに関する予備的研究

1. 複合主キーいわゆる複合主キーとは、テーブルの主キーが複数のフィールドで構成され、ビジネス上の意...

CSS クラスと ID の一般的な命名規則

ページの公開名: #wrapper - ページの外側の端が全体のレイアウト幅を制御します#conta...

Tomcat サーバーの応答が遅い場合の解決策

1. 分析的思考1. 機械自身の理由を排除する2. サーバーパフォーマンス分析3. プロジェクト自体...

Nginx ログのカスタマイズとログ バッファの有効化の詳細な説明

序文ウェブサイトのアクセス元をカウントしたい場合は、PHP を使用して情報を取得してデータベースに記...

Vue3 はメッセージコンポーネントの例を実装します

目次コンポーネント設計最終的なコンポーネントAPIの定義コンポーネント構造の定義テンプレートとスタイ...

Tomcatサーバーのセキュリティ設定方法

Tomcat は、Java Community Process を通じて Sun が開発した、広く使...

MYSQL の 3 つのツリー構造テーブル設計の長所と短所の簡単な分析と共有

目次導入質問設計 1: 隣接リストテーブルデザインSQL の例デザイン 2: パスの列挙テーブルデザ...

CSS で overflow-y: visible; が機能しない理由の分析と解決

シナリオ最近の要件は、モバイル デバイス用の h5 ページです。これには、選択可能なカードの行が必要...

iptables および firewalld ツールを使用して Linux ファイアウォール接続ルールを管理する

ファイアウォールファイアウォールは一連のルールです。パケットが保護されたネットワーク空間に出入りする...

Linuxで相対パスを表現する方法

たとえば、現在のパスが /var/log で、/usr ディレクトリに移動する場合は、次のコマンドを...

MySQLデータベースのストアドプロシージャとトランザクションの違い

トランザクションは、複数の SQL ステートメントの原子性、つまり、それらが一緒に完了するか、一緒に...

MySQL で union all を使用してユニオンソートを取得する方法

プロジェクトでは、何らかの不可逆的な理由により、テーブルに保存されたデータがページの表示要件を満たす...

ローカルストレージにブール型の値を保存する際の落とし穴を解決する

LocalStorageはブール値を保存します今日、ブール値データを保存するために localsto...

Mysql-connector-java ドライバのバージョン問題の概要

Mysql-connector-java ドライバのバージョンの問題私のデータベースのバージョンは ...

CSS フロントエンドの知識ポイントのまとめ(必読)

1. CSS の概念: (カスケーディング スタイル シート)利点: 1. コンテンツとプレゼンテ...