Expected 'multiple' syntax before 'single' syntax

Question

I am trying to import files like this but getting error: Expected 'multiple' syntax before 'single' syntax

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';

Rule config:

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

Answer 1

import { ApiException, IProduct, IProductCategory } from '@/services'; is importing multiple (three) exports.

Both import { getModule } from 'vuex-module-decorators'; and import { INavs } from '@/types'; are only importing a single named export.

That error will go way if you move import { ApiException, IProduct, IProductCategory } up one line so it's above the single imports. This is configured in your settings where it says 'memberSyntaxSortOrder': ['none', 'all', 'multiple', 'single'] because 'multiple' is listed before 'single'.

You can read more about it in the eslint documentation here https://eslint.org/docs/rules/sort-imports

Answer 2

Ran into this too looking for a CI solution for reordering multiple imports, since ESLint --fix only supports multiple members on a single line; i.e. autofixing unsupported when spread over multiple lines - e.g. from a low Prettier printWidth of ~80.

eslint-plugin-simple-import-sort works great, fixed the errors after amending config from the docs:

Make sure not to use other sorting rules at the same time:

• [sort-imports]
• [import/order]