Prettierの導入方法 - フロントエンド開発で必須のコード整形ツール

Prettierの導入方法
フロントエンド開発で必須のコード整形ツール

2019年6月6日メンテナンス済み / 株式会社ICS 渡邊真耶

Prettier

Prettierとは、Node.js上で動作するコードフォーマッターです。2017年1月にリポジトリが開設されてからわずか1年で2万Starを集めており、ReactやBabel、Material-UIなど著名なプロダクトでも採用され話題になっています。本記事ではPrettierの利点と使い方を紹介します。

コードフォーマッターの必要性

複数人で開発を行っている場合、各々が自由にコードを書いてしまうと、さまざまな書き方が混在し統一性のない読みづらいコードとなってしまいます。統一されていないコードは、可読性が低くメンテナンス性が悪くなり、ミスが発生する原因となることもあります。

コードフォーマッターを利用すると、自動的に決められたコードスタイルに整形してくれるため、開発者はコードスタイルを意識することなくコーディングに集中でき、可読性の高いコードを作成できます。

Prettierを導入する利点

コードフォーマッターは、WebStormやVisual Studio Codeなどのウェブ制作のエディターにも付属していますが、これらはユーザー環境に依存します。つまり、開発者によりエディターが違うとコードフォーマットを統一することは難しい場合があります。PrettierはNode.js上で動作するため、ユーザー環境に依存することなく、プロジェクト単位でコードフォーマットを統一できます。

Prettierは、JavaScriptだけでなくウェブのさまざまな言語にも対応しています。

コードフォーマッターの役割

コーディングスタイルを統一させるための手法として、以下の3つ方法があります。

EditorConfig
リントツール（ESLint, TSLint など）
コードフォーマッター（Prettier など）

EditorConfigは、エディターのインデントや文字コード、改行コードなどの基本的な設定を定義し、異なるエディター間でも共有できる手法です。

リントツールは、EditorConfigと比べて細かい指定ができ、if文の括弧の前後に空白を入れるかや改行位置の指定などの定義ができます。指定したフォーマットから外れていれば、警告やエラーを出します。--fixオプションを指定すると、スペースなどのスタイル違反を自動的に修正することもできます。

コードフォーマッターは、定義したフォーマットに自動的に整形してくれます。リントツールと役割がかぶる所がありますが、リントツールだけでは整形できない箇所もあります。たとえば、Prettierではコードの1行の長さを考慮して可読性が高くなるように変換してくれます。

次のようなコードが記述されていた場合、Prettierでは可読性が高くなるようにそれぞれ改行をいれた形で整形します。

▼ 整形前

let   hoge  = func (
  parameter1,   parameter2, parameter3,    parameter4,
 parameter6,  parameter7,
       parameter8,
            );

▼ 整形後

let hoge = func(
  parameter1,
  parameter2,
  parameter3,
  parameter4,
  parameter6,
  parameter7,
  parameter8
);

また、逆にコードフォーマッターでは整形しきれない箇所もあるため、リントツールとコードフォーマッターをあわせて利用できると理想的です。

Prettierから公式に提供されているprettier-eslintを使用すると、Prettierで整形したコードをESLintに受け渡すことができるため、リントツールとコードフォーマッターの両方の恩恵を受けることができます。

Prettierの導入手順

次の通り、Node.jsをインストールし、コマンドラインを使う準備をします。

公式サイトからNode.jsをインストールします。
コマンドラインを起動します
(macOSだと「ターミナル」、Windowsだと「コマンドプロンプト」)

次に、コンテンツのファイル一式が保存されるフォルダー（以下、プロジェクトフォルダーと呼びます）を任意の場所に作成し、コマンドラインでその場所に移動します。cdコマンドで任意のフォルダーまで移動しましょう。

▼ Windowsでの移動

cd C:¥Users¥MyName¥myproject

▼ macOSでの移動

cd /Users/MyName/myproject

Prettierを実行するために、次のコマンドでPrettier本体をインストールします。npm i（省略せずに記述するとnpm install）はインストールの命令、-Dはインストール先をdevDependenciesにするための指定、prettierはインストールする対象です。

npm i -D prettier

package.jsonファイルのscriptsには、Prettierの実行コマンドを追加します。--writeオプションを指定することで、整形した内容で上書き保存をしてくれます。コードフォーマッターを適用する対象はsrcフォルダー配下の拡張子が.jsのファイルが対象となるように指定しています。

▼package.jsonファイル

{
  "scripts": {
    "format": "prettier --write 'src/**/*.js'"
  },
  "devDependencies": {
    "prettier": "^1.10.2"
  }
}

以上で準備は完了です。コマンドラインから次のコマンドを実行してみましょう。フォーマットが自動的に適用されることが確認できます。

npm run format

ここまでの手順をサンプルファイルとしてGitHubに公開していますので、参考ください。

サンプルのソースファイル（sample-prettier）

ESLintと連携してフォーマットを適用する

前述の通り、Prettierはリントツールと組み合わせて使用できるため、すでにESLintを使用しているプロジェクトでもコンフリクトを起こすことなく使用できます。

ESLintと組み合わせて使用するには、prettier-eslintとprettier-eslint-cliが必要になります。今回はESLintの一例として、Google JavaScript Style Guideに準拠したリントチェックを行ってみましょう。eslint-config-googleを使います。

コマンドラインより次のコマンドを実行しインストールを行います。

npm i -D prettier-eslint prettier-eslint-cli eslint-config-google

次に、ESLintの設定ファイルを作成します。プロジェクトフォルダーのルートに、次の内容で.eslintrc.jsonというファイルを作成してください。Google JavaScript Style Guideに準拠したECMAScript 2018の仕様でリントチェックを行うように定義しています。

▼.eslintrc.jsonファイル

{
  "extends": ["google"],
  "parserOptions": {
    "ecmaVersion": 2018
  }
}

package.jsonファイルに定義したscriptsを、次の通りprettier-eslintを使用したコマンドに変更します。このコマンドにより、Prettierで整形したコードをESLint（eslint --fix）に受け渡すことができるため、PrettierとESLintの両方の処理を適用できます。

▼package.jsonファイル

{
  "scripts": {
    "format": "prettier-eslint --write 'src/**/*.js'"
  },
  "devDependencies": {
    "eslint-config-google": "^0.13.0",
    "prettier-eslint": "^8.8.2",
    "prettier-eslint-cli": "^4.7.1"
  }
}

以上で準備は完了です。コマンドラインから次のコマンドを実行してみましょう。Prettierで整形したコードがESLintに渡され、ESLint側の整形も適用されることが確認できます。

npm run format

ここまでの手順をサンプルファイルとしてGitHubに公開していますので、参考ください。

サンプルのソースファイル（sample-prettier-eslint）

▲サンプルの実行例。ぐちゃぐちゃのJSをコード規約「Google JavaScript Style Guide」にあわせ整形している。

おわりに

整形したコードが好みでない、コードフォーマッターのカスタマイズに時間をかけたくない、自分でコードを整形しているから必要ないといった意見も考えられます。しかし、コード整形ツールを使うとルールに基づいて自動的に整形されるため、人が見落としがちなところも漏れなく整形できる利点があります。

PrettierはNode.jsで動作するため、エディターに依存せず容易に導入できます。また、公式ドキュメントにも記載されている通り、Gitへのコミット前に自動的に処理を走らせることもできるため、現行の開発フローへの影響もなく導入可能です。是非この機会にお試しください。

※本記事は2019年6月現在最新のPrettier 1.17.1で検証しています

※この記事が公開されたのは2年6ヶ月前ですが、 2019年6月6日に内容をメンテナンスしています。