コードベースと VSCode に Prettier をインストールする方法

より美しく

Prettier は、複数の言語をサポートする独自のコード フォーマッタです。

Prettier を使い始めて以来、Prettier なしでコードを作業することはもうやめました。最初はいくつかの懸念がありましたが (たとえば、強制的な線幅など)、デフォルト設定が気に入りました。

Prettier のインストールと構成

Prettier のインストールは簡単です。手順を簡単に説明します。公式のインストール ガイドに従うこともできます。

まず、prettier の正確なバージョンをローカルにインストールする必要があります。これにより、全員がプロジェクト内のコードのフォーマットに全く同じ バージョンを使用することが保証されます。

npm install --save-dev --save-exact prettier

次に、Prettier 構成ファイル .prettierrc および .prettierignore (オプション) をプロジェクトのルートに作成する必要があります。

次のコマンドを実行すると、空のオブジェクトを含むデフォルトの構成ファイルを作成できます:

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

.prettierignore ファイルは .gitignore ファイルと同じように機能します。実際、Prettier はすでに .gitignore に設定されているルールに従っているため、必要ないかもしれません:

?デフォルトでは、prettier はバージョン管理システム ディレクトリ (「.git」、「.sl」、「.svn」、および「.hg」) および node_modules 内のファイルを無視します (--with-node-modules CLI オプションが指定されていない限り)。 Prettier は、実行元と同じディレクトリに「.gitignore」ファイルが存在する場合、そのファイルで指定されたルールにもに従います。

すべての HTML ファイルをスキップする .prettierignore の例を次に示します。

# Ignore all HTML files:
**/*.html

すべての既存のコードをフォーマットする

コードベース全体のフォーマットを続行する前に、変更をコミットしてください。また、多くのファイルが影響を受けるため、開いているすべてのプル リクエストをマージすることをお勧めします。

次に、プロジェクトのルート フォルダーで次のコマンドを実行して、すべてのファイルをフォーマットします。

npx prettier . --write

ℹ️ ここで npx を使用すると、ローカルにインストールされたバージョンの Prettier が確実に実行されます。これは、Prettier もグローバルにインストールされている場合に重要です。

これで、すべてのプロジェクト ファイルが適切にフォーマットされるはずです。 ?✨

Prettier VSCode 拡張機能をインストールする

次に、IDE 用の Prettier プラグインをセットアップできます。私は Visual Studio Code を使用していますが、他の多くのエディタ用のプラグインもあります。

VSCode の場合は、次の拡張機能をインストールします: esbenp.prettier-vscode

それが完了したら、VSCode 設定に移動して「フォーマッタ」を検索します。ここで、Default Formatter を esbenp.prettier-vscode に設定できます。

ただし、私のように、さまざまなプロジェクトに取り組んでいて、そのすべてに Prettier が含まれていない場合は、おそらくデフォルト設定 (なし) のままにするでしょう。

代わりに、使用するプロジェクトのローカル VSCode 設定ファイル (.vscode/settings.json) でデフォルトのフォーマッタを設定できます。

言語固有のグローバル VSCode 設定がローカル構成によって確実にオーバーライドされるようにするには、言語ごとに個別に defaultFormatter を指定する必要がある場合があります。

参考用の .vscode/settings.json の例を次に示します。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

以上がコードベースと VSCode に Prettier をインストールする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。