renke / import-sort Goto Github PK

Thanks for creating this project! Love it.

I was kind of confused while configuring, since I could not find the import-sort-babylon repo that you mention in the readme.

To use it you probably want to install import-sort, import-sort-config, a parser (say import-sort-babylon) and a style (say import-sort-style-eslint).

Since you also mentioned import-sort-parser-babylon a paragraph before that, it didn't take long for me to figure out what the correct name was.

Hi!

I came across a bug, where the sorted result is different for JavaScript and TypeScript:

Version: 2.4.0
Style: module

JavaScript Result:

import { Time } from './time';
import { TimeZone } from './time-zone';

TypeScript Result:

import { TimeZone } from './time-zone';
import { Time } from './time';

Do you know why this happens? The JavaScript behavior is the correct one, but it seems to be different for TypeScript files

Hello there,

I get error code 47 (ELIFECYCLE) when trying to sort my codebase.

Here's the log:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/nodejs',
1 verbose cli   '/usr/bin/npm',
1 verbose cli   'run',
1 verbose cli   'optimize:imports',
1 verbose cli   '--verbose' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preoptimize:imports',
4 verbose run-script   'optimize:imports',
4 verbose run-script   'postoptimize:imports' ]
5 info lifecycle [email protected]~preoptimize:imports: [email protected]
6 silly lifecycle [email protected]~preoptimize:imports: no script for preoptimize:imports, continuing
7 info lifecycle [email protected]~optimize:imports: [email protected]
8 verbose lifecycle [email protected]~optimize:imports: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~optimize:imports: PATH: /usr/lib/node_modules/npm/bin/node-gyp-bin:/home/aaron/Projekte/fleet-management/ui/node_modules/.bin:/home/aaron/bin:/home/aaron/.local/bin:/home/aaron/bin:/home/aaron/.local/bin:/home/aaron/bin:/home/aaron/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games
10 verbose lifecycle [email protected]~optimize:imports: CWD: /home/aaron/Projekte/fleet-management/ui
11 silly lifecycle [email protected]~optimize:imports: Args: [ '-c', 'import-sort ./app' ]
12 silly lifecycle [email protected]~optimize:imports: Returned: code: 47  signal: null
13 info lifecycle [email protected]~optimize:imports: Failed to exec optimize:imports script
14 verbose stack Error: [email protected] optimize:imports: `import-sort ./app`
14 verbose stack Exit status 47
14 verbose stack     at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/lib/utils/lifecycle.js:279:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:194:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:194:7)
14 verbose stack     at maybeClose (internal/child_process.js:899:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd /home/aaron/Projekte/fleet-management/ui
17 error Linux 4.8.0-46-generic
18 error argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "optimize:imports" "--verbose"
19 error node v7.10.0
20 error npm  v4.2.0
21 error code ELIFECYCLE
22 error errno 47
23 error [email protected] optimize:imports: `import-sort ./app`
23 error Exit status 47
24 error Failed at the [email protected] optimize:imports script 'import-sort ./app'.
24 error Make sure you have the latest version of node.js and npm installed.
24 error If you do, this is most likely a problem with the Project package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error     import-sort ./app
24 error You can get information on how to open an issue for this project with:
24 error     npm bugs Project
24 error Or if that isn't available, you can get their info via:
24 error     npm owner ls Project
24 error There is likely additional logging output above.
25 verbose exit [ 47, true ]

This would allow for shared import-sort configs

something like import-sort.config.js?

./.importsortrc

{
  ".js": {
    "parser": "babylon",
    "style": "./internals/import-sort"
  }
}

./internals/import-sort.js

module.exports = (styleApi) => {
  return [...]
};

Then I run

yarn import-sort app/app.js app/components/file1.js app/containers/file2.js

IMO it'd be better if import-sort-config use the working directory to determine the style module. In that case, I can simply use "style": "./internals/import-sort" instead of adjusting that according to each target file.

I have a component like this:

const LoadableDesignPatterns = Loadable({
    loader: () => import('./design_patterns'),
    loading: Loading,
});

and import-sort-cli is crashing with:

SyntaxError: Unexpected token (85:18)

Hi.

I wasn't expecting it but it's actually working with VueJS SFC files!
The only little "issue" is that a blank line is added between the <script> tag and the first import.
It's not a big deal but It's better to report it.
Thanks for your time.

.importsortrc:

{
    ".vue, .ts": {
      "parser": "typescript",
      "style": "module"
    }
}

Initial Module.vue

<script lang="ts">
import Vue from "vue";
// ...

Command
yarn run import-sort --write Module.vue

Expected result

<script lang="ts">
import Vue from "vue";
// ...

Actual result

<script lang="ts">

import Vue from "vue";
// ...

I started getting this after Sort Imports for VS Code was updated, and tested in the cli which also gave the error.

Error sorting imports: SyntaxError: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead. (22:0)

example source

import styles from './index.scss';

@cssModule(styles)
export class Sidebar extends React.Component {
}

Not sure if this is just progress, but figured I'd raise it since it's affecting me, and possibly others.

It's probably a good idea to add a dedicated parser for Vue files or least some kind of Vue mode for the existing Babel and TypeScript parsers.

Any example source code and suggestions on how to implement this are highly appreciated, because I have never worked with Vue at all.

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.

Hey! Great work with this plugin. Using it for some months now 😄 Dunno what happened, probably some update on the package or the atom itself the sort is giving wrong results, such as:

Initial (which is correct with the expected):

import utils from 'helpers/utils';
import Droppable from 'components/dnd/droppable';
import React, {PropTypes} from 'react';

import classes from './classes';
import style from './style';
import propsSchema from './props-schema';
import settings from './settings';
import Component from '../component';
import Element from '../element';

On save it will re order to:

import React, {PropTypes} from 'react';

import Component from '../component';
import Droppable from 'components/dnd/droppable';
import Element from '../element';
import classes from './classes';
import propsSchema from './props-schema';
import settings from './settings';
import style from './style';
import utils from 'helpers/utils';

So it seems to be joining relative and absolute path imports. Any clue why this is happening?

I have a multirepo with the import sort settings in the root package.json. However, it does not work. It seems to only pick up the leaf package.json files, and not the root one.

As flow files typically begin with

//@flow

They shall not be rearranged.

Non working example

//@flow
import dotEnv from 'dotenv'
import {compile} from './geth'
import express from 'express'

Turns into

import {compile} from './geth'
//@flow
import dotEnv from 'dotenv'
import express from 'express'

The ESLint style is not really working as expected. It should always sort the imports such that it complies with ESLint's rules. We might have to actually read ESLint config to do this properly.

$ eslint --ext jsx,js  --max-warnings 0 .

/Users/sontek/code/eventray/src/eventray/static/js/components/element_editor.js
  44:1  error  Expected 'multiple' syntax before 'single' syntax  sort-imports

then:

$ import-sort **/*.js --write
✨  Done in 19.14s.

and then run it again:

$ eslint --ext jsx,js  --max-warnings 0 .

/Users/sontek/code/eventray/src/eventray/static/js/components/element_editor.js
  44:1  error  Expected 'multiple' syntax before 'single' syntax  sort-imports

am I missing something?

It is nice extension but unfortunately i cannot use it because of import order does not fit team agreement.
So it would be great if there be a possibility to define simple rules set in unserConfig without writing new sorter. For instance:

sortImports.rule: (importValue: string) => { 
    if(importValue.contains('angular') { return 1 }; 
    if(importValue.endsWith('.less') { return 3 }; 
    return 2;
}

higher return value lower place where the import appears (in this case angular goes first, less - goes last, all others goes in between)

Also there will be cool to introduce option to skip new line between different import categories because different teams has different rules and ide'as so you cannot enforce to have new lines.

Hi!

First of all thanks for this module, as you know it provides a solid foundation for the Visual Studio Code extension.

I wanted to ask whether you would be open to adjusting the eslint (default) style for the parser to be in accordance with the default configuration of the popular eslint-config-airbnb. The idea is that absolute imports always come before relative imports. Right now, the first order of the default sort style looks at the import method (unnamed import, default import, etc.) instead of the import origin.

Example:
Current default eslint sorting:

import './foo';
import A from 'A';

Target default eslint sorting:

import A from 'A';
import './foo';

What do you think? It seems that import-sort-style-renke is already quite close to the wished behavior, but I think it might be worth putting it into the default style.

I'm using import-sort-cli, in README said disable sort by comment is support now, but I can't see it.

here is my code:

// eslint-disable line
import $ from 'jquery';// eslint-disable line
// d
import 'fixed-sticky/fixedsticky.js';// eslint-disable line
//d 

When developing with Webpack, is common to set resolve.alias to configure relative path aliases, such as actions, components. As 'module' style doesn't know these aliases, they are considered absolute modules instead of relative.

To quickly fix this problem I forked the import sort style module and hardcoded some aliases: https://github.com/fsmaia/import-sort-style-module-relative-aliases

It would be very nice to add this support in settings, or even reading it from webpack.config.js or any alias support tool.

I would like to group all my node modules, built-in and installed, separately from other absolute imports. However the isNodeModule helper only infers built-in node modules like fs and path. Could it be extended to also include manually installed node modules?

As an example, using the module style, I am seeing:

import path from 'path';

import React from 'react';

… when I want:

import path from 'path';
import React from 'react';

Hello,

My team is experiencing an issue with the "Sort on save" option. We are running on Atom v1.13+. It may be related with remote-sync plugin which allow FTP uploads on save.

Did you experienced this issue as well?

Hi @renke,

Our team just found your https://github.com/renke/atom-import-sort project which would probably resolve a lot of issue we are experiencing during our coding reviews.

We would like to implement a custom-style which would:

1. organize by node modules first, then external packages, then relatives file links
2. organize by relative path hierarchy (for relative links), which means links near project root first, links far from project root then
3. organize alphabetically by path name

A sample of this pattern:

import fs from 'fs';
import path from 'path';

import Promise from 'bluebird';
import HTTPStatus from 'http-status-codes';

import { router AS primaryRouter } from '../../router.jsx';
import config from '../config.jsx';
import { ping } from './defaultRoute.jsx';
import { index } from './route.jsx';

To implement this, we need another sorter than the byIdentifier. Do you think a byPath or byPathHierarchy sorter would be accurate here?

Seeing as this can be used as a CLI tool, I think it would make sense to also expose the possibility of selecting the sorting style on command line, much in the same sense Mocha does:

• --styles would list the available style plugins
• --style renke would select that

Hi @renke ! Thanks for the project!

Running into an issue:

Here is my sample file:

import * as React from 'react';

import Counter from './Counter';
import { Provider } from 'react-redux';
import reducers from './reducers';

From package.json:

  "importSort": {
    ".js": {
      "parser": "babylon",
      "style": "eslint"
    }
  },

Running import-sort on this results in a noop. eslint will complain about this - I believe the line import { Provider } from 'react-redux'; should come second?

(Side note - would be awesome to have a try-import-sort website to quickly paste this to demonstrate the issue, hint hint :D)

(Version information):

╔═ markl@xenialdev2-uswest1cdevc:
╚═ ♪ yarn list | grep import-sort
warning package.json: No license field
warning [email protected]: No license field
├─ [email protected]
│  ├─ import-sort-config@^4.2.0
│  ├─ import-sort-parser@^4.2.0
│  ├─ import-sort-style@^4.2.0
│  ├─ import-sort@^4.2.0
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  ├─ import-sort-parser@^4.2.0
│  ├─ import-sort-style@^4.2.0

Thanks!

in some case the order of import matters, it is rare but when it happens I have to switch off sort on save in all the IDE to let the single file work.

A simple solution would be to have a setting where I can put ignored file as a list of file names

Can you implement this?

Looks like Flow comment annotations are not supported. import-sort just turned this:

import { parseCue /*:: type CueRecord */ } from '/lud/cue.js';

