eslint-disable-next-line does not work in html portion of .jsx files
See original GitHub issueWhat 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:
- Created 7 years ago
- Reactions:11
- Comments:15 (10 by maintainers)
Top 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 >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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
eslint-disable-line
andeslint-disable-next-line
are supported in only line comments.It might be convenient for JSX if those are supported in block comments also.
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