巷で噂のコードフォーマッター、「Prettier」を使ってみたよ

最近、仕事で使っている制作ツールのアップデートをしていて、

普段Gulpで使っているパッケージの見直しをしていました。

そこで最近ICS MEDIAのブログ記事で取り上げられていた「Prettier」を使ってみました。

Prettierとは

Node.js上で動作するコードフォーマッターです。コードフォーマッターとは簡単に言うと、各々がコーディングした、JavaScriptやHTMLなどのソースファイルをルールに沿った形にいい感じに整形してくれるツールのことです。

複数人で作業をしていると、エディタや個人のオレオレルールが違ったりすると、インデントのとり方やJavaScriptでセミコロンを付けるかなど、コーディングのルールがバラバラになりがちです。

ルールがバラバラになるとコードの見た目が汚くなったりして可読性も低くなり、メンテナンス性も低くなってしまいます。

コードフォーマッターを導入することで、これらのコードを自動的に整えてくれるので、作業者の負担にならずにルールを統一することができ、メンテナンス性が格段に向上します。

導入方法

今回、Gulpを使った環境にインストールしましたので、以下のパッケージをnpmでインストールします。

prettier
gulp-prettier-plugin

「prettier」は本体のパッケージ、「gulp-prettier-plugin」はGulpからPrettier扱うためのプラグインです。

以下のコマンドを実行してパッケージをインストールします。


npm install -D prettier gulp-prettier-plugin

インストールができたら、gulpgile.jsには以下のようなタスクを書きます。

// コードフォーマット
gulp.task('prettier', () => {
  return gulp.src(['/src/**/scss/*.{sass,scss}', '/src/**/js/*.js'])
    .pipe(prettierPlugin({  //①Prettierのオプションを指定する
      prettier:{
        singleQuote:true
      },
    }, { filter: true }))
    .pipe(gulp.dest(file => file.base))
});

今回はフォーマット形式として、文字列をすべてシングルクォートで囲むように指定をしています。

①で指定するオプションの内容は下記のページを参考にしてください。

https://prettier.io/docs/en/options.html

エディタのプラグインを使う

Prettierは各種エディタのプラグインも用意しています。

僕は普段Visual Studio Code を使っているので、こちらのインストール方法も記載しておきます。

インストール方法

Visual Studio Codeを起動して、左側のメニュー項目の一番下にある、「拡張機能」のボタンをクリックします。
検索窓に「Prettier」と入力して検索します。
検索結果に現れた「Prettier – Code formatter」をインストールします。

※検索結果には複数候補が現れますが、インストール数が一番多いものが本家のものかと思われます。

使い方

使用するには、ファイルを開いて、以下のように操作します。

「command + shift + p」を押してコマンドパレットを開きます。
コマンドパレットに「Format」と入力すると「ドキュメントのフォーマット」という項目が出てくるので、これを選択し、実行します。

フォーマットの設定

フォーマットの設定を行うには、

.prettierrcファイルにJSON形式、もしくはYAML形式でルールを記述する
.prettierrc.jsファイルにJavaScript形式でルールを記述する

のどちらかの方法で設定を行います。

設定ファイルはプロジェクトのルートに配置します。

記述方法については以下のURLを参考にしてください。

https://prettier.io/docs/en/configuration.html

導入してみて

導入する前と後では、コードの見やすさはかなり良くなりました。

自分はJavaScriptを書いているときに、行末のセミコロンを書いたり書かなかったり曖昧だったりするので、ツールで強制的に書き直されるのでコードも見やすくなりました。

そして、ESLintで怒られることもなくなりました。（ESLintのルールに合わせてるので当然か・・・）

また、PrettierはJavaScriptだけでなく、CSSやHTML、その他のフォーマットにも対応しているので、導入してコーディングのレギュレーション通りに設定すれば、後でレギュレーション通りにするために調整したりすることがなくなるので作業の効率も上がると思います。

すごくおすすめですよ〜！