calendar

VS CodeのPrettierでファイルをフォーマットから除外する方法

category VS Code
tag VS Code tag Prettier
toc目次

Prettierでファイルをフォーマットから除外する

無視リストの作成

プロジェクトのルートディレクトリに.prettierignoreファイルを作成します。

プロジェクト/
  └── .prettierignore

特定のファイルを除外

/css/sample.cssを除外する場合は、.prettierignoreにファイルのパスを記載します。

/css/sample.css

特定の拡張子を除外

HTMLファイルをすべて除外したい場合は、正規表現を使用して以下のように記載します。

**/*.html

コードの一部をフォーマットの対象外とする

専用のコメントをコードに入れることにより、コードの一部をフォーマットから除外できます。

JavaScript

JavaScriptのコメントに// prettier-ignoreを記載すると、コードの一部をフォーマットから除外できます。

📝 フォーマット前

matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

// prettier-ignore
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

📝 フォーマット後

matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);

// prettier-ignore
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

HTML

HTMLのコメントに<!-- prettier-ignore -->を記載すると、コードの一部をフォーマットから除外できます。

📝 フォーマット前

<div class="sample"><a href="/sample.html">sample</a></div>

<!-- prettier-ignore -->
<div class="sample"><a href="/sample.html">sample</a></div>

📝 フォーマット後

<div class="sample">
  <a href="/sample.html">sample</a>
</div>

<!-- prettier-ignore -->
<div class="sample"><a href="/sample.html">sample</a></div>

CSS

CSSのコメントに/* prettier-ignore */を記載すると、コードの一部をフォーマットから除外できます。

📝 フォーマット前

body { margin: 0; padding: 0; }

/* prettier-ignore */
p { margin: 0; padding: 0; }

📝 フォーマット後

body {
  margin: 0;
  padding: 0;
}

/* prettier-ignore */
p { margin: 0; padding: 0; }

参考