JSだとかをフォーマッターPrettierを使って整形する

Terralien

2022年4月7日 02:14

こんばんは。インフラ・フロントエンド・バックエンドの知識を広く浅く齧ってる寺です。

JavaScript開発環境において必須と言われるESlintとPrettier、前回ESLintをなんとなく学んだので今回はPrettierについて勉強したいと思います。

正直最初に聞いたときは（プリキュア？）と思いましたが言いませんでした。空気読んだ。

前回のあらすじ

ESLintというのは構文間違いなどをチェックしたり修正したりできるツールです。

それでPrettierって？

英単語できれいって意味ですが、Code Formatterというなんかフォーマットに準じてコードを直してくれるツールだそうです。

ESLintと何が違うんじゃいと思った時期もありました。

[公式]には

保存することでコードが整形されます。
コードレビューでスタイルを議論する必要がありません。
時間や労力を節約します。

といった特徴が書かれていました。なるほど？

要するに？

コードスタイルの一貫性を保てるためチーム開発とかで威力を発揮するツールです。

Eslintも便利なのですが、それだけでは整形できないコードもあるため併用するのが良いとされています。

※エラー表示はされるものの整形まではしてくれないなど。

また、オプションが少なくデフォルトのままでもしっかり整形されます。

ともあれ構文チェックはEslint、整形はPrettierなんで両方使います。

とりあえずインストール方法

まずはプロジェクトに見立てて適当なディレクトリを作成し移動
ディレクトリを初期化
インストールコマンド

といった手順でインストールします。

mkdir prettier-test
cd prettier-test
npm init -y
npm install prettier --save-dev --save-exact

私は失敗が怖いのでとりあえず仮想環境Envaderにインストールします。

formatコマンドを便利に使えるようするため、設定ファイルである`package.json`の編集・追加をします。

以下は`scripts`に`prettier --write 'ファイル名'`コマンドを`format`という短縮コマンドで使用できるようにしています。

$ cat package.json
{
  "devDependencies": {
    "prettier": "2.6.2"
  },
    "scripts": {
                "format": "prettier --write 'src/**/*.js'"
    }
}

※'src/**/*.js'の部分に整形したいディレクトリ・ファイルを指定します。

使い方

まずは整形前のファイルを見てみます。

$ cat main.js
function getNow() {var now = new Date();var year = now.getFullYear();
        var month = now.getMonth() + 1;
                                       var day = now.getDate();
        var hour = now.getHours();
                                       var min = now.getMinutes();
        var sec = now.getSeconds();var m = year + "/" + month + "/" + day + "/" + hour + ":" + min + ":" + sec;
                                       return m;
}

                                                      console.log("Timestamp:",getNow())

なかなかひどいですね。
package.jsonで設定した`format`を使用し`npm run format`を実行して`main.js`を見てみます。

npm run format
$ cat main.js
function getNow() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDate();
  var hour = now.getHours();
  var min = now.getMinutes();
  var sec = now.getSeconds();
  var m = year + "/" + month + "/" + day + "/" + hour + ":" + min + ":" + sec;
  return m;
}

console.log("Timestamp:", getNow());

きれいに整形されました。簡単ですね！

コード参考：Prettier

学んだこと

ESLintとPrettierの2つを使う理由、それぞれ構文チェック・整形という役割がある
インストール方法と使い方

以前Reactをちょっといじったときに環境に入っていたので意識せず使っていたようですｗ