Unich Tooling

A core 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

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

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. Create configuration files
3. Add useful scripts to your package.json
4. 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

The Prettier configuration uses modern defaults and includes powerful plugins:

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

module.exports = {
  ...prettierConfig,
  // You can override settings here
};

Key features include:

• Modern code style defaults
• Tailwind CSS class sorting
• Automatic import sorting with customizable order
• TypeScript-aware formatting
• JSX/TSX support
• Consistent line endings

Default settings:

• Print width: 80 characters
• Tab width: 2 spaces
• Double quotes
• Trailing commas in ES5 mode
• Always use parentheses for arrow functions
• LF line endings

Included plugins:

• prettier-plugin-tailwindcss: Automatically sorts Tailwind CSS classes
• @ianvs/prettier-plugin-sort-imports: Sorts imports with a customizable order

Default import order:

1. React imports
2. Next.js imports
3. Third-party modules
4. Project aliases (@/components, @/lib, etc.)
5. Relative imports

You can customize any of these settings in your project's prettier.config.js.

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"]
}

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

Key rules include:

• No unused variables
• No console statements (except warnings and errors)
• No undefined variables
• Prefer const over let
• Avoid var

Prettier

The Prettier configuration uses modern defaults and includes powerful plugins:

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

module.exports = {
  ...prettierConfig,
  // You can override settings here
};

Key features include:

• Modern code style defaults
• Tailwind CSS class sorting
• Automatic import sorting with customizable order
• TypeScript-aware formatting
• JSX/TSX support
• Consistent line endings

Default settings:

• Print width: 80 characters
• Tab width: 2 spaces
• Double quotes
• Trailing commas in ES5 mode
• Always use parentheses for arrow functions
• LF line endings

Included plugins:

• prettier-plugin-tailwindcss: Automatically sorts Tailwind CSS classes
• @ianvs/prettier-plugin-sort-imports: Sorts imports with a customizable order

Default import order:

1. React imports
2. Next.js imports
3. Third-party modules
4. Project aliases (@/components, @/lib, etc.)
5. Relative imports

You can customize any of these settings in your project's prettier.config.js.

TypeScript

The TypeScript configuration is strict but pragmatic:

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

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)

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
├── next.config.js        # Next.js configuration template
├── 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/*"]
    }
  }
}

Contributing

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

License

MIT