Indent rule - Reports incorrectly for function expressions containing Flowtype annotations

[jonvuri]

Tell us about your environment

• ESLint Version: 4.3.0
• Node Version: 8.2.1
• npm Version: 5.3.0

What parser (default, Babel-ESLint, etc.) are you using?
babel-eslint

Please show your full configuration:

Configuration

---

parser: babel-eslint

parserOptions:
  ecmaVersion: 6
  impliedStrict: true
  ecmaFeatures:
    arrowFunctions: true
    blockBindings: true
    classes: true
    defaultParams: true
    destructuring: true
    forOf: true
    generators: false
    modules: true
    objectLiteralComputedProperties: true
    objectLiteralDuplicateProperties: false
    objectLiteralShorthandMethods: true
    objectLiteralShorthandProperties: true
    spread: true
    superInFunctions: true
    templateStrings: true
    jsx: true

env:
  browser: true
  mocha: true
  es6: true

globals:
  expect: false

plugins:
  - react
  - flowtype
  - fp

settings:
  flowtype:
    onlyFilesWithFlowAnnotation: true


extends:
  - eslint:recommended
  - plugin:react/recommended

rules:

  # Babel inserts 'use strict' for us already
  strict:
    - error
    - never


  # Best Practices

  array-callback-return: error
  complexity:
    - error
    - 8
  curly: error
  default-case: error
  dot-notation: error
  eqeqeq: error
  no-alert: error
  no-div-regex: error
  no-empty-function: error
  no-eval: error
  no-extend-native: error
  no-extra-bind: error
  no-implicit-coercion: error
  no-implicit-globals: error
  no-implied-eval: error
  no-invalid-this: error
  no-labels: error
  no-lone-blocks: error
  no-loop-func: error
  no-multi-spaces: error
  no-multi-str: error
  no-native-reassign: error
  no-new: error
  no-new-func: error
  no-new-wrappers: error
  no-param-reassign:
    - error
    - props: true
  no-return-assign: error
  no-script-url: error
  no-self-compare: error
  no-sequences: error
  no-throw-literal: error
  no-unmodified-loop-condition: error
  no-unused-expressions: error
  no-useless-call: error
  no-useless-concat: error
  no-useless-escape: error
  no-void: error
  no-warning-comments: warn
  no-with: error
  wrap-iife: error
  yoda: error


  # Variables

  init-declarations: error
  no-shadow:
    - error
    - hoist: all
  no-shadow-restricted-names: error
  no-use-before-define: error


  # Stylistic

  array-bracket-spacing:
    - error
    - always
  brace-style: error
  camelcase: error
  comma-dangle:
    - error
    - never
  comma-spacing: error
  comma-style: error
  computed-property-spacing:
    - error
    - always
  consistent-this: error
  eol-last: error
  indent:
    - error
    - 2
    - SwitchCase: 1
  key-spacing: error
  keyword-spacing: error
  linebreak-style: error
  max-depth:
    - error
    - 5
  max-len:
    - error
    - 110
  max-nested-callbacks:
    - error
    - 4
  max-params:
    - error
    - 4
  max-statements:
    - error
    - 20
    - ignoreTopLevelFunctions: true
  max-statements-per-line: error
  new-parens: error
  newline-after-var: error
  newline-before-return: error
  newline-per-chained-call: error
  no-array-constructor: error
  no-bitwise: error
  no-continue: error
  no-extra-parens: error
  no-inline-comments: error
  no-lonely-if: error
  no-mixed-spaces-and-tabs: error
  no-multiple-empty-lines:
    - error
    - max: 2
      maxEOF: 1
      maxBOF: 0
  no-negated-condition: error
  no-new-object: error
  no-plusplus: error
  no-restricted-syntax:
    - error
    - TryStatement
    - FunctionDeclaration
  no-spaced-func: error
  no-trailing-spaces:
    - error
    - skipBlankLines: true
  no-unneeded-ternary: error
  no-whitespace-before-property: error
  object-curly-spacing:
    - error
    - always
  object-property-newline:
    - error
    - allowMultiplePropertiesPerLine: true
  one-var:
    - error
    - never
  operator-assignment: error
  quote-props:
    - error
    - as-needed
  quotes:
    - error
    - single
  semi:
    - error
    - never
  space-before-blocks: error
  space-in-parens:
    - error
    - always
  space-infix-ops:
    - error
  space-unary-ops: error
  spaced-comment: error
  unicode-bom: error


  # ES2015

  arrow-body-style: error
  arrow-parens: error
  arrow-spacing: error
  no-useless-computed-key: error
  no-var: error
  object-shorthand: error
  prefer-const: error
  prefer-spread: error
  prefer-template: error
  template-curly-spacing:
    - error
    - always


  # React

  react/display-name: off
  react/jsx-boolean-value: error
  react/jsx-closing-bracket-location: error
  react/jsx-closing-tag-location: error
  react/jsx-curly-spacing:
    - error
    - always
  react/jsx-equals-spacing: error
  react/jsx-filename-extension: error
  react/jsx-first-prop-new-line:
    - error
    - multiline
  react/jsx-handler-names: error
  react/jsx-indent:
    - error
    - 2
  react/jsx-indent-props:
    - error
    - 2
  react/jsx-key: error
  react/jsx-max-props-per-line:
    - error
    - maximum: 4
  react/jsx-no-bind: error
  react/jsx-no-comment-textnodes: error
  react/jsx-no-target-blank: error
  react/jsx-pascal-case: error
  react/jsx-tag-spacing: error
  react/jsx-wrap-multilines:
    - error
    - declaration: false
      assignment: false
      arrow: false
      return: true
  react/prefer-stateless-function: error
  react/prop-types: off
  #react/require-optimization: error
  react/require-extension: off
  react/self-closing-comp: error
  react/sort-comp: error


  # Flowtype

  flowtype/require-parameter-type: error
  flowtype/require-return-type: error
  flowtype/space-after-type-colon:
    - error
    - always
  flowtype/space-before-type-colon:
    - error
    - never

