Unich Tooling

A comprehensive configuration package for JavaScript and TypeScript projects that provides standardized configurations for:

• ESLint (both modern flat config and legacy format)
• Prettier
• TypeScript
• Commitlint
• Husky Git hooks
• Lint-staged
• Jest for testing
• Stylelint for CSS/SCSS
• Accessibility (jsx-a11y)

Features

• 🚀 One-command setup - Configure your entire project with a single command
• 🔍 Project type detection - Automatically detects Next.js and TypeScript projects
• 🧩 Modular design - Use only the configurations you need
• 🛠️ Customizable - Easily override any configuration option
• 📋 Standard ignores - Includes common ignore patterns for Git, Prettier, and ESLint
• 🔄 Git hooks - Optional pre-commit and commit-msg hooks to enforce code quality
• 🧪 Testing - Jest configuration optimized for React/Next.js
• ♿ Accessibility - Built-in a11y linting rules
• 🎨 Styling - Stylelint configuration for consistent CSS/SCSS

Installation

npm install --save-dev unich-tooling

or

yarn add --dev unich-tooling

Quick Setup

After installing, run the setup command to configure your project:

npx unich-tooling-setup

The setup script will:

1. Detect your project type (Next.js, TypeScript, etc.)
2. Ask which tools you want to configure (Testing, Styling, etc.)
3. Create configuration files
4. Add useful scripts to your package.json
5. Optionally set up Git hooks with Husky

Configuration Files

The package provides the following configurations:

ESLint

Both modern (flat config) and legacy formats are supported:

// eslint.config.js (ESLint v8.21.0+)
const { eslintConfig } = require('unich-tooling');

module.exports = [
  ...eslintConfig,
  // Add your custom rules here
];

// .eslintrc.js (legacy format)
const { eslintrcConfig } = require('unich-tooling');

module.exports = {
  ...eslintrcConfig,
  // Add your custom rules here
};

Prettier

// prettier.config.js
const { prettierConfig } = require('unich-tooling');

module.exports = {
  ...prettierConfig,
  // Customize options here
};

TypeScript

For general projects:

