Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

eslint-plugin-prettier って generally not recommended だったのか

背景

手元のアプリで npm audit したら万単位で脆弱性がレポートされてきたので、そろそろ package-lock.json を再作成しようか…とやってみたところ、 prettier のルール違反が消えなくなってしまった。正確には、 prettier の警告にしたがって修正したら eslint(prettier/prettier) のエラーが出て、そちらを直したら元の prettier エラーになってしまうという conflict 状態。なんでかいな、とググったら…

「eslint で prettier 実行」はお勧めではない(generally not recommended)

見つけたのが この記事。 Prettier 公式が

  • prettier と eslint を組み合わせて使うなら、 prettier はコード・フォーマッターに、 eslint は静的解析に各々専念させたほうがよい
  • eslint-plugin-prettier などのような「eslint から prettier を実行するような連携方法」はお勧めではない

という趣旨のことを明言しちゃってるんですよね。 eslint-plugin-prettier を使うやり方しか知らなかったのでびっくりしました。

実践

  • eslint-plugin-prettier 使うのやめます。 prettier-eslint-cli もやめます。
  • prettier そのものは VSCode のプラグインとして常に裏で動くようにしておきます(いちいち意識しなくても済むように)。
  • lint-staged で実行されるコマンドに prettier --write --ignore-unknown を加えます。
  • .prettierignore ファイルを作ります。中身は .gitignore と同じでよいです。
  • CI 環境があるときは、 npm test の前に prettier --check . するようにします。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?