eslint: eslint-disable-next-line does not work in html portion of .jsx files

What version of ESLint are you using? 2.13.1 What parser (default, Babel-ESLint, etc.) are you using? babel-eslint Please show your full configuration:

parser: babel-eslint

env:
  node: true
  browser: true
  es6: true

parserOptions:
  ecmaVersion: 6
  sourceType: 'module'
  ecmaFeatures:
    jsx: true
    experimentalObjectRestSpread: true

plugins:
  - react
  - import
  - lodash

settings:
  import/parser: babel-eslint
  import/resolver:
    webpack:
      config: 'webpack/config.dev.js'

extends: 'eslint:recommended'

globals:
  google: true
  Backbone: true

rules:
  space-before-blocks: error
  semi: error
  no-debugger: error
  curly: [error, all]
  no-eval: error
  no-with: error
  no-caller: error
  no-empty: error
  no-octal: error
  no-undef: error
  no-unused-vars: [error, {"args": "none", "varsIgnorePattern": "ignored"}]
  no-mixed-spaces-and-tabs: error
  no-redeclare: [error, {builtinGlobals: true}]
  new-cap: error
  no-bitwise: error
  guard-for-in: error
  eqeqeq: error
  strict: [error, global]
  no-const-assign: error
  no-var: error
  no-empty-pattern: error
  no-constant-condition: error
  no-useless-escape: error
  max-statements-per-line: error
  no-duplicate-imports: error
  object-curly-spacing: error
  space-before-function-paren: [error, never]
  keyword-spacing: error
  space-infix-ops: error
  comma-spacing: error
  no-extra-semi: error
  no-multi-spaces: error
  array-bracket-spacing: error
  computed-property-spacing: error
  eol-last: error
  linebreak-style: error
  no-spaced-func: error
  no-trailing-spaces: error
  semi-spacing: error
  space-in-parens: error
  space-unary-ops: error
  spaced-comment: error
  arrow-spacing: error
  template-curly-spacing: error
  comma-dangle: [error, always-multiline]
  block-scoped-var: error
  comma-style: [error, last]
  no-cond-assign: [error, except-parens]
  no-multiple-empty-lines: [error, {max: 2}]
  no-extend-native: error
  no-irregular-whitespace: error
  no-iterator: error
  no-multi-str: error
  no-new: error
  no-proto: error
  no-script-url: error
  no-sequences: error
  no-whitespace-before-property: error
  no-useless-rename: error
  padded-blocks: [error, never]
  rest-spread-spacing: [error, never]
  valid-typeof: error
  wrap-iife: [error, inside]
  indent:
    - error
    - 2
    -
      SwitchCase: 1
      VariableDeclarator:
        var: 2
        let: 2
        const: 3
  func-style: [warn, 'declaration', {"allowArrowFunctions": true}]
  no-magic-numbers:
    - warn
    -
      enforceConst: true
      ignore:
        - -1 
        - 0
        - 0.5 
        - 1
        - 2   
        - 100
  camelcase: [warn, {properties: never}]
  one-var: [warn, never]
  jsx-quotes: [off, prefer-single]
  quotes: [off, single, avoid-escape]
  dot-notation: off
  no-plusplus: off
  no-loop-func: off
  no-shadow: off
  no-extra-parens: off
  no-extra-boolean-cast: off
  react/jsx-no-duplicate-props: error
  react/jsx-no-undef: error
  react/jsx-uses-react: error
  react/jsx-uses-vars: error
  react/no-did-update-set-state: error
  react/react-in-jsx-scope: error
  react/no-direct-mutation-state: error
  react/display-name: error
  react/no-deprecated: error
  react/no-is-mounted: error
  react/no-unknown-property: error
  react/jsx-equals-spacing: error
  react/jsx-no-target-blank: error
  react/jsx-curly-spacing: error
  react/prop-types: error
  react/self-closing-comp: warn
  react/require-extension: warn
  react/no-did-mount-set-state: warn
  react/no-danger: warn
  react/jsx-handler-names: warn
  react/jsx-boolean-value: off
  react/wrap-multilines: off
  react/no-set-state: off
  react/jsx-no-literals: off
  react/no-multi-comp: off
  react/jsx-max-props-per-line: off
  react/forbid-prop-types: off
  react/jsx-closing-bracket-location: off
  react/jsx-indent-props: off
  react/jsx-sort-prop-types: off
  react/jsx-sort-props: off
  react/sort-comp: off
  import/no-unresolved: error
  import/named: error
  import/default: error
  import/namespace: error
  import/export: error
  import/no-named-as-default: error
  import/no-named-as-default-member: error
  lodash/callback-binding: error
  lodash/no-extra-args: error
  lodash/unwrap: error

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

