Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Clarification of `sort-imports` rule with destructuring imports

See original GitHub issue

ESLint version 2.1.0.

I think any destructuring import should be grouped together when using sort-imports rule.

Right now, this is valid with default options:

import { Router, browserHistory as history } from 'react-router'
import React from 'react'
import { render } from 'react-dom'
import routes from './routes'

Where as, it is easier to read if everything that started with a { were grouped together, like so:

import { Router, browserHistory as history } from 'react-router'
import { render } from 'react-dom'
import React from 'react'
import routes from './routes'

While technically, it is a single import, I find it looks out of place. So, I am not sure if this would be considered a bug, or a feature request?

Sorry about the title, not sure how to describe this well. Feel free to adjust the title.

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:11 (10 by maintainers)

github_iconTop GitHub Comments

wyzecommented, Feb 25, 2016

I went ahead and implemented this in my own plugin as I was uncertain if it would get merged into core. I just wanted to share the diff, which isn’t too bad. I am not sure if this could be done with an option or not, but would be cool to see this in core.

Line 19

-  memberSyntaxSortOrder = configuration.memberSyntaxSortOrder || ["none", "all", "multiple", "single"],
+  memberSyntaxSortOrder = configuration.memberSyntaxSortOrder || ["none", "all", "named", "default"],

Lines 38-41

-  } else if (node.specifiers.length === 1) {
-    return "single";
-  } else {
-    return "multiple";
+  } else if (node.specifiers[0].type === "ImportDefaultSpecifier") {
+    return "default";
+  } else {
+    return "named";

Line 153

-  "enum": ["none", "all", "multiple", "single"]
+  "enum": ["none", "all", "named", "default"]

You can see my full implementation over here:

Curious on your thoughts and feedback.

nzakascommented, May 16, 2016

No team members stepped forward to champion this change, so closing.

Read more comments on GitHub >

github_iconTop Results From Across the Web

sort-imports - ESLint - Pluggable JavaScript Linter
This rule checks all import declarations and verifies that all imports are first sorted by the used member syntax and then alphabetically by...
Read more >
Definition for rule 'simple-import-sort/sort' was not found ...
It may be that you're using v6. It looks like v6 doesn't have a simple-import-sort/sort rule, see usage in the README.
Read more >
Shorter syntax for Node.js module import - Code Buckets
I've found myself writing a lot of import module statements during React development that ... ES6 Destructuring – good detailed explanation.
Read more >
Sorting your imports with ESLint - DEV Community ‍ ‍
The "react" import should always come first; Package imports should come next, sorted by alphabetical order; The named imports should be sorted ...
Read more >
Destructuring and parameter handling in ECMAScript 6 - 2ality
Recall the rule for default values: If the part has no match in the source, destructuring continues with the default value […]. The...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found