Inline eslint comment in JSX

Question

I'm getting an error (eslint): Line 199 exceeds maximum line length of 120. (max-len)

Why doesn't this inline comment work?

{/* eslint-disable-next-line max-len */}
<Chip ref="code" style={styles.chip}backgroundColor={this.state.filterSelected['School Code'] && blue300}onTouchTap={this.handleTouchTap} >
            <Avatar size={32}>C</Avatar>
            School Code
</Chip>

Solution 1

eslint-disable-line and eslint-disable-next-line are only in inline comments.

There is currently an open issue for this in eslint

So you would have to write it as the following:

{
  // eslint-disable-next-line max-len
}<Chip ref="code" style={styles.chip}backgroundColor={this.state.filterSelected['School Code'] && blue300}onTouchTap={this.handleTouchTap} >
            <Avatar size={32}>C</Avatar>
            School Code
</Chip>

Solution 2

Daniel's answer works fine, but it breaks "jsx-one-expression-per-line".

Latest version of eslint (6.5.1) supports the multi-line comment method as shown in question. There isn't need to change anything.

Solution 3

If maybe happens that you are using a conditional before the jsx you want to disable eslint you could do this (without the need of { } just for the comment line):

condition && (
    // eslint-disable-next-line
    <Component props={...props} />
      {...children}
    </Component>
  )