into this:

import { parseCue } from '/lud/cue.js';

This is my .importsortrc.json:

{
    ".js, .jsx": {
        "parser": "babylon",
        "style": "module"
    }
}

sample of feature:

 [
  { 'match': [ 'noMembers', 'absoluteModule' ] },
  { 'separator': true }

  { 'match': [ 'noMembers', 'relativeModule' ] },
  { 'separator': true }
  {
     match: [ 'nodeModule' ],
     sort: [ 'name' ],
     sortNamedMembers:  [ 'alias' ]
  },
  { separator: true },
  {
     match: [ 'scopedModule', 'absoluteModule' ],
     sort: [ 'name' ],
     sortNamedMembers:  [ 'alias' ]
  },
  { separator: true },
]

no need for the overkill of creating a whole separate package!

Hi!

Thank you for you import-sort tool, it's very useful.

I'm using VS Code plugin and have a trouble with sort customization.

I've added configuration into package.json:

    "importSort": {
        ".js, .jsx, .es6, .es": {
            "parser": "babylon",
            "style": "module"
        }
    }

But when I try to save my JS-file it works as before:

import { Text, TouchableOpacity, View } from 'react-native';

import React from 'react';
import styled from 'styled-components/native';
import { withNavigation } from 'react-navigation';

I believe plugin is not reading package.json config during his work. Any ideas how to fix that?