// tsconfig.json
{
  "extends": "./node_modules/unich-tooling/tsconfig.base.json",
  "compilerOptions": {
    // Your custom compiler options
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules"]
}

For Next.js projects:

// tsconfig.json
{
  "extends": "./node_modules/unich-tooling/tsconfig.next.json",
  "compilerOptions": {
    // Your custom compiler options
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Jest (Testing)

// jest.config.js
const { jestConfig } = require('unich-tooling');

module.exports = {
  ...jestConfig,
  // Customize options here
};

Stylelint

// stylelint.config.js
const { stylelintConfig } = require('unich-tooling');

module.exports = {
  ...stylelintConfig,
  // Customize options here
};

Commitlint

// commitlint.config.js
const { commitlintConfig } = require('unich-tooling');

module.exports = {
  ...commitlintConfig,
  // Customize rules here
};

Configuration Defaults

ESLint

The ESLint configuration enforces good practices with a focus on:

• Common JavaScript/TypeScript errors
• Code consistency
• Avoiding problematic patterns
• Accessibility (jsx-a11y)

Key rules include:

• No unused variables
• No console statements (except warnings and errors)
• No undefined variables
• Prefer const over let
• Avoid var
• Accessibility requirements (ARIA, alt text, etc.)

Prettier

The Prettier configuration uses sensible defaults:

• Semi-colons: true
• Single quotes: true
• Tab width: 2 spaces
• Print width: 100 characters
• Trailing commas: es5
• Arrow function parentheses: avoid when possible

TypeScript

The TypeScript configuration is strict but pragmatic:

• Target: ES2018
• Strict type checking enabled
• Path aliases (for Next.js projects)
• Modern module resolution

Jest

The Jest configuration is optimized for React/Next.js:

• JSDOM test environment
• TypeScript support
• CSS/SCSS/asset mocking
• Next.js component mocking
• Coverage reporting

Stylelint

The Stylelint configuration enforces consistent CSS/SCSS:

• Standard rules
• Properties in alphabetical order
• Support for Tailwind CSS
• CSS-in-JS compatibility

Commitlint

The Commitlint configuration enforces the Conventional Commits standard:

• Type: feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert
• Subject case: any (flexible)
• Max line length: 100 characters

Available Scripts

After setup, the following npm scripts will be available:

• npm run lint: Run ESLint to check for code issues
• npm run format: Run Prettier to format all files
• npm run type-check: Run TypeScript type checking (if TypeScript is used)
• npm run test: Run Jest tests (if testing is enabled)
• npm run test:watch: Run Jest in watch mode (if testing is enabled)
• npm run test:coverage: Generate test coverage report (if testing is enabled)
• npm run lint:css: Run Stylelint on CSS/SCSS files (if Stylelint is enabled)

Git Hooks (Optional)

If you choose to set up Husky during the setup process, the following Git hooks will be configured:

• pre-commit: Runs lint-staged to lint and format staged files
• commit-msg: Validates commit messages against Commitlint rules

Package Structure

unich-tooling/
├── package.json          # Package details and dependencies
├── eslint.config.js      # ESLint flat config (ESLint v8.21.0+)
├── eslintrc.js           # ESLint legacy config
├── prettier.config.js    # Prettier configuration
├── tsconfig.base.json    # Base TypeScript configuration
├── tsconfig.next.json    # Next.js specific TypeScript configuration
├── jest.config.js        # Jest configuration
├── jest.setup.js         # Jest setup file
├── __mocks__/            # Jest mocks
├── stylelint.config.js   # Stylelint configuration
├── commitlint.config.js  # Commit message linting
├── husky-setup.js        # Husky git hooks setup
├── .gitignore            # Git ignore file template
├── .prettierignore       # Prettier ignore file template
├── .eslintignore         # ESLint ignore file template
├── index.js              # Export of all configurations
├── setup.js              # Setup CLI tool
└── README.md             # Documentation

Customizing Configurations

All configurations can be customized by extending the base configurations and overriding specific options:

ESLint

Add or modify rules in your project's eslint.config.js or .eslintrc.js file:

// .eslintrc.js example
const { eslintrcConfig } = require('unich-tooling');

module.exports = {
  ...eslintrcConfig,
  rules: {
    ...eslintrcConfig.rules,
    // Override or add rules
    'no-console': 'off', // Turn off console warnings
    'max-len': ['error', { code: 120 }] // Set max line length to 120
  }
};

Prettier

Override options in your project's prettier.config.js:

const { prettierConfig } = require('unich-tooling');

module.exports = {
  ...prettierConfig,
  printWidth: 120, // Change print width to 120
  tabWidth: 4 // Use 4 spaces for indentation
};

TypeScript

Add or modify compiler options in your project's tsconfig.json:

{
  "extends": "./node_modules/unich-tooling/tsconfig.base.json",
  "compilerOptions": {
    "target": "es2020", // Override target
    "baseUrl": "./src", // Set base URL
    "paths": {
      "@components/*": ["components/*"]
    }
  }
}

Jest

Customize Jest configuration in your project's jest.config.js:

const { jestConfig } = require('unich-tooling');

module.exports = {
  ...jestConfig,
  testMatch: ['**/__tests__/**/*.test.[jt]s?(x)'], // Custom test pattern
  coverageThreshold: {
    global: {
      branches: 80, // Higher coverage threshold
      functions: 80,
      lines: 80,
      statements: 80
    }
  }
};

Stylelint

Customize Stylelint rules in your project's stylelint.config.js:

const { stylelintConfig } = require('unich-tooling');

module.exports = {
  ...stylelintConfig,
  rules: {
    ...stylelintConfig.rules,
    'order/properties-alphabetical-order': null, // Disable alphabetical ordering
    'color-no-hex': true // Disallow hex colors
  }
};

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

License

MIT