Plugin adding an extra line between global eslint ignore comments

[csandman]

For some reason, there is an extra line being added between each of my global eslint ignore comments:

/* eslint-disable jsx-a11y/anchor-is-valid */

/* eslint-disable react/jsx-key */

/* eslint-disable jsx-a11y/alt-text */
import {
  Document,
  Image,
  Link,
  Page,
  StyleSheet,
  Text,
  View,
} from "@react-pdf/renderer";
import abbreviateNumber from "utils/abbreviate-number";

If I remove them and format with prettier (I have it run on save in VSCode) they get re-added.

I also have not turned on importOrderSeparation, and tried it by settings "importOrderSeparation": false and this is still happening, not sure why these extra lines are getting added.

[ayusharma]

Hi, Thanks for the issue.

Could you please provide the code which you are trying to format?

[csandman]

Here is a minimal reproduction:

Before:

/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable react/jsx-key */
/* eslint-disable jsx-a11y/alt-text */
import { useState } from "react";
import { Button, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";

const Test = () => {
  const [test, setTest] = useState("test");

  return (
    <Menu>
      <MenuButton as={Button}>{test}</MenuButton>
      <MenuList>
        <MenuItem onClick={() => setTest("download")}>Download</MenuItem>
        <MenuItem>Create a Copy</MenuItem>
        <MenuItem>Mark as Draft</MenuItem>
        <MenuItem>Delete</MenuItem>
        <MenuItem>Attend a Workshop</MenuItem>
      </MenuList>
    </Menu>
  );
};

export default Test;

After:

/* eslint-disable jsx-a11y/anchor-is-valid */

/* eslint-disable react/jsx-key */

/* eslint-disable jsx-a11y/alt-text */
import { useState } from "react";
import { Button, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";

const Test = () => {
  const [test, setTest] = useState("test");

  return (
    <Menu>
      <MenuButton as={Button}>{test}</MenuButton>
      <MenuList>
        <MenuItem onClick={() => setTest("download")}>Download</MenuItem>
        <MenuItem>Create a Copy</MenuItem>
        <MenuItem>Mark as Draft</MenuItem>
        <MenuItem>Delete</MenuItem>
        <MenuItem>Attend a Workshop</MenuItem>
      </MenuList>
    </Menu>
  );
};

export default Test;

With these as my prettier settings:

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf",
  "importOrder": [
    "^react$",
    "^next/.+$",
    "^@chakra-ui/react$",
    "^@chakra-ui/.+$",
    "<THIRD_PARTY_MODULES>",
    "^stores/.+$",
    "^components/.+$",
    "^hooks/.+$",
    "^utils/.+$",
    "^data/.+$",
    "^styles/.+$",
    "^\\.?\\./.+$"
  ],
  "importOrderSortSpecifiers": true,
  "importOrderSeparation": false,
  "importOrderCaseInsensitive": false,
  "importOrderParserPlugins": ["typescript", "jsx"],
  "overrides": [
    {
      "files": "*.svg",
      "options": {
        "parser": "html"
      }
    }
  ]
}

[byara]

Hey @csandman just as a quick fix to this issue, I suggest you to use single line comments instead of multiline comments. For eample:

// eslint-disable jsx-a11y/anchor-is-valid
// eslint-disable react/jsx-key
// eslint-disable jsx-a11y/alt-text
import { useState } from "react";
import { Button, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";

const Test = () => {
  const [test, setTest] = useState("test");

  return (
    <Menu>
      <MenuButton as={Button}>{test}</MenuButton>
      <MenuList>
        <MenuItem onClick={() => setTest("download")}>Download</MenuItem>
        <MenuItem>Create a Copy</MenuItem>
        <MenuItem>Mark as Draft</MenuItem>
        <MenuItem>Delete</MenuItem>
        <MenuItem>Attend a Workshop</MenuItem>
      </MenuList>
    </Menu>
  );
};

export default Test;

I leave the issue open, because we are still trying to figure out why babel generator transforms those multiline comments like that.

[csandman]

@byara for the most part, these comments aren't added manually, they're added by hovering an eslint error in VSCode, and clicking on the "quick fix" option for disabling it for the file. So we could go in and replace them all, but it seems like a strange behavior non-the-less.

[csandman]

@byara By the way, just wanted to mention that using single line comments is not a solution to this problem, as only block comments disable a rule for an entire file: https://eslint.org/docs/2.13.1/user-guide/configuring#disabling-rules-with-inline-comments

[caiyuantian]

This issue is still there in the latest version