Prettierについて調査 - 30歳SIerからWEBエンジニアで奮闘

最近エディタをsublimeからvscodeに変更しました。
その中でPrettierも適用することになったので、こいつのことを理解しようとおもうようになりました。

はじめはimport内のタブサイズが4になってたりと思うどおりに動かなくて断念かと思ったが、再インストールしてようやく想定したとおりに動いてくれたので、安心。

Prettierとはなにか?

Prettierは、ソースをいい感じに整形してくれるツールである。
linterと非常によく似たポジションだと思える。これを使えばプロジェクト内のコーディングスタイルを統一的にできるわけだ。自分であっても先週と今週の書き方が異なったりするのでその差をなくしてくれる。

eslintと併用する

早速Prettierをつかってみよう

1. インストール
何はともあれ、必要なものをインストール。 eslintのインストールと設定は、以前の記事をみてほしい。

npm i -D prettier
npm install eslint-config-prettier eslint-plugin-prettier -D

2. eslintの設定にprettierの設定を追加する

.eslintrc.json

{
  "extends": [
    "airbnb",
    "plugin:prettier/recommended" // <- prettierを使うことを宣言
  ],
  "rules": {
    "prettier/prettier": [
    "always",
    // prettierのオプションをここに入れる
    {
      "singleQuote": true,
      "trailingComma": "es5",
      "semi": true,
      "bracketSpacing": true
    }
    ]
  }
}

3. 動作確認 npm scriptsにprettierを登録して、npm run fmtで実行してみる。

修正前

// flow
const obj = {
  key1: 'singleQuote',  // 問題なくシングルウォートを利用してる
  key2: "doubleQuote",  // 誤ってダブルクォートを利用してる
    key3: "tabSize4",   // タブのサイズが4と異なる
  key4: "notComma"      // 最後に,がない
};

const {key1, key2} = obj;  // 中括弧内にスペースがない

// 無駄な改行がある

// 1行が長すぎる関数
function doSomething(argument1: Array<Object>, argument2: boolean, argument3: boolean): string {
  return 'result'   // 最後にセミコロンなし
}

修正後

// flow
const obj = {
  key1: 'singleQuote',
  key2: 'doubleQuote',
  key3: 'tabSize4',
  key4: 'notComma',
};

const { key1, key2 } = obj;

function doSomething(
  argument1: Array<Object>,
  argument2: boolean,
  argument3: boolean
): string {
  return 'result';
}

以上のようにコード上に問題はないが、みやすさ的な保証を担保してくれるわけだ。

なぜeslint --fixではダメなのか? 何が違うのか?

How does it compare to ESLint/TSLint/stylelint, etc.?にあるように、 linterが適用するルールには２つのタイプがあって、
prettierはその一方を楽にするもの。

2タイプというのは、
1. Formatting rules(eg: max-len, keyword-spacing, ...)
2. Code-quality rules(eg: no-unused-vars, no-extra-bind, ...)
のことであり、prettierが扱うのは前者のほうで、
コードの品質的に問題はないが、チーム内でのスタイルルールが異なる問題を自動的に解決してくれるものといわけだ。

たとえば公式の説明をつかえば、次のコードはコード上問題ない。

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

だからlinterで修正はされないが、読みにくさというものはのこる。これをprettierならば、次のように整形してくれるわけだ。

foo( 
  reallyLongArg(), 
  omgSoManyParameters(), 
  IShouldRefactorThis(), 
  isThereSeriouslyAnotherOne() 
);

vscodeのprettierの設定

1. 拡張機能のインストール
ext install esbenp.prettier-vscode

2. prettier設定反映
設定方法は、以下の通り複数存在するが、今回は3の設定を紹介する. エディタに依存することなく、npm scriptsで確実に動作をするのを確認してから進められ、さらにeslintrcの設定をそのまま活かしたいからである。

基本設定 > 設定のsetting.jsonに記述
プロジェクトの.prettier.jsonに記述
eslintrc内のprettier設定箇所に記述

3. 保存時にprettier適用
最後に、ファイル保存時にprettierが自動的に実行されるように設定。

settings.json

  ...
  "prettier.eslintIntegration": true,
  "[javascript]": {
    "editor.formatOnSave": true
  },
  ...

以上で完了。あとはいつもどおりに書けばよい。 prettierのoptionについてはまた調べよう。

参考サイト
- Prettier 入門～ESLintとの違いを理解して併用する～
- 公式サイト

目次

Prettierとはなにか?

eslintと併用する

なぜeslint --fixではダメなのか? 何が違うのか?

vscodeのprettierの設定