Zenn
🕌

eslint-config-prettierのv8.0.0からextendsの書き方が楽になっていた

2021/03/02に公開
ESLint
Prettier
tech

はじめに

eslint-config-prettierのv8.0.0からextendsの書き方が簡単になりました。

公式ドキュメントのREADMEにも書いてありますが、技術ブログなどには古い設定で書かれていることも多いので簡単に紹介します。

ℹ️ Note: You might find guides on the Internet saying you should also extend stuff like "prettier/react". Since version 8.0.0 of eslint-config-prettier, all you need to extend is "prettier"! That includes all plugins.
https://github.com/prettier/eslint-config-prettier/tree/v8.1.0#installation

設定

typescriptでeslintとprettierを使用する場合の設定例を挙げます。

v8.0.0 前の場合はprettierとprettier/@typescript-eslintをそれぞれ設定する必要がありました。

.eslintrc.js
extends: [
  'eslint:recommended',
  'plugin:@typescript-eslint/recommended',
  'prettier',
  'prettier/@typescript-eslint',
],

v8.0.0 以降では、prettierのみで良くなりました。

.eslintrc.js
extends: [
  'eslint:recommended',
  'plugin:@typescript-eslint/recommended',
  'prettier'
],

Tips

v7.2.0ではそれぞれで設定ファイルが分かれてました。
index.js
https://github.com/prettier/eslint-config-prettier/blob/v7.2.0/index.js
@typescript-eslint.js
https://github.com/prettier/eslint-config-prettier/blob/v7.2.0/%40typescript-eslint.js

v8.0.0からはindex.jsの中にすべてのruleが書かれてますね。
https://github.com/prettier/eslint-config-prettier/blob/v8.1.0/index.js

おわりに

プロジェクトの設定周りは他のプロジェクトをそのまま流用したりするので、変更とか気づき難いです。自分も他の人が設定したものをコピペすることが多いのですが、公式ドキュメントもちゃんと読んでいきたいです。

Discussion