Custom Formatting

Core Setup: @stylistic/padding-line-between-statements

The 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.

Bootstrap Formatting Script

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

AI Native Code Generation

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;
};