reactjs - ESLint 导入插件的正则表达式规则始终将类型导入保持在底部

Question

我正在尝试将eslint-plugin-simple-import-sort插件配置为在运行时自动对我的导入进行排序eslint --fix。

我想始终将所有type导入保持在底部。例如，对于给定的导入——</p>

import Link from 'next/link';
import type { NextPage } from  'next';
import type { NextRouter } from 'next/router';
import {
    Box
} from '@chakra-ui/react';
import { MyCustomIcon } from '../../components/icons/custom';

我希望它们像这样重新排序——</p>

import Link from 'next/link';
import {
    Box
} from '@chakra-ui/react';
import { MyCustomIcon } from '../../components/icons/custom';

import type { NextPage } from  'next';
import type { NextRouter } from 'next/router';

到目前为止，这是我在 ESLint 配置中设法编写的内容——</p>

{
    "rules": {
        "simple-import-sort/imports": [
            "error",
            {
                "groups": [
                    [
                        // Node.js internals before everything.
                        "^(path)$",
                        // React comes first (except for type imports).
                        "^([react](?!\\u0000$))+$",
                        "^([react\\-dom](?!\\u0000$))+$",
                        // Next.js comes second (except for type imports).
                        "^(next/.*(?!\\u0000$))+$",
                        "^(next-.*(?!\\u0000$))+$",
                        // Important third-party stuff comes third.
                        "^(react-hook-form|fuse.js|(?!\\u0000$))+$",
                        // @emotion comes fourth.
                        "^@emotion/react$",
                        // @chakra-ui comes fifth.
                        "^@chakra-ui/react$",
                        // react-* packages come sixth.
                        "^([react-\\w](?!\\u0000$))+$",
                        // Every other third-party imports come next (except for type imports).
                        // "^@?\\w./\\-@"
                        "^([\\w./\\-@)](?!\\u0000$))+$"
                    ],
                    [
                        // Parent imports. Put `..` last.
                        "^\\.\\.(?!/?$)",
                        "^\\.\\./?$",
                        // Other relative imports. Put same-folder imports and `.` last.
                        "^\\./(?=.*/)(?!/?$)",
                        "\\.(?!/?$)",
                        "^\\./?$",
                        // Style imports.
                        "^.+\\.css$",
                        // Image & other static asset imports.
                        "^.+\\.(svg|json)$"
                    ],
                    [
                        // Type imports (`u0000$`) have to always be last.
                        "^@?(react).*\\u0000$",
                        "^@?(next).*\\u0000$",
                        "^@?(react-.*).*\\u0000$",
                        "^@?\\w.*\\u0000$",
                        "^[^.].*\\u0000$",
                        "^\\..*\\u0000$"
                    ]
                ]
            }
        ]
    }
}

有了这个设置，我希望这条线import type { NextRouter } from 'next/router';被推到底部，但事实并非如此。我正在努力使用正则表达式，因为我可以看到问题在于这种模式 - https://regexr.com/5qaon

^(next/.*(?!\\u0000$))+$

这似乎匹配所有内容，包括类型导入。我认为这是我的最终结果需要修改的模式；只要不以. .*_\u0000

标签： reactjsregextypeseslint