dinalint

In-house linting and formatting standards for React + TypeScript projects.

dinalint provides shared ESLint and Prettier configuration to keep frontend projects aligned with one setup.

What v1 includes

• ESLint flat config for React + TypeScript.
• Import ordering and unused import rules.
• React hooks rules.
• Recommended accessibility rules.
• Tailwind class ordering rule.
• Shared Prettier config.
• Fixture-based tests and CI checks for this package.

Before you start

Existing lint setup warning

If your project already has ESLint/Prettier config, remove or merge it before enabling dinalint. Running multiple overlapping configs can create conflicting rules.

Supported toolchain

• ESLint: 9.x (currently required)
• Node: >=20

If your project has eslint@10, @klikknpro/dinalint/eslint will throw a clear compatibility error.
Use eslint@^9 until dinalint is upgraded for ESLint 10.

Flow 1: Install from published npm package

Use this flow when @klikknpro/dinalint is published and available in npm.

1) Install @klikknpro/dinalint

npm install -D @klikknpro/dinalint

pnpm add -D @klikknpro/dinalint

yarn add -D @klikknpro/dinalint

bun add -d @klikknpro/dinalint

2) Create ESLint config

Create eslint.config.js:

import dinalint from "@klikknpro/dinalint/eslint";

export default dinalint;

3) Create Prettier config

Create .prettierrc.mjs:

import prettierConfig from "@klikknpro/dinalint/prettier";

export default prettierConfig;

4) Add scripts in package.json

Use dinalint wrapper commands so scripts are package-manager-agnostic and robust:

{
  "scripts": {
    "lint": "dinalint lint .",
    "lint:flex": "dinalint lint:flex .",
    "lint:fix": "dinalint lint . --fix",
    "format": "dinalint format .",
    "format:check": "dinalint format:check .",
    "check": "dinalint check .",
    "check:flex": "dinalint check:flex ."
  }
}

Use check:flex when you want the full check pipeline but with these two rules temporarily disabled:

• func-style
• custom-rules/exported-react-component-first

5) Initialize editor defaults

Run in the consumer project:

npx dinalint init

This creates a .editorconfig in the current project.

If the file already exists and you want to replace it:

npx dinalint init --force

6) Verify setup

Run:

npm run check

If your project is not npm-based, run the equivalent for your package manager:

pnpm run check

yarn run check

bun run check

Flow 2: Local install using npm pack (without publishing changes)

Use this flow when testing @klikknpro/dinalint from local source without publishing to npm.

1) Pack in dinalint repository

In the dinalint repo:

Run the prebuild release step (checks + patch version bump):

npm run prebuild

This runs:

• npm run check
• npm version patch --no-git-tag-version

Then pack:

npm pack

This creates a tarball such as klikknpro-dinalint-1.0.1.tgz.

2) Install tarball in consumer project

In the consumer project:

npm install -D /absolute/path/to/dinalint/klikknpro-dinalint-1.0.1.tgz

pnpm add -D /absolute/path/to/dinalint/klikknpro-dinalint-1.0.1.tgz

yarn add -D /absolute/path/to/dinalint/klikknpro-dinalint-1.0.1.tgz

bun add -d /absolute/path/to/dinalint/klikknpro-dinalint-1.0.1.tgz

3) Apply the same setup steps as Flow 1

After tarball install, repeat Flow 1 steps:

1. Create eslint.config.js.
2. Create .prettierrc.mjs.
3. Add scripts.
4. Run dinalint init.
5. Run check.

4) Uninstall later

npm uninstall @klikknpro/dinalint

pnpm remove @klikknpro/dinalint

yarn remove @klikknpro/dinalint

bun remove @klikknpro/dinalint

Turborepo guidance

In Turborepo, each frontend package should define:

• Local eslint.config.js importing @klikknpro/dinalint/eslint.
• Local Prettier config importing @klikknpro/dinalint/prettier.

Root-level scripts can use turbo filters, for example:

{
  "scripts": {
    "lint": "turbo run lint",
    "format:check": "turbo run format:check"
  }
}

Manual release checklist (v1)

1. Run prebuild (checks + patch bump):
   • npm run prebuild
2. (Optional) verify package contents:
   • npm pack --dry-run
3. Publish:
   • npm publish
4. (Optional) remove local tarballs after local testing:
   • rm -f *.tgz
5. Add short release notes in the changelog section or release description.