renke / import-sort

Sort ES2015 (aka ES6) imports. Both JavaScript and TypeScript are supported.
ISC License
465 stars 69 forks source link

Document the expected behaviour of import-sort-style-renke #4

Closed Wilfred closed 7 years ago

Wilfred commented 8 years ago

I'm trying the renke style, and I find it more readable than eslint style, due to the separation between local imports and node_modules imports.

However, it's not clear to me how it's sorting, exactly. For example, it's not sorting alphabetically by the library name:

import React from 'react';
import _ from 'lodash';
import {connect} from 'react-redux';

It's not obviously sorting alphabetically by the variable before from, at least in the presence of {}:

import qs from 'querystring';
import {connect} from 'react-redux';

When there aren't {} brackets, it seems to be case insensitive sort alphabetically:

import ReactDataGrid from 'react-data-grid';
import qs from 'querystring';
import {Filters} from 'react-data-grid/addons';
import {connect} from 'react-redux';

I don't mind the behaviour, but I would like to understand the methodology. Looking at the source: https://github.com/renke/import-sort/blob/master/packages/import-sort-style-renke/src/index.ts#L22 it seems to be using some default behaviour somewhere.

renke commented 8 years ago

In this case it first groups the imports by their "type". First come imports with only a default member and then imports that have only named members. Each group is then sorted using the unicode (ASCII) comparator (see here).

import React from 'react';
import _ from 'lodash';
import {connect} from 'react-redux';

Again, imports are grouped first: Imports with only default member, followed by imports with only named members. The sorting within this groups is again dictated by the aforementioned unicode comparator.

import ReactDataGrid from 'react-data-grid';
import qs from 'querystring';
import {Filters} from 'react-data-grid/addons';
import {connect} from 'react-redux';

We can of course create a new style that is a little less confusing and add it to the import-sort repository. Perhaps an import-sort-style-wilfred? :smile:

But in general you are right, a README and a real example for each style would be nice to have.