应在“single”语法之前使用“multiple”语法

Question

我正在尝试像这样导入文件，但得到错误:预期的'multiple‘语法先于'single’语法

import { Component, Prop, Vue } from 'vue-property-decorator';
import { getModule } from 'vuex-module-decorators';
import { ApiException, IProduct, IProductCategory } from '@/services'; // error here
import { INavs } from '@/types';

规则配置：

'sort-imports': ['error', {
    'ignoreCase': false,
    'ignoreDeclarationSort': false,
    'ignoreMemberSort': false,
    'memberSyntaxSortOrder': ['none', 'all', 'multiple', 'single']
}]

Answer 1

import { ApiException, IProduct, IProductCategory } from '@/services';正在导入多个(三个)导出。

import { getModule } from 'vuex-module-decorators';和import { INavs } from '@/types';都只导入一个命名导出。

如果您将import { ApiException, IProduct, IProductCategory }上移一行，使其位于单个导入的上方，则该错误将会消失。这是在您的设置中配置的，其中显示为'memberSyntaxSortOrder': ['none', 'all', 'multiple', 'single']，因为“multiple”列在“single”之前。

您可以在此处的eslint文档https://eslint.org/docs/rules/sort-imports中了解更多信息

Answer 2

在寻找用于对多个导入进行重新排序的CI解决方案时也遇到了这种情况，因为ESLint --fix仅支持单行上的多个成员。

eslint-plugin-simple-import-sort工作得很好，在阅读了docs之后，错误神奇地消失了

请确保不要同时使用其他排序规则：

• sort-imports
• import/order

Answer 3

要解决此问题，我建议修改您的.eslintrc.json设置

    "sort-imports": ["error", {
        "ignoreCase": false,
        "ignoreDeclarationSort": false,
        "ignoreMemberSort": false,
        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
        "allowSeparatedGroups": false // <-- Change this to true
      }],

这可以防止您对不同组中的本地导入和第三方导入进行重新排序，但这违反了前面建议的memberSyntaxSortOrder