import React from 'react';
export default class Link extends React.Component {

  render() {
    return (
      <div>
        {/* eslint-disable-next-line react/jsx-no-target-blank */}
        <a href='https://flexport.com' target='_blank'>foo</a>
      </div>
    );
  }
}

What did you expect to happen? I expected eslint to allow … on the next line of code What actually happened? Please include the actual, raw output from ESLint.

$ ./node_modules/.bin/eslint --ext .js --ext .jsx test.jsx

/Users/.../.../test.jsx
  8:40  error  Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank

✖ 1 problem (1 error, 0 warnings)

Workaround: Use eslint-disable and eslint-enable which work as expected.

import React from 'react';
export default class Link extends React.Component {

  render() {
    return (
      <div>
        {/* eslint-disable react/jsx-no-target-blank */}
        <a href='https://flexport.com' target='_blank'>foo</a>
        {/* eslint-enable react/jsx-no-target-blank */}
        <a href='https://flexport.com' target='_blank'>bar</a>
      </div>
    );
  }
}

Output is as expected, the first _blank (line 8) is accepted and the 2nd _blank (line 10) throws an error.

$ ./node_modules/.bin/eslint --ext .js --ext .jsx test.jsx

/Users/.../.../test.jsx
  10:40  error  Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank

✖ 1 problem (1 error, 0 warnings)

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 11
Comments: 15 (10 by maintainers)

Most upvoted comments

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

import React from 'react';
export default class Link extends React.Component {

  render() {
    return (
      <div>{
        //eslint-disable-next-line react/jsx-no-target-blank
        }<a href='https://flexport.com' target='_blank'>foo</a>
      </div>
    );
  }
}

It might be convenient for JSX if those are supported in block comments also.

+40

mysticatea on Sep 1, 2016

This issue should not be closed as this as allowing block comment disabling in JSX is still important for me and my team. I assume there are others who would prefer this behavior instead of being forced to put every attribute on a new line

+30

merlinstardust on Mar 31, 2017

I think this is worth fixing, as it shouldn’t be very difficult and would help people who write JSX out a lot. JSX doesn’t currently allow single line comments, so being able to write these comments as block comments would be beneficial. See https://github.com/facebook/react/issues/1831 for more info.

+14

kaicataldo on Oct 13, 2016

kaicataldo’s comment was exactly the solution I needed. I had forgotten about this issue until the recent traffic. We adopted the pattern of placing each attribute on its own line, and //eslint-disable-next-line works within the list of attributes.

Kaicataldo’s code snippet which currently works:

import React from 'react';
export default class Link extends React.Component {

  render() {
    return (
      <div>
        <a href='https://flexport.com'
          // eslint-disable-next-line react/jsx-no-target-blank
          target='_blank'>foo</a>
      </div>
    );
  }
}

import React from 'react';
export default class Link extends React.Component {

  render() {
    return (
      <div>
        <a href='https://flexport.com'
          target='_blank' // eslint-disable-line react/jsx-no-target-blank
        >foo</a>
      </div>
    );
  }
}

erezny on Mar 31, 2017

Just a quick note: eslint-disable-line and eslint-disable-line comments must be single line comments.

Yeah, there’s some weirdness here. It does work, but it’s very finicky. I’m noticing that moving the comments into the opening <a> tag or after the closing </div> tag works, but not anywhere in between (in between <a> and </a> or between </a> and </div>). I’m not sure why this behaves the way it does, but these work (first one seems like it could suit your use case?):

import React from 'react';
export default class Link extends React.Component {

  render() {
    return (
      <div>
        <a href='https://flexport.com'
          // eslint-disable-next-line react/jsx-no-target-blank
          target='_blank'>foo</a>
      </div>
    );
  }
}

import React from 'react';
export default class Link extends React.Component {

  render() {
    return (
      <div>
        <a href='https://flexport.com'
          target='_blank' // eslint-disable-line react/jsx-no-target-blank
        >foo</a>
      </div>
    );
  }
}

kaicataldo on Sep 1, 2016

I’m just now running across this on a CRA-based app that, after update to the latest, starting throwing out warnings that I need to silence for now as well. I’ve tried all the recommendations here and can’t get it to suppress the warning. Mine are similar, in my case the href="#" warning from jsx-ally/href-no-hash.

newtmitch on Jun 16, 2017