【2020冬】 TypeScript + Prettier + ESLint + VSCode の設定

概要

• eslint-plugin-prettier が非推奨になったらしい。
  • いつのまにか eslint-plugin-prettier が推奨されないものになってた | K note
• 以下の要件を満たしつつ、ESLint の config から Prettier を分離したい。
  • VSCode からフォーマッタを実行できる。
  • 非 VSCode 民でも npm script からフォーマッタを実行できる。
  • CI でフォーマッタ未適用コードをエラーにできる。

TL;DR

src: https://github.com/arx-8/try-separate-eslint-and-prettier/commit/0d0f92201ca2102f20893b26fd23a902621aba41

やったこと

VSCode からフォーマッタを実行

• 以下の通り移行。
  • prev: 拡張機能 dbaeumer.vscode-eslint + .eslintrc.js
  • next: 拡張機能 esbenp.prettier-vscode + .prettierrc
• 設定周りについて。
  • esbenp.prettier-vscode の設定値 prettier.prettierPath で、プロジェクトに install した prettier を使うようにする。
  • 設定値 editor.defaultFormatter にフォーマッタとして拡張機能 esbenp.prettier-vscode を指定したので、設定値 editor.formatOn* で prettier を実行できるようになった。

非 VSCode 民でも npm script からフォーマッタを実行

• prettier --write . を使う。

CI でフォーマッタ未適用コードをエラーにする

• prettier --check . を使う。

おまけ: ESLint + Prettier で全部 sort する

TL;DR

• src: https://github.com/arx-8/try-separate-eslint-and-prettier/commit/f1f6ff803d6fefd2223cac384d284d9694807fbd

sort 対象と package 名

sort 対象	package 名
import 文	prettier-plugin-import-sort + import-sort-style-module
Object のキー	eslint-plugin-sort-keys-fix
Object destructuring assignment のキー	eslint-plugin-sort-destructure-keys
type/interface 宣言のキー	eslint-plugin-typescript-sort-keys

• これで「リーダブルなキーの並び順とは」とか悩む必要がなくなる。
• eslint-plugin-simple-import-sort ではなく prettier-plugin-import-sort を選択している理由は、prettier との相性のため。 eslint-plugin-simple-import-sort の方は、2 回保存しないと auto fix しきれないケースがある。
  • 恐らく prettier -> eslint の実行順になった場合に、 eslint-plugin-simple-import-sort による prettier 違反コードが生成されてしまう。
  • なんだかんだ eslint-plugin-prettier は合理的だったのではと思わんでもない。
• organizeImports では非 VSCode 民が救われないため、ぜひ prettier-plugin-import-sort がもっと普及してほしい。