eslint-plugin-import の import/order を設定した

React+TS プロジェクトで便利だった Lint/Format 設定紹介

import の順番気になるけど手動で整理するのはな〜と思っていたら素晴らしい記事があったのでこれを参考に import/order の設定をした。

React のリポジトリを前提とした話のようだったのでそのまま使うのではなく Vue(Nuxt)の設定で書いた。

rules: {
  'import/order': [
    'error',
    {
      groups: [
        'builtin',
        'external',
        'internal',
        ['index', 'parent', 'sibling'],
        'type',
      ],
      'newlines-between': 'always',
      alphabetize: {
        order: 'asc',
        caseInsensitive: true,
      },
      pathGroups: [
        {
          pattern: '@/components/**',
          group: 'internal',
          position: 'before',
        },
        {
          pattern: '@/**',
          group: 'internal',
          position: 'before',
        },
      ],
      pathGroupsExcludedImportTypes: ['builtin'],
    },
  ]
}

だいたいこんな感じ。internal って使う機会あるのかな……？

tsconfig.json の paths の設定で'@/*'というパスで import できるようにしていたのだけど、どうやらこれが groups の builtin 扱いっぽくて、external である外部モジュールよりも上に書けというエラーが出てしまったので、pathGroups に追加で定義した。

paths についてはTypeScript の paths はパスを解決してくれないので注意すべし！ – 自主的 20%るぅる

Prettier で整形する

husky と lint-staged でコミット時に Prettier をかけているのだけど、この前 lint-staged に設定を加えて、Prettier の実行対象をステージングファイルだけにした。(9/4 の記事)

これにより、コミット時に全ファイルに Prettier がかけられてえげつない量の File changed になるのを避けることができた(はずだよね？)

やっといてよかった。