Would be great if we could use import-sort on an AST. This way we could integrate it with e.g. Prettier so we only need to parse and the JavaScript file ones.

Is this somehow possible?

dotSegmentCount counts the total number of dots in an import source:

function dotSegmentCount(firstImport: IImport, secondImport: IImport): number {
  const firstCount = (firstImport.moduleName.match(/\./g) || []).length;
  const secondCount = (secondImport.moduleName.match(/\./g) || []).length;

  if (firstCount > secondCount) {
    return -1;
  }

  if (firstCount < secondCount) {
    return 1;
  }

  return 0;
}

However, it's perfectly valid to have dots in the filename. For example,

import { modal } from "./modal.react"; // This is modal.react.ts
import { doSomething } from "./helpers"; // This is helpers.ts

When using the module sort style, files at the same level should be sorted together, so ./helpers should come before ./modal.react, but instead, the dotSegmentCount function determines that ./modal.react contains more dots than ./helpers and thus should come first.

The problem is simply that the regex is naive. The regex should instead isolate the beginning dots before counting them, maybe like this:

const firstDotString = (firstImport.moduleName.match(/^(?:\.\.?\/)+/) || [""])[0];
const secondDotString = (firstImport.moduleName.match(/^(?:\.\.?\/)+/) || [""])[0];
const firstCount = (firstDotString.match(/\./g) || []).length;
const secondCount = (secondDotString.match(/\./g) || []).length;

