Open csandman opened 2 years ago
Hi, Thanks for the issue.
Could you please provide the code which you are trying to format?
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"
}
}
]
}
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.
@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.
@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
This issue is still there in the latest version
Same issue
For some reason, there is an extra line being added between each of my global eslint ignore comments:
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.