Eslint 规则在 import 中添加新行

Question

The rule that I'm looking should show error in this case:

import {MY_CONSTANT1, MY_CONSTANT2, MY_CONSTANT3}

And considered as fine in this case:

import {
   MY_CONSTANT1, 
   MY_CONSTANT2, 
   MY_CONSTANT3
}

Is there such eslint rule?

Answer 1

I was looking for such a rule for both import and export declaration. As a result I've made a plugin with autofix.

So plugin transforms the code

import { k1, k2 } from 'something'

into

import {
  k1,
  k2
} from 'something'

and code

export { name1, name2, nameN }

into

export {
  name1,
  name2,
  nameN
}

Answer 2

Edit:

Anton Antonov made a plugin that enforces this rule better than object-curly-newline can: https://stackoverflow.com/a/60477269/6179417

---

Old answer

Add the object-curly-newline rule to your .eslintrc.json , where at least ImportDeclaration is set to always (the other settings have no effect for enforcing newlines in import declarations).

Example:

"object-curly-newline": ["error", {
   "ObjectExpression": "always",
   "ObjectPattern": { "multiline": true },
   "ImportDeclaration": "always",
   "ExportDeclaration": { "multiline": true, "minProperties": 3 }
}]

This pattern will now result in an error:

While this is valid:

However, there is a catch - this rule only requires newlines after the opening brace and before the closing brace, so you can still double up on imports as long as they have newlines in between the braces:

Answer 3

I was looking for the solution and unfortunately have only found your question. I have decided to learn a bit about how eslint works and how to write your own plugins and created mine. If you know the parsed the AST node structure it is really easy to work with. Here is the plugin's main file. Autofix is more tricky though so I do not include it as it biased towards my formatting standards.

module.exports = {
  rules: {
    'single-import-per-line': {
      create (context) {
        return {
          ImportDeclaration(node) {
            if (node.specifiers.length < 2) {
              return;
            }

            let previousImport = node.specifiers[0];
            for (let i = 1; i < node.specifiers.length; i++) {
              const currentImport = node.specifiers[i];

              // Omit the first condition if you want to put default imports on a new line as well
              if (previousImport.type !== 'ImportDefaultSpecifier'
                && currentImport.loc.start.line === previousImport.loc.end.line
              ) {
                context.report({ node, message: 'Your message' });
                return;
              }

              previousImport = currentImport;
            }
          },
        };
      },
    },
  },
};

Answer 4

Maybe you should use spaces inside curly braces to avoid such error

import { MY_CONSTANT1, MY_CONSTANT2, MY_CONSTANT2 }

You can read about object-curly-spacing rule.

Answer 5

Update on Anton Antonov answer for eslint 8

Because Anton Antonovs repository has been archived and gives meta.fixable error with eslint 8. I Recommend to use ruudandriessenfork of the project .

How to use fork:

1. Install fork

npm install eslint-plugin-modules-newlines --save-dev

2. Change all references inside eslint config file of modules-newline -> modules-newlines

Error:

ESLint: Fixable rules must set the `meta.fixable` property to "code" or "whitespace".
Occurred while linting ... Rule: "modules-newline/import-declaration-newline".
Please see the 'ESLint' output channel for details.

Answer 6

you can try this

"semicolon": [true, "always"]