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

リントツールは、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をインストールし、コマンドラインを使う準備をします。

  1. 公式サイトからNode.jsをインストールします。
  2. コマンドラインを起動します
    (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に公開していますので、参考ください。

次のページでは、ESLintと連携してフォーマットを適用する方法について紹介します。