How to use ESLint v9 Flat Config with @stylistic/eslint-plugin to enforce custom padding (like 3 blank lines after imports) instead of Prettier. Use when configuring or fixing formatting rules in this workspace.
This repository strictly rejects default Prettier formatting in favor of highly customized structural spacing rules powered by ESLint v9 Flat Config and the @stylistic/eslint-plugin.
eslint with the --fix flag to resolve spacing.@stylistic/padding-line-between-statementsThe spacing enforcement relies on this specific configuration inside packages/config-eslint:
"@stylistic/padding-line-between-statements": [
"error",
// Always 3 lines after imports
{ blankLine: "always", prev: "import", next: "*" },
{ blankLine: "always", prev: "import", next: "*" },
{ blankLine: "always", prev: "import", next: "*" },
// Always 2 lines before logical blocks (functions, types, classes)
{ blankLine: "always", prev: "*", next: "function" },
{ blankLine: "always", prev: "*", next: "function" },
{ blankLine: "always", prev: "*", next: "type" },
{ blankLine: "always", prev: "*", next: "type" },
{ blankLine: "always", prev: "*", next: "interface" },
{ blankLine: "always", prev: "*", next: "interface" },
]
Note: In ESLint, repeating the blankLine: "always" target multiple times tells the linter to expect multiple consecutive lines. We complement this with "@stylistic/no-multiple-empty-lines": ["error", { "max": 4 }] to avoid conflicting limits.
Because ESLint's --fix isn't always perfect at inserting missing multi-line padding across dense legacy codebases, we have a Node script that structurally injects the gaps using Regex before linting.
# Run the rough structural insertion
node .agents/skills/custom-formatting/scripts/force-spacing.mjs ./apps/web-app/src/components
# Polish and finish with exact ESLint AST resolution
pnpm turbo run lint -- --fix
When producing code snippets or updating existing code in your context window, insert literal newline characters (\n\n\n) correctly! E.g.
import React from 'react';
import { Button } from '@ivannikov-pro/ui';
export function MyComponent() {
return <Button />;
}
export type MyComponentProps = {
active: boolean;
};