First off, this is a great start for a really useful plugin.

I have run into an interesting issue that took me a while to narrow down.

Editor Version: 1.8.1 or Insiders
Environment: MacOS 10.12.2
Editor Environment: Fresh Install with only sort-imports installed ( .code folder nuked )
Language: ES6 JavaScript via Babel-Runtime

Scenario: Opened 4 existing files, change the order of imports ( for the plugin to reorder) in one file, add a comment to the bottom of each specific to the file and don't save. Hit the save all button in the open editors bar and the file that gets it's imports sorted is written over by another file's content.

The original file's content with the offending change via Code's visual diff.

like cat xxx.ts | import-sort
then output to standard output stream

First of all, thank you for this really nice tool!

Is it possible to make import-sort not wrap long lines? I run a setup with both import-sort and Prettier, and the two disagree about how lines should be wrapped. I'd like import-sort to do what it does best (sort imports) and Prettier do what it does best (make things pretty).

Hi @renke,
I'm planning to use your library in our workflow cause we like to keep the imports order shared across the team.
Anyway, my concern is about passing a custom style in the cli command.
Are you already working on this? Do you need help to achieve this?

Let me know,
have a nice day.

Command failed, output:

Error: 'pipelineOperator' requires 'proposal' option whose value should be one of: minimal

Hi,

First of all, awesome tool!

Currently import-sort is not respecting file line-endings. Would it be possible to do so?

If that makes sense for you I can create a PR with that functionality.

Thanks

From issue in vsc-sort-imports

To Reproduce

Create a file foo.ts and add

import { __ } from 'ramda'

Expected Results

Sorts imports as usual

Actual Results

With each time I save an additional _ is appended to the import

1 save

import { ___ } from 'ramda'

2 saves

import { ____ } from 'ramda'

and so on

As you can see in the image, there are many packages in the wrong place. This could be a result of scoped packages (like @ionic-native/splashscreen) having the slash, but this is still a major bug for angular/ionic users. If it helps, I am also using the VS Code plugin on macOS 10.12.

Occassionally (but rarely), import-sort's output is unstable. If I run it, two import lines get flipped. But if I run it again, it flips them back. It's been pretty hard to reproduce, but here is an example. (Trying to make the example smaller made the bug go away…)

// @flow

