- 元々 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とかで使えるだけってこと - エディタと連携させたい！ エディタ上でフォーマットしてほしい！ ファイル保存時にフォーマットしてほしい！
エディタとの連携
- 弊社マークアップエンジニア、フロントエンドエンジニアが使っているエディタはだいたいサポートされていると思います
- サポートされているエディタの例
- Atom
- Sublime Text
- Vim
- Visual Studio Code
- 完全版はここ → Editor Integration · Prettier
- この記事では、特に多いと思われる Sublime Text での導入方法を書きます
- 他 使っている人はここ見て → Editor Integration · Prettier
Sublime Text での導入
- Package Control から「JsPrettier」インストールで
- Package Control をインストールしていない人はここ 見て
- Sublime Text 3のインストールと初期設定 - Qiita
-
cmd + shift + pから 「Install Package」 > 「JsPrettier」で
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
{
}
- 詳しくはここ見て
- Ignoring Code · Prettier
終わりに
- 便利そうやからみんな入れてほしい
- こういうフォーマットになってほしい！と指定する設定まわりはまた次回書きます（気持ちが高ぶれば）
- EditorConfig と共存できます
- 便利そうやからみんな入れてほしい