Prettier でコードフォーマットを統一しよう

11454 ワード
JavaScript HTML prettier SublimeText CSS HTML テキストリンク

  • 元々 Qiita:Team に投げた文章であるため、表現が身内を意識したものが多くあります

Prettier とは

  • Prettier · Opinionated Code Formatter
  • コードフォーマッタ
  • HTML, CSS, Sass, JavaScript, TypeScript, JSX, JSON, Markdown に対応している（弊社で使っているやつでいうと）
  • 対応についてはここ見て What is Prettier? · Prettier
  • これ入れたら、あーインデントずれてるー とかなくなるし
  • マークアップエンジニア、フロントエンドエンジニアは導入したらよいのではないかと思って筆をとった次第
  • JS の代表的なプロジェクトで使われている

  • 個人的にはこれからずっと使っていくつもり

コードフォーマッタとは

  • コードを整形してくれる
  • ミスって <head>, <body> を <html> で囲っていないのは見逃してくれ

  • HTML, CSS ではインデントを整えたり無駄な空白を削除したり、というのが多いけど、特に JS で効果的だと感じた
  • JavaScript の例

  • これが
var aaaa =              'aaaaaa'


foo({ aa: 111, bbb: 4234242,})

foo(111, 
    {
        hogehoge: fooo
    }
)
  • こうなっているんす
var aaaa = "aaaaaa";

foo({ aa: 111, bbb: 4234242 });

foo(111, {
  hogehoge: fooo
});
  • 最後の foo の引数のオブジェクトのところポイント高いっすね

導入

  • ここに書いてある https://prettier.io/docs/en/install.html
  • npm install --save-dev --save-exact prettier をプロジェクト単位でしたら良いです（yarn を使いたい人は上のリンク見て）
  • gulp や sass と入れ方いっしょ
  • これで導入できたんだけど、これでは CLI から使えるのみ
  • ./node_modules/prettier/bin/prettier.js index.css とかで使えるだけってこと
  • エディタと連携させたい！ エディタ上でフォーマットしてほしい！ ファイル保存時にフォーマットしてほしい！

エディタとの連携

  • 弊社マークアップエンジニア、フロントエンドエンジニアが使っているエディタはだいたいサポートされていると思います
  • サポートされているエディタの例
  • この記事では、特に多いと思われる Sublime Text での導入方法を書きます
  • 他 使っている人はここ見て → Editor Integration · Prettier

Sublime Text での導入

Sublime Text で使う

コマンドで実行する

  • cmd + shift + p でコマンドパレットを開いてから「format」で「JsPrettier: Format Code」を選択する

ファイル保存時に実行するには

  • 設定で有効にする必要がある
  • 「Sublime Text」>「Package Settings」> 「JsPrettier」>「Settings - Default」から設定ファイルを開く

  • "auto_format_on_save" を true にする
  • （コメントでデフォルト値書いてあるし、上書きしちゃっていいでしょ）

こまかな話

prettier に無視してほしい

  • 例えば意味のある形式がフォーマットされちゃって困るとき
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

↓

matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);
  • コメントで教えます
// prettier-ignore
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

↓

// prettier-ignore
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)
  • CSS ならこんな
/* prettier-ignore */
.my    ugly rule
{

}

終わりに

  • 便利そうやからみんな入れてほしい
  • こういうフォーマットになってほしい！と指定する設定まわりはまた次回書きます（気持ちが高ぶれば）
  • EditorConfig と共存できます
  • 便利そうやからみんな入れてほしい