question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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)

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:11
  • Comments:15 (10 by maintainers)

github_iconTop GitHub Comments

40reactions
mysticateacommented, Sep 1, 2016

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.

30reactions
merlinpattcommented, Mar 31, 2017

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Inline eslint comment in JSX - Stack Overflow
Inline eslint comment in JSX ; 1. The comment should work fine, the error is about the length of the second line, as...
Read more >
Learn to configure ESLINT and PRETTIER in react
The best part of a linter is finding potential errors in your code that don't look ... and then you can run ESLint...
Read more >
Introducing JSX - React
This funny tag syntax is neither a string nor HTML. It is called JSX, and it is a syntax extension to JavaScript. We...
Read more >
User Guide | eslint-plugin-vue
Official ESLint plugin for Vue.js.
Read more >
How ESLint Makes Me a Better React Developer - ITNEXT
Linting tools like ESLint allow developers to discover problems with ... ESLint is a file in a project repo called .eslintrc with a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found