import { athing } from 'common-tags';
import conf from 'config';
import a1 from 'controllers/a1';
import b1 from 'controllers/b1';
import c1 from 'controllers/c1';
import d1 from 'controllers/d1';
import e1 from 'controllers/e1';
import e2 from 'controllers/e2';
import e3 from 'controllers/e3';
import f1 from 'controllers/f1';
import l1 from 'controllers/l1';
import o1 from 'controllers/o1';
import p1 from 'controllers/p1';
import s1 from 'controllers/s1';
import u1 from 'controllers/u1';
import w1 from 'controllers/w1';
import type {
  NextFunction as Next,
  $Request as Req,
  $Response as Res,
} from 'express';
import express from 'express';
import { stuff } from 'lib/s1';
import { morestuff } from 'lib/s2';
import { omit } from 'lodash';
import { isNil, pick } from 'lodash/fp';
import e4 from 'm/e4';
import e5 from 'm/e5';
import r1 from 'm/r1';
import s2 from 'm/s2';
import u2 from 'm/u2';
import u3 from 'm/u3';
import m1 from 'moment';

The problem happens in the imports from express. Note that one is a "type import" and one is not. These just keep getting flipped with every re-run of import-sort. If you remove any of the other imports from this file to minify the example, this suddenly becomes stable…

Here's the .importsortrc config:

{
  ".js": {
    "parser": "babylon",
    "style": "module"
  }
}

I'm using import-sort 4.2.0.

Any help would be appreciated!

How do I specify several files? I am currently just calling import-sort with every directory but there are pre-commit linters in my code that only pass a list of files to be commited.

First let me say, awesome project! Love the flexibility you can get going with this! I do have one request in regards to readability for code reviews, it would be great if it were possible to add comments after separators so that each import group would be named. For example:

// Absolute modules with side effects (not sorted because order may matter)
import "a";
import "c";
import "b";

// Relative modules with side effects
import "./a";
import "./c";
import "./b";

// File store stuff
import {readFile, writeFile} from "fs";
import * as path from "path";

// External imports
import aa from "aa";
import bb from "bb";
import cc from "cc";
import PropTypes from "prop-types";
import React from "react";
import { connect } from "react-redux";

// Relative imports
import aaa from "../../aaa";
import bbb from "../../bbb";
import aaaa from "../aaaa";
import bbbb from "../bbbb";
import aaaaa from "./aaaaa";
import bbbbb from "./bbbbb";
import styles from "./Component.scss";

But when you save this file using the module style you end up with

// Absolute modules with side effects (not sorted because order may matter)

import "a";
import "c";
import "b";

import "./a";
import "./c";
import "./b";

import {readFile, writeFile} from "fs";
import * as path from "path";

import aa from "aa";
import bb from "bb";
import cc from "cc";
import PropTypes from "prop-types";
import React from "react";
import { connect } from "react-redux";

import aaa from "../../aaa";
import bbb from "../../bbb";
import aaaa from "../aaaa";
import bbbb from "../bbbb";
import aaaaa from "./aaaaa";
import bbbbb from "./bbbbb";
import styles from "./Component.scss";

// Relative modules with side effects




// File store stuff



// External imports







// Relative imports

It would be great if the comments were preserved and could even be generated. To do this I figure you need a new setting, something like deleteCommentsInImports just so you know to delete the comments in the imports section before doing the actual sort. Second a new field similar to Separator called Header (or something) and then you just generate the headers.

This way, when the code goes to code review, the imports aren't just sorted, they are also documented a bit to make life easier.

Webpack and other bundlers can support module aliases and custom modules directories.

i.e.

{
  resolve: {
    alias: {
      'scope-package': __dirname + '/node_modules/@scope/package',
    },
    modules: ['src', 'node_modules'],
  },
};

This support could be similar to how eslint-plugin-import does it by providing a node and webpack resolver that you can specify in your config.

In fact, since eslint-import-resolver-webpack is its own separate package, it can be used for this purpose.

This is certainly a new feature, however it's somewhat of a bug, since anyone using eslint will have the problem with the sorting rules being incorrect.

See:

• https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md
• https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/first.md

It would be great if sorting could honor the eslint sorting rules in effect.

Or maybe use no default configuration so I get null when it's called.

I would like to call getConfigFromPackage(directory, extension); directly and get no default configuration but it's not exported. Maybe we can export it?

issue of vsc-sort-import

Before sorting:

After sorting:

In my case, it's working fine, but something wrong in .vue SFC.

// .importsortrc
// my rules: https://github.com/Airkro/import-sort-style-airkro
{
  ".js": {
    "parser": "babylon",
    "style": "airkro"
  },
  ".vue": {
    "parser": "typescript",
    "style": "airkro"
  }
}

