Prettier Code Formatter

Prettier Code Formatter

現在、Prettier は Aura コンポーネントと Lightning Web コンポーネント (LWC) のほか、.json.md.html.js などの標準ファイル形式もサポートしています。Apex に対するサポートはコミュニティで進められており、間もなく使用できるようになるものと思われます。

Aura や LWC に Prettier を使用するためには、一定の設定が必要です。

  1. プロジェクトにまだ package.json がない場合は、npm init を実行します。 デフォルトをすべて受け入れて構いません。

  2. npm install --save-dev --save-exact prettier を実行して Prettier をインストールします。

  3. プロジェクトのルートに、次の内容を記載した .prettierrc という Prettier 設定ファイルを作成します。

    注意: Aura の場合 "trailingComma": "none" 設定は必須です。

    {
      "trailingComma": "none",
      "overrides": [
        {
          "files": "**/lwc/**/*.html",
          "options": { "parser": "lwc" }
        },
        {
          "files": "*.{cmp,page,component}",
          "options": { "parser": "html" }
        }
      ]
    }
    
  4. Prettier をさらにカスタマイズするときは、他の設定オプションを追加します。

  5. VS Code 向け Prettier 拡張機能をインストールします。

  6. 全ファイルの形式が設定されていることを確認する場合は、VS Code の editor.formatOnSave 設定を有効にします。各自の設定についての詳細は、『Visual Studio Code Docs』の「User and Workspace Settings (ユーザとワークスペースの設定)」を参照してください。

  7. Apex Prettier runs slower than most other formatters. In some cases formatting will not succeed because VS Code will time out the operation after 500ms. In order to ensure Apex code has enough time to format your documents we recommend changing the VS Code settings as follows.

    {
      "editor.formatOnSaveTimeout": 5000
    }
    

変更内容を Git リポジトリにコミットするたびにファイルの形式を設定する場合は、Git フックを設定します。

Feedback or Bugs | Edit this Article