背景

今のプロダクトにlinterを入れたかった。今までは雑にググってヒットしたPrettierのみ使っていた。

Linterも入れたほうがいいらしい

PrettierはFormatterであってLinterではない。だからPrettierはコードの「この部分が良くないよ！」とは教えてくれず問答無用で整形だけしてくれる。「この部分が良くないよ！」を教えてもらうにはLinterが必要。JavascriptならESLintがデファクトスタンダード。

eslint --fix で良くない？

おれもそう思ったが、2つの理由でPrettierも一緒に使ってもよいかなと思う。

まず、WebStormがPrettierに公式で対応していて使うのが簡単だから。Prettierがインストールされていれば何の設定も無しに Alt-Shift-Cmd-P を押せば整形してくれる。これは以前記事にも書いた。

prettierがいい感じ - an odd fellow

ふたつめが、横長過ぎるコードをESLintの --fix では整形できないが、Prettierはこれができる。なぜかというと、Prettierは書かれているコードをパースしてASTにして整形するから、らしい（What is Prettier? · Prettier）。だから横長過ぎるコードも妥当な位置で改行したりインデントを入れることができるようだ。

というわけでESLintとPrettierを併用することにした。

standard

ESLintには、Javascriptのコーディング規約に則っているかチェックしてもらいたい。Javascriptのコーディング規約は世の中にいくつかあるが、Javascript Standard Styleに従うことにした。

JavaScript Standard Style

Standard Style用にESLintの設定を書くのは骨が折れれるが、Standard StyleはGitHub - standard/standard: 🌟 JavaScript Style Guide, with linter & automatic code fixerというツールを提供している。これはESLintの設定をまるっとやって standard コマンドにラップしている。だからインストールして $ standard --fix と叩けばStandard Styleに則ったコードに整形される。素敵。

prettier-standardでPrettierとstandardを併用する

standardを使うと、今度困るのがPrettierで、PrettierのコードフォーマットもJavascript Standard Styleに従ってもらう必要がある。しかし、Prettierの設定でStandard Styleになるよう書くのもやはり骨が折れる。そこで調べているとprettier-standardというのがあった。

GitHub - sheerun/prettier-standard: (✿◠‿◠) Prettier and standard brought together!

これは $ prettier-standard ''/path/to/file' でstandardとPrettierを両方適用してくれる。素敵！！！

WebStormからprettier-standard呼べるの？

残念ながらWebStormから呼べるのはPrettier単体のみ。ただし、あとで説明するようにgit commit時にprettier-standardが走るように設定しておけば、書いている最中はどんな風に整形しても問題はない。だからPrettier単体で呼び出して使っています。ただし、セミコロンの設定だけは気になったから .prettierrc を作って ; は補完されないようにしている。

{
  "semi": false
}

git commit時にprettier-standardを走らせるようにする

commit hookはcloneしてから各自で設定する必要があり微妙に使いづらいが、huskyというライブラリを使うと、インストール時にcommit hookの設定を書き込んでくれる。git commit時に具体的にどのようなコマンドを実行するかは package.json に書けるようになるという素晴らしいライブラリ。これとlint-stagedというライブラリを併用すると、git commit時にコードフォーマットを当ててからgit commitするということが可能になる。この記事が詳しい。

コミット前に Lint を強制するなら lint-staged が便利

結局どうなったの

package.jsonに以下のように書き足すことでgit commit時にprettier-standardが走って全JSファイルをフォーマットしてくれる。

{
  "scripts": {
    "format": "prettier-standard 'src/**/*.js'"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": [
      "yarn format",
      "git add"
    ]
  },
}