Prettier を使用して Vue でコードをフォーマットする方法

Vue は、Web 開発で広く使用されている人気のある JavaScript フレームワークです。日常の開発では、統一されたコード スタイルを維持するためにコードをフォーマットする必要があります。 Vue では、Prettier プラグインを使用してコードを簡単にフォーマットできます。

Prettier は、コードを自動的にフォーマットするのに役立つコードフォーマットツールです。コード形式を手動で変更する場合と比較して、Prettier を使用すると作業効率が大幅に向上し、コード スタイルの一貫性が確保されます。

Vue プロジェクトで Prettier を使用する手順は次のとおりです。

ステップ 1: Prettier プラグインをインストールする

npm または Yarn を使用して Prettier をインストールできます。コマンド ライン (例:

npm install --save-dev prettier

Or:

yarn add --dev prettier

) インストールが完了したら、プロジェクトのルート ディレクトリに .prettierrc ファイルを作成し、その中で Prettier のパラメータを構成します。たとえば、ファイル タイプを Vue に設定し、インデントを 2 つのスペースに指定できます。

{
  "parser": "vue",
  "tabWidth": 2
}

ステップ 2: エディターを構成する

エディターで Prettier プラグインを構成する必要があるため、これを使用してコードを簡単にフォーマットできるためです。 VS Code、Sublime Text、Atom などの一般的に使用されるコード エディターは、Prettier プラグインを使用できます。

VS Code を例として、「設定」で「Prettier」を検索し、次のように設定する必要があります:

"editor.formatOnSave": true,
"[javascript]": {
  "editor.formatOnSave": false
},
"[vue]": {
  "editor.formatOnSave": true,
  "prettier.tabWidth": 2
}

ここでの設定とは、Vue ファイルを保存するときのことを意味します。 , Prettier が自動的に使用されます。コードをフォーマットし、インデントにはスペース 2 つを使用します。同時に、JavaScript ファイルを保存する際の自動フォーマットは禁止されます。

ステップ 3: Prettier を使用してコードをフォーマットする

Prettier のインストールと構成が完了したので、エディターで Vue ファイルを保存すると、コードは自動的にフォーマットされます。

さらに、コマンド ラインを使用して Prettier を使用してコードをフォーマットすることもできます。たとえば、次のコマンドを使用して、プロジェクト全体のコードをフォーマットできます。

prettier --write "src/**/*.vue"

このコマンドは、「src」ディレクトリ内のすべての Vue ファイルをバッチでフォーマットできます。

概要

Prettier を使用すると、Vue プロジェクトのコードを簡単にフォーマットできるため、コード フォーマットを手動で変更する時間を節約できると同時に、コード スタイルの一貫性も確保できます。上記の手順に従うだけで、Prettier を簡単に使用できるように設定できます。

以上がPrettier を使用して Vue でコードをフォーマットする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。