お問い合わせ
お問い合わせ
ホーム > ウェブ制作 > Prettierとは？コードを自動整形する便利ツールを解説

Prettierとは？コードを自動整形する便利ツールを解説

ウェブ制作
Prettierによってコードが自動整形され、整理された開発環境を表現したイメージ
Prettierによるコード自動整形をイメージしたアイキャッチ画像。整っていないコードが読みやすいコードへ変換される様子をモダンなデザインで表現している。

Web制作では、HTMLやCSS、JavaScriptなどのコードを読みやすく整えることが重要です。しかし、インデントや改行の位置を毎回手作業で調整するのは手間がかかります。

そこで役立つのが「Prettier（プリティア）」です。

Prettierは、コードの書き方を自動的に統一してくれるツールです。チーム開発だけでなく、個人制作でもコードの可読性や保守性を高められます。

この記事では、Prettierの概要から導入方法、基本的な使い方までをわかりやすく解説します。

Prettierとは

Prettierとは、ソースコードを自動整形するツールです。

あらかじめ決められたルールに従って、インデントや改行、スペースなどを統一してくれます。

対応している主な言語は以下のとおりです。

  • HTML
  • CSS
  • SCSS
  • JavaScript
  • TypeScript
  • JSON
  • Markdown
  • YAML

コードの見た目を統一できるため、誰が書いても同じスタイルになります。

Prettierを使うメリット

コードの見た目が統一される

人によって書き方は異なります。

例えば、以下のようなコードでも動作に問題はありません。

function hello(){console.log("Hello")}

Prettierで整形すると、次のようになります。

function hello() {
  console.log("Hello");
}

コードが読みやすくなり、メンテナンスしやすくなります。

手動で整形する必要がなくなる

改行やインデントを意識する必要がなくなります。

保存時に自動整形する設定にしておけば、コードを書くだけで整った状態になります。

チーム開発でコードスタイルを統一できる

複数人で開発すると、コードの書き方に差が出ることがあります。

Prettierを使えば、全員のコードが同じスタイルになるため、レビューしやすくなります。

対応している言語が多い

HTMLやCSSだけでなく、JavaScriptやJSON、Markdownなども同じルールで整形できます。

Web制作全体で活用できる便利なツールです。

Prettierのインストール方法

Node.jsとnpmが利用できる環境で、以下のコマンドを実行します。

npm install --save-dev prettier

グローバルにインストールすることもできますが、プロジェクトごとに管理するため、通常は開発用依存関係としてインストールします。

Node.jsやnpmについては、以下の記事も参考になります。

Prettierでコードを整形する方法

コマンドラインから整形する場合は以下のように実行します。

特定のファイルを整形する

npx prettier --write index.html

JavaScriptファイルをまとめて整形する

npx prettier --write "*.js"

プロジェクト全体を整形する

npx prettier --write .

指定したファイルやフォルダ内のコードが自動的に整形されます。

VS CodeでPrettierを使う方法

Visual Studio Codeでは、拡張機能を利用すると簡単に導入できます。

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

拡張機能から以下をインストールします。

  • Prettier – Code formatter

2. 保存時に自動整形する

設定で「Format On Save」を有効にします。

{
  "editor.formatOnSave": true
}

これでファイルを保存するたびに自動整形されます。

VS Codeについては、以下の記事もおすすめです。

.prettierrcで設定を変更する

プロジェクトごとに整形ルールを変更したい場合は、.prettierrcを作成します。

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80
}

主な設定項目は以下のとおりです。

項目内容
semiセミコロンを付けるか
singleQuoteシングルクォートを使うか
tabWidthインデント幅
printWidth1行の最大文字数

プロジェクトに合わせて柔軟に設定できます。

.prettierignoreで除外する

整形したくないファイルは.prettierignoreに記述します。

dist
node_modules
*.min.js

Gitの.gitignoreと同じような感覚で利用できます。

ESLintとの違い

PrettierとESLintは似ていますが、役割が異なります。

ツール役割
Prettierコードの見た目を整える
ESLintコードの品質やルールをチェックする

Prettierは整形専用、ESLintは文法や品質のチェックが中心です。

両方を組み合わせることで、読みやすく品質の高いコードを維持できます。

ESLintについては、以下の記事も参考になります。

Viteプロジェクトでも利用できる

PrettierはViteで作成したプロジェクトでも問題なく利用できます。

以下のような構成でもそのまま使用可能です。

project
├─ src
├─ index.html
├─ package.json
├─ vite.config.js
└─ .prettierrc

Viteについて詳しく知りたい場合は、以下の記事もおすすめです。

よくある質問

Prettierは無料で使える？

無料で利用できます。

HTMLやCSSも整形できる？

できます。

HTML、CSS、SCSS、JavaScriptなど幅広い言語に対応しています。

VS Code以外でも使える？

利用できます。

JetBrains系エディタやコマンドラインからも使用可能です。

ESLintだけではダメ？

ESLintはコード品質のチェックが目的です。

コードの見た目を統一するなら、Prettierとの併用がおすすめです。

まとめ

Prettierはコードを自動整形してくれる便利なツールです。

主なメリットは以下のとおりです。

  • コードの見た目を統一できる
  • 可読性が向上する
  • 手動で整形する必要がなくなる
  • 保存時に自動整形できる
  • ESLintと組み合わせて利用できる

特にVS Codeとの相性が良く、一度設定してしまえば日常のコーディング効率が大きく向上します。

Web制作を快適に進めるためにも、早い段階で導入しておきたいツールのひとつです。

関連記事