@synergyerp/frontend-standards

Shared frontend standards for all AO Holdings frontend projects. Provides unified configurations for ESLint, Prettier, commitlint, Husky Git hooks, TypeScript, Vitest, and modularization enforcement.

Quick Start

pnpm add -D @synergyerp/frontend-standards

📖 Starting a new child project? Use the SynergyERP Frontend Base Template and follow its CHILD_PROJECT_SETUP.md for onboarding (branch setup, CI/CD, secrets, deployment).

What's Included

| Config | File | Description | | -------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------ | | ESLint v9 | eslint.config.js | Flat config with naming, imports, React, boundaries, barrel-file enforcement, console/debugger bans, accessibility | | Prettier | prettier.config.js | Shared formatting rules with prettier-plugin-organize-imports | | commitlint | commitlint.config.js | Conventional commit enforcement | | TypeScript | tsconfig.base.json | Strict mode base config with path aliases (@/*) | | Vitest | vitest.config.base.ts | JSDOM, coverage thresholds (80/75/80/80), per-file enforcement | | VS Code | .vscode/ | settings.json + extensions.json for consistent editor behavior | | Husky | .husky/ | pre-commit (lint-staged), commit-msg (commitlint), pre-push (full checks) | | Modularization | scripts/check-modularization.mjs | Domain structure, barrel file, and flat-file validator | | PR Template | .github/PULL_REQUEST_TEMPLATE.md | Standard PR checklist with modularization compliance |

Usage in Consumer Repos

1. Install

pnpm add -D @synergyerp/frontend-standards

2. Configure ESLint

// eslint.config.js
export { default } from '@synergyerp/frontend-standards';

To extend with project-specific rules:

// eslint.config.js
import baseConfig from '@synergyerp/frontend-standards';

export default [
  ...baseConfig,
  {
    rules: {
      // project-specific overrides
    },
  },
];

3. Configure TypeScript

// tsconfig.json
{
  "extends": "@synergyerp/frontend-standards/tsconfig.base.json",
  "compilerOptions": {
    // project-specific overrides
  },
}

4. Configure Vitest

// vitest.config.ts
import baseConfig from '@synergyerp/frontend-standards/vitest.config.base';
import { defineConfig, mergeConfig } from 'vitest/config';

export default mergeConfig(
  baseConfig,
  defineConfig({
    // project-specific overrides
  })
);

5. Add Scripts to package.json

{
  "scripts": {
    "prepare": "cp -r node_modules/@synergyerp/frontend-standards/.husky . 2>/dev/null && chmod +x .husky/* 2>/dev/null || true",
    "lint": "eslint --ext .ts,.tsx --max-warnings 0 .",
    "lint:fix": "eslint --ext .ts,.tsx . --fix",
    "format": "prettier --write \"src/**/*.{ts,tsx,json,css,md}\"",
    "format:check": "prettier --check \"src/**/*.{ts,tsx,json,css,md}\"",
    "check-types": "tsc --noEmit",
    "check-modularization": "node node_modules/@synergyerp/frontend-standards/scripts/check-modularization.mjs",
    "test": "vitest run",
    "test:watch": "vitest",
    "test:ci": "vitest run --coverage",
    "validate": "pnpm lint && pnpm check-modularization && pnpm check-types && pnpm test:ci"
  },
  "lint-staged": {
    "src/**/*.{ts,tsx}": ["eslint --fix --max-warnings 0", "prettier --write"],
    "src/**/*.{css,scss}": ["prettier --write"],
    "*.{json,md,yaml,yml}": ["prettier --write"]
  }
}

6. Set Up CI

Copy the CI workflow template:

mkdir -p .github/workflows
cp node_modules/@synergyerp/frontend-standards/.github/workflows/ci-template.yml .github/workflows/ci.yml

Edit as needed for your project.

7. Enable Git Hooks

pnpm prepare
pnpm add -D husky lint-staged

8. Copy PR Template

mkdir -p .github
cp node_modules/@synergyerp/frontend-standards/.github/PULL_REQUEST_TEMPLATE.md .github/

Enforcement Summary

| Rule | Tool | When | | ----------------------- | ---------------------------------------------------------- | ------------------------- | | Naming conventions | ESLint (id-length, camelcase, unicorn/filename-case) | Editor + pre-commit + CI | | Import order | ESLint (import/order) | Editor + pre-commit + CI | | Domain modularization | ESLint (boundaries/*) + check-modularization.mjs | Pre-push + CI | | Barrel file enforcement | ESLint (import/no-internal-modules) | Pre-push + CI | | Console/debugger bans | ESLint (no-console, no-debugger) | Pre-push + CI | | Conventional commits | commitlint | Commit + CI (anti-bypass) | | Type safety | TypeScript (tsc --noEmit) | Pre-push + CI | | Code formatting | Prettier | Editor + pre-commit + CI | | Test coverage | Vitest (80% lines, 75% branches, 80% funcs, 80% stmts) | Pre-push + CI | | Security audit | pnpm audit --audit-level=high | CI | | PR standards | PR template checklist | Code review |

Versioning

This package follows Semantic Versioning. Bump the version and push a tag to publish:

npm version patch   # or minor, major
git push --follow-tags

Related Documents

• FRONTEND_STANDARDS.md — Full frontend coding standards
• CICD_STANDARDS.md — CI/CD pipeline standards