eslint-plugin-custom-formats

Custom ESLint rules to keep naming consistent across your codebase:

• component-name: enforce PascalCase for component names
• file-structure: enforce PascalCase for component file names
• variable-name: enforce camelCase for variables, parameters, and bindings

Install

1. Add the plugin to your project (published or via local linking)

• npm: npm i -D eslint-plugin-custom-formats
• pnpm: pnpm add -D eslint-plugin-custom-formats
• yarn: yarn add -D eslint-plugin-custom-formats

2. Ensure you have the appropriate parsers installed for your stack:

• TypeScript: @typescript-eslint/parser
• Vue (SFC): vue-eslint-parser
• Svelte: svelte-eslint-parser (optional; current rules have limited Svelte support)

Usage (ESLint 9+ Flat Config)

Create or edit eslint.config.js:

// eslint.config.js (Flat config)
import tsParser from '@typescript-eslint/parser';
import customFormats from 'eslint-plugin-custom-formats';
import vueParser from 'vue-eslint-parser';

export default [
  {
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        ecmaFeatures: { jsx: true },
      },
    },
    plugins: {
      'custom-formats': customFormats,
    },
    rules: {
      'custom-formats/component-name': 'error',
      'custom-formats/file-structure': 'error',
      'custom-formats/variable-name': 'error',
    },
  },
  {
    files: ['**/*.vue'],
    languageOptions: { parser: vueParser },
  },
  
];

Note: The plugin currently exports a legacy-style configs.recommended; for Flat config, prefer the manual wiring above.

Usage (Legacy .eslintrc)

.eslintrc.json example:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["custom-formats"],
  "extends": ["plugin:custom-formats/recommended"],
  "rules": {
    // You can override defaults here if needed
    // "custom-formats/variable-name": "warn"
  }
}

If you don’t want to use the recommended config, enable rules manually:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["custom-formats"],
  "rules": {
    "custom-formats/component-name": "error",
    "custom-formats/file-structure": "error",
    "custom-formats/variable-name": "error"
  }
}

Rules

• custom-formats/component-name

  • Enforces PascalCase for component identifiers in JSX and Vue export default { name: "..." }.
  • Caveat: Intrinsic JSX elements like div are lowercase and will be flagged by the current rule. If you need to allow intrinsic tags, we can update the rule to skip known HTML/SVG tags.

• custom-formats/file-structure

  • Enforces PascalCase filenames for components (.tsx, .vue).

• custom-formats/variable-name

  • Enforces camelCase for variables, parameters, destructured bindings, defaults, rest elements, arrays, and catch clause parameters.
  • Does not enforce function names themselves (to avoid conflicts with component naming rules).

Framework notes

• TypeScript: Use @typescript-eslint/parser and ensure parserOptions.project as needed for your setup.
• Vue: Use vue-eslint-parser for *.vue files (Flat config override shown above).
• Svelte: The parser is ESM-only; when testing in Jest, you may need ESM transforms. Current rules include placeholders for Svelte—enable when your toolchain supports it.

Development

• Build: npm run build (outputs to dist/)
• Test: npm test

Ensure your peerDependencies in package.json align with the tool versions you support, and update the RuleCreator docs URL to your real documentation site before publishing.