In my rules, I prefer move css file to last line.
But in following code, it won't do that.

<template>
  <div>
    <div
      :key="a"
      v-for="a in b"
    />
  </div>
</template>

<script>
import 'style.css';

import lodash from 'lodash';
</script>

Unless i put something with : symbol after v-for.

<template>
  <div>
    <div
      :key="a"
      v-for="a in b"
      :test="1"
    />
  </div>
</template>

<script>
import lodash from 'lodash';

import 'style.css';
</script>

Our.eslintrc:

{
  "parser": "babel-eslint",
  "rules": {
    "sort-imports": [2, {"ignoreCase": true}]
  }
}

The following input is already sorted, and produces 0 errors with ESLint's sort-imports rule:

import type {AccountType} from '../../../types/thrift/yellow/yellow';
import {connectToStyles} from '@uber/superfine-react';
import isEqual from 'lodash/isEqual';
import {LocationMap} from './map';
import LocationModal from './location-modal';
import {matches} from './utils';
import {NEW_LOCATION_UUID} from './constants';
import React from 'react';
import ReactDOM from 'react-dom';
import Search from '@uber/react-inline-icons/search';
import type {SuperfineStylePropType} from '../../../util/types';
import t from '../../../util/i18n';
import {TextInput} from '@uber/react-inputs';

After running import-sort, I get:

 import type {AccountType} from '../../../types/thrift/yellow/yellow';
-import {connectToStyles} from '@uber/superfine-react';
-import isEqual from 'lodash/isEqual';
 import {LocationMap} from './map';
 import LocationModal from './location-modal';
-import {matches} from './utils';
 import {NEW_LOCATION_UUID} from './constants';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Search from '@uber/react-inline-icons/search';
 import type {SuperfineStylePropType} from '../../../util/types';
+import {TextInput} from '@uber/react-inputs';
+import {connectToStyles} from '@uber/superfine-react';
+import isEqual from 'lodash/isEqual';
+import {matches} from './utils';
 import t from '../../../util/i18n';
-import {TextInput} from '@uber/react-inputs';

Unfortunately this file now produces an error in ESLint:

index.js
  13:1  error  Imports should be sorted alphabetically                     sort-imports

package.json
"fix:sort": "import-sort -o ./"

command
npm run fix:sort

debug.log

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/8.2.1/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'run',
1 verbose cli   'fix:sort' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prefix:sort', 'fix:sort', 'postfix:sort' ]
5 info lifecycle [email protected]~prefix:sort: [email protected]
6 info lifecycle [email protected]~fix:sort: [email protected]
7 verbose lifecycle [email protected]~fix:sort: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~fix:sort: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/Herc/Documents/RADAR/RADAR-Dashboard/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/Herc/Library/Android/sdk/platform-tools:/Users/Herc/Library/Android/sdk/platform-tools
9 verbose lifecycle [email protected]~fix:sort: CWD: /Users/Herc/Documents/RADAR/RADAR-Dashboard
10 silly lifecycle [email protected]~fix:sort: Args: [ '-c', 'import-sort -o ./' ]
11 silly lifecycle [email protected]~fix:sort: Returned: code: 1  signal: null
12 info lifecycle [email protected]~fix:sort: Failed to exec fix:sort script
13 verbose stack Error: [email protected] fix:sort: `import-sort -o ./`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:289:16)
13 verbose stack     at emitTwo (events.js:125:13)
13 verbose stack     at EventEmitter.emit (events.js:213:7)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
13 verbose stack     at emitTwo (events.js:125:13)
13 verbose stack     at ChildProcess.emit (events.js:213:7)
13 verbose stack     at maybeClose (internal/child_process.js:921:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
14 verbose pkgid [email protected]
15 verbose cwd /Users/Herc/Documents/RADAR/RADAR-Dashboard
16 verbose Darwin 16.7.0
17 verbose argv "/usr/local/Cellar/node/8.2.1/bin/node" "/usr/local/bin/npm" "run" "fix:sort"
18 verbose node v8.2.1
19 verbose npm  v5.3.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] fix:sort: `import-sort -o ./`
22 error Exit status 1
23 error Failed at the [email protected] fix:sort script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Note:
Running npx import-sort -o ./ exits without errors.