I'm using the eslint-plugin-prettier
in a Next.js project.
This is what my eslint config looks like:
import { FlatCompat } from "@eslint/eslintrc";
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
import tailwind from "eslint-plugin-tailwindcss";
import path from "node:path";
import { fileURLToPath } from "node:url";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
});
const eslintConfig = [
..pat.config({
extends: ["next/core-web-vitals", "next/typescript"],
}),
...tailwind.configs["flat/recommended"],
{
settings: {
tailwindcss: {
config: path.join(__dirname, "./tailwind.config.ts"),
},
},
},
eslintPluginPrettierRecommended,
{
rules: {
"prettier/prettier": [
"error",
{
tabWidth: 2,
singleQuote: false,
jsxSingleQuote: false,
eslintIntegration: true,
endOfLine: "auto",
},
],
},
},
];
export default eslintConfig;
I added these shared VS Code settings to apply the eslint fixes on save:
{
"prettier.enable": false,
"[javascript][javascriptreact][typescript][typescriptreact]": {
"editor.formatOnSave": false,
"editor.tabSize": 2,
"files.eol": "\n",
// disable all vscode formatters. eslint will handle formatting (via eslint-plugin-prettier)
"editor.defaultFormatter": null,
// tell the ESLint plugin to run on save
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "always",
"sourceanizeImports": "explicit"
}
}
}
The problem
When I have a multi-line named export,
export {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator //error here
};
//error here
It automatically runs eslint and applies fixes, but it leaves errors. I expected that a comma ,
is added after BreadcrumbSeparator
since the default for trailingCommas
is all
.
I need to manually add the comma and remove the extra new-line to resolve the issues, which is annoying.
What's causing these conflicting application of rules? I made sure to remove any other .prettierrc
or eslint config files. I also made sure to disable VS Code's prettier extension.