フロントエンド開発には、コードを適切な形に自動整形してくれるPrettierが幅広く利用されています。
Prettierは、構文チェックツールESLintと併用して利用されることも多いため、どちらも使えるようになるとコーディングの効率性が高まります。

今回は、Prettierとは何か、導入方法についても解説していきます。

Prettier

Prettier（プリティア）とは、Node.js上で動作するコード整形ツールです。JavaScriptをはじめとし、HTML,、CSS、TypeScript、GraphQLなどでもサポートされています。
>> Prettier

コーディングを行なっているとスペルミスの発生を100%防ぐことはできません。自然に起こりえることなので気にしすぎる必要はありませんが、極力ミスは減らしたいものです。

Prettierを使えば、一定のコーディングルールに沿って自動でコードを整形してくれるため、コーディングスタイルを常に意識しなくても可読性の高いコードを作成できるようになります。

Node.js上で動作するため、ユーザーやエディタに依存せずにコードを統一できる点もメリットです。

PrettierとESLintの違い

Prettierと似たツールとして良く比較されているものにESLintがあります。

どちらも決められたコーディングスタイルに沿って動作するツールですが、明確な違いはESLintがコードを自動検証するのに対し、Prettierはコードを自動整形するという点です。

Prettierだけでは整形しきれない場合もあるため、ESLintと併用して利用することや、その逆のパターンも多くあります。目的に応じて使い分ける、または、両方使えるようになると便利です。

Prettierを導入する

ここからはPrettierの導入方法を見ていきましょう。
ESLintと組み合わせてインストールする方法もありますが、ここではPrettierのみ導入していきます。

Prettierのインストール

まずは、任意の名前でフォルダを作成し、その中にPrettierをインストールします。

$ mkdir prettier-test
$ cd prettier-test
$ yarn add --dev --exact prettier

[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
...
✨ Done in 1.35s.

次に、package.jsonファイルのscriptsに以下を追記し、Prettierの実行コマンドを設定します。

{
  ...
  "scripts": {
    "format": "prettier --write ‘src/**/*.js’"
  }
}

これでyarn formatコマンドを入力すると、srcフォルダ内のすべての.jsファイルのコードが自動整形されるようになります。

さいごに、prettierの設定です。
package.jsonファイルに指定するか、.prettierrcファイルを作成し指定することができます。
今回は、もっとも基本的な設定をpackage.jsonファイル内に設定していきます。

{
  ...
  "prettier": {
    "trailingComma": "es5",
    "tabWidth": 4,
    "singleQuote": true,
    "semi": false
  }
}

上から、末尾のコンマ、タブの幅、シングルクォートの可否、セミコロンの可否の設定です。

他にもさまざまな形式ファイルや、オプションを設定することができます。
Prettierの構成について気になる方は以下を参考にしてください。

>> Prettierの構成ファイル

Prettierでコード整形

Prettierのインストールと設定が完了したので、コード整形がされるか確認していきましょう。

プロジェクト配下にsrcフォルダを作成し、その中にindex.jsファイルを作成します。
さらにindex.jsファイル中に以下のサンプルコードを記述します。

const test = () => {
  return "test";
};

console.log(test());

では、yarn formatコマンド入力し、Prettierを実行してみましょう。

$ yarn format

実行前

const test = () => {
  return "test";
};

console.log(test());

実行後

const test = () => {
    return 'test'
}

console.log(test())

以下の変更が確認できれば成功です。

  • タブのスペースが2から4に変更
  • ダブルクォートがシングルクォートに変更
  • 末尾のセミコロンが削除

まとめ

今回は、Prettierを利用してコードを自動整形する方法を紹介しました。

Prettierは、独自のコーディングルールを設定し、それに沿って自動でコードを整形することができるため、人が見落としやすいところを拾ってくれます。

定めたコーディングルールは、jsファイルだけでなくhtmlやtsなどのさまざまな形式ファイルに適用できます。手軽に導入ができるため、ぜひ試してみてください。

Prettierの関連記事

・読みやすいコードを書くためのポイント
・構文チェックツール -ESLint