What did you do? Please include the actual source code causing the issue.

const fn = ( {
  state
} ) =>
  <App>
    <Router />
  </App>

const fn = ( {
  state
}: State ): React.Element =>
  <App>
    <Router />
  </App>

What did you expect to happen?
Neither of the above patterns to return errors.

What actually happened? Please include the actual, raw output from ESLint.
The second pattern above returned an error (for the line containing }: State ): React.Element =>):
error Expected indentation of 2 spaces but found 0 indent

Note: This works correctly in indent-legacy

[not-an-aardvark]

Hi, thanks for reporting.

This issue is occurring due to an invariant of regular JS which doesn't exist for Flow (namely, that the last token of an ObjectPattern is a closing curly brace). We generally don't guarantee that core ESLint rules will work as expected with custom syntax.

However, I think it might be possible to make the rule more robust in this case so that it handles custom syntax more gracefully.

[jonvuri]

@not-an-aardvark Thanks for the clarification. It was my impression that Flowtype annotations were fully supported with the babel-eslint parser, though - Is that not the case? And is this actually a babel-eslint issue?

[not-an-aardvark]

babel-eslint is just a parser, so it can produce an AST for files with Flowtype annotations (i.e. allow ESLint to start running rules on them). However, core ESLint rules are generally designed for plain JavaScript, and it wouldn't be possible for them to account for all possible custom syntax extensions correctly (since any given custom syntax extension might have its own semantics, which ESLint wouldn't be able to know beforehand). As a result, there are some cases where core ESLint rules don't handle a particular custom syntax as users would expect.

Our policy is generally that we're fine with making core rules more robust when dealing with custom syntax in general, but we don't accept code that explicitly accounts for the semantics of a particular custom syntax. In those cases, we generally encourage people to create custom rules and get them added to eslint-plugin-babel, which has some replacements for core rules that handle some particular syntax extensions correctly.

To clarify, I think this particular case might fall into the first category (making the rule more robust against custom syntax in general), which would mean we can fix it in the core rule.

[ardok]

Glad I'm not the only one.
I just didn't find this here first and already posted on StackOverflow instead :(

[milesj]

Also having this problem.

[lll000111]

(Regarding Flow type annotations)

That is what the eslint-plugin-flowtype plugin is for? There also is babel-plugin-transform-flow-strip-type to just strip the types (I prefer the first plugin, why not have some checks instead of just stripping the types).