prettierで自動整形
prettierはソースコードのオートフォーマットをしてくれるライブラリ。
僕の用途は.jsや.jsxのオートフォーマットです。（たぶん他にもいろいろ対応していますが現在何に対応しているかは知りません）
prettierコマンドを叩くと、.prettierrcや.prettireignoreの設定を参考にソースコードを自動で整形してくれます。あら便利！
prettierコマンド叩くの面倒じゃないですか？
毎回commitする前とかにprettierを手でかけるのは面倒だし忘れそう。かといってcommitフックで勝手にフォーマットかけられると最終どうなったか見えない（いや見える必要はないのだが。。）
なのでwebpack --watchやwebpack-dev-serverでソースコードが変わる度に自動でprettierかかるようにしよう！
ちなみに以下掲載していくソースコードはこんな環境で動かしたよ
- Mac OSX 10.11.6
- git 2.10.1 (Apple Git-78)
- node v8.11.1
- npm 5.6.0
- webpack 4.6.0
- webpack-cli 2.0.14
- webpack-dev-server 3.1.3
- prettier 1.12.1
プラグイン
const exec = require('child_process').exec;
class PrettierWebpackWatchPlugin {
apply(compiler) {
// compiler.hooks.run.tapAsync('PrettierWebpackWatchPlugin', this.prettify); *注1
compiler.hooks.watchRun.tapAsync('PrettierWebpackWatchPlugin', this.prettify);
}
prettify(_, callback) {
exec(/* prettier実行するコマンド ex. 'prettier' */, (error, stdout, stderr) => {
console.log(stdout);
callback();
});
}
}
module.exports = PrettierWebpackWatchPlugin;
*注1 compiler.hooks.xxxのxxxのところは、Compiler Hooksを参考にしてね。webpackコマンドで一度だけ実行する場合、compiler.hooks.runに変更しないとtapされないよ。
こいつをwebpack.config.js的なファイルで
plugins: [
new PrettierWebpackWatchPlugin(),
],
したら、無事完成。
おっと、/* prettier実行するコマンド */のところでオートフォーマットかけないといけない。
どのファイルを自動整形するか
src的なディレクトリを指定して全ファイル自動整形するのは楽そうだが、ソースコード変更する度にそれするのは大規模プロジェクトとかだと死亡するのが見えるので、gitでHEADから変更があったファイルのみかけるようにしましょう。プロジェクトの途中から導入するときは、全ファイル一括でかけたあとに今回のやつを導入すれば以降は幸せな世界が待ってる（はず）。全部一括でかけるときはくれぐれも他の人の作業ブランチとかには気をつけてくださいね。
スクリプト
#!/bin/sh
jsfiles=$(git diff --name-only --diff-filter=ACM "*.js" "*.jsx" | tr '\n' ' ')
[ -z "$jsfiles" ] && exit 0
# Prettify all staged .js|.jsx files
echo "$jsfiles" | xargs ./node_modules/.bin/prettier --write
exit 0
これとかをprettify.shとかにしてwebpack.config.jsとかの階層に配置して、プラグインから呼ぶか、インラインコマンドにしてプラグインの中に埋めるかして自動整形かければよさそうです。
おわりに
ちょっとgitの仕様とか、webpackのexecのあたりとか詳しいわけではないので何か指摘とかあったらいただけるとこの記事見る人が助かると思いますm(_ _)m
あと細かい説明とかなんで自動整形とか入れたのかとか、そういう話は時間があったら追記します。
そして記念すべきはじめての投稿です🎉🎉🎉
これからみなさんの役に立つ記事とかをなるべく再現性あるように記載していきます。余裕があったらリポジトリとかも公開していきますね。