no-inline-comments - Eslint

Some style guides disallow comments on the same line as code. Code can become difficult to read if comments immediately follow the code on the same line. On the other hand, it is sometimes faster and more obvious to put comments immediately following code.

Rule Details

This rule disallows comments on the same line as code.

Examples of incorrect code for this rule:

::: incorrect

/*eslint no-inline-comments: "error"*/

const a = 1; // declaring a to 1

function getRandomNumber(){
    return 4; // chosen by fair dice roll.
              // guaranteed to be random.
}

/* A block comment before code */ const b = 2;

const c = 3; /* A block comment after code */

:::

Examples of correct code for this rule:

::: correct

/*eslint no-inline-comments: "error"*/

// This is a comment above a line of code
const foo = 5;

const bar = 5;
//This is a comment below a line of code

:::

JSX exception

Comments inside the curly braces in JSX are allowed to be on the same line as the braces, but only if they are not on the same line with other code, and the braces do not enclose an actual expression.

Examples of incorrect code for this rule:

::: incorrect { "parserOptions": { "ecmaFeatures": { "jsx": true } } }

jsx

/*eslint no-inline-comments: "error"*/

const foo = <div>{ /* On the same line with other code */ }<h1>Some heading</h1></div>;

const bar = (
    <div>
    {   // These braces are not just for the comment, so it can't be on the same line
        baz
    }
    </div>
);

:::

Examples of correct code for this rule:

::: correct { "parserOptions": { "ecmaFeatures": { "jsx": true } } }

jsx

/*eslint no-inline-comments: "error"*/

const foo = (
    <div>
      <h1>Some heading</h1>
    </div>
)

const bar = (
    <div>
    {
        // There is nothing else on this line
        baz
    }
    </div>
);

const quux = (
    <div>
      {/*
        Multiline
        comment
      */}
      <h1>Some heading</h1>
    </div>
)

:::

Options

ignorePattern

To make this rule ignore specific comments, set the ignorePattern option to a string pattern that will be passed to the RegExp constructor.

Examples of correct code for the ignorePattern option:

::: correct

/*eslint no-inline-comments: ["error", { "ignorePattern": "webpackChunkName:\\s.+" }]*/

import(/* webpackChunkName: "my-chunk-name" */ './locale/en');

:::

Examples of incorrect code for the ignorePattern option:

::: incorrect

/*eslint no-inline-comments: ["error", { "ignorePattern": "something" }] */

const foo = 4; // other thing

:::