eslint: object-curly-newline for named imports not working as expected

Tell us about your environment

  • ESLint Version: 6.1.0
  • Node Version: 12.2
  • npm Version: 6.9.0

What parser (default, Babel-ESLint, etc.) are you using? default through webstorm

Please show your full configuration:

Configuration
{
  "parser": "babel-eslint",
  "extends": [
    "airbnb"
  ],
  "env": {
    "browser": true
  },
  "rules": {
    "arrow-parens": "off",
    "comma-dangle": ["error", "never"],
    "semi": ["error", "never"],
    "no-confusing-arrow": "off",
    "no-unused-expressions": "off",
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "react/jsx-one-expression-per-line": "off",
    "import/prefer-default-export": "off",
    "no-param-reassign": "off",
    "no-unused-vars": "off",
    "import/extensions": "off",
    "react/no-unused-prop-types": "off",
    "object-curly-newline": ["error", {
      "ObjectExpression": {"minProperties": 1},
      "ObjectPattern": {"minProperties": 1},
      "ImportDeclaration": {
        "multiline": true,
        "minProperties": 1,
        "consistent": true
      },
      "ExportDeclaration": "always"
    }],
    "object-property-newline": ["error", {
      "allowAllPropertiesOnSameLine": false
    }]
  },
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "configs/webpack.config.dev.js"
      }
    }
  },
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "configs/webpack.config.dev.js"
      }
    }
  },
  "plugins": [
    "react"
  ]
}

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

automatically done by webstorm

What did you expect to happen? I expect this code

import {
  Button, Divider,
  Grid, LinearProgress, Link, MuiThemeProvider, Paper, Typography, withStyles
} from '@material-ui/core'

What actually happened? Please include the actual, raw output from ESLint. to be like this

import {
  Button, 
  Divider,
  Grid,
  LinearProgress, 
  Link, 
  MuiThemeProvider, 
  Paper, 
  Typography, 
  withStyles
} from '@material-ui/core'

Are you willing to submit a pull request to fix this bug? No

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 6
  • Comments: 16 (5 by maintainers)

Commits related to this issue

Most upvoted comments

Same here. On my project, we want to be able to see github blame for each named import. To do that we need developers to put each named import on a separate line. So the ability to enforce one named import per line would be amazing.

@lukenofurther thanks for the suggestions!

Correct examples do not intend to represent the result of eslint --fix applied to incorrect examples.

"object-curly-newline": ["error", { "ImportDeclaration": "always" }] expects a line break after {, and a line break before }.

Any code that satisfies these conditions is correct for this rule:

// correct example
import {
  foo,
  bar
} from "lodash"

// also correct example
import {
    foo, bar
} from "lodash"

// incorrect example
import { foo, bar } from "lodash"

// incorrect example
import { foo, 
bar } from "lodash"

// incorrect example
import { foo, bar
} from "lodash"

// incorrect example
import { 
foo, 
bar } from "lodash"

The documentation is correct in this case, but it would be nice to have both examples (with and without line breaks between foo and bar). PR is welcome!

--fix works as intended, because it makes a minimal change in the code to make it valid for this rule.

As for the line breaks between foo and bar, we don’t have a rule to enforce/disallow these at the moment. Feel free to open a new rule proposal!

I can probably expand a little on this, but only using the 5.16.0 version of ESLint and using babel-eslint as the parser. (limited to 5.16.0 as we’re using create-react-app on the project and that has a hard requirement for the 5.x series of ESLint) I’m experiencing the same problem as @antoniogiordano is, but I at least know how to provide additional information on my config.

This is the simplified rule from my .eslintrc.js:

    'object-curly-newline': ['error', {
        "ImportDeclaration": { "minProperties": 3, "consistent": false, "multiline": true },
    }],

According to the example on the ESLint documentation ( https://eslint.org/docs/rules/object-curly-newline#multiline) the following line should raise an error with ESLint as it has a) >= 3 named imports and b) all of them on the very same line, which should be forbidden by the multiline: true setting:

import {
  ButtonControl, DatePickerControl, SelectControl, TextboxControl,
} from '../../../../shared/Form/elements';

I would expect this to be reformatted to have each import on it’s own line:

import {
  ButtonControl,
  DatePickerControl,
  SelectControl,
  TextboxControl,
} from '../../../../shared/Form/elements';

Calling eslint from the commandline to analyze just one file like this: .\node_modules\.bin\eslint --ext=jsx ./project/index.js

I also tried changing the object-property-newline rule to disable the allowAllPropertiesOnSameLine option, but that doesn’t seem to have any effect at all.

If I change the conflicting import to be just a single line it will complain, but only move the named imports to the format specified above on a single line with the parenthesis on separate lines.

I’ll gladly provide an example on Monday afternoon when I’m in the office again.