Typescriptの絶対パスImport利用時にESLint + Prettier + import sortのAuto Formatをいい感じにする #JavaScript

概要

Typescriptの絶対パスImportを利用しているときに、
ESLint + Prettier + import sortの構成でAuto Formatが思った通りに並ばなかったため、
その悪戦苦闘の結果を残します

絶対パスImportとESLint + Prettier + import sortの構成については
詳細を説明しませんが、実装の参考例を貼っておきます
[React][TypeScript]絶対パスでimportできるようにする(@ozaki25様)
ESLint + Prettier をセットアップするといつも苦しむからちゃんと理解する (2020年10月版) (@motch0214様)

事象

こうありたいという例.ts

// [external, internal, sibling]のグループに分離する

import { Column, Entity, JoinColumn, ManyToOne, PrimaryGeneratedColumn } from 'typeorm'; // external

import { UserEntity } from '@/entities/User'; // internal

import { CorporationDbModel } from './Corporation'; // sibling

現実.ts

// @から始まるinternalだと思うimportがexternalに含まれてしまう

import { UserEntity } from '@/entities/User';
import { Column, Entity, JoinColumn, ManyToOne, PrimaryGeneratedColumn } from 'typeorm'; // ここまでexternal

import { CorporationDbModel } from './Corporation'; // sibling

やったこと

eslintの設定でimport/internal-regexを追加する。以上
https://github.com/benmosher/eslint-plugin-import/blob/master/README.md#importinternal-regex

eslintrc.js

module.exports = {
  settings: {
    'import/internal-regex': '^@',
    // 以下割愛
  },
  // 以下割愛
};

おまけ

import sortのgroup(外部パッケージ、内部パッケージ、同一ディレクトリなど)の順番を変えたい場合は以下を参照
https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md#groups-array
個人的には以下の並びが外部->内部という並びの直感に合うと思っています

eslintrc.js

module.exports = {
  rules: {
    'import/order': [
      'warn',
      {        
        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object'],
        // 以下割愛
      },
      // 以下割愛
    ],
    // 以下割愛
  },
  // 以下割愛
}