@haydenull/fabric

A collection of configuration files containing prettier, eslint, tsconfig and more

Usage

Install the package

pnpm add @haydenull/fabric eslint prettier -D

eslint-config

in eslint.config.mjs

import haydenullLint from '@haydenull/fabric/eslint/react'
import { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig([
  haydenullLint,
  globalIgnores(['public', 'dist']),
])

prettier

in prettier.config.mjs

import haydenullPrettier from '@haydenull/fabric/prettier'

export default {
  ...haydenullPrettier,
  // docs: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#sorting-classes-in-function-calls
  tailwindConfig: '.your-path/tailwind.config.js',
  tailwindFunctions: [], // ['cn', 'clsx']
}

If you use pnpm to manage dependencies, due to the hoisting mechanism of pnpm, you need to add the following configuration to .npmrc to lift @trivago/prettier-plugin-sort-imports and prettier-plugin-* dependencies to the global level:

public-hoist-pattern[]=@trivago/prettier-plugin-sort-imports
public-hoist-pattern[]=prettier-plugin-*

verify commit

1. install husky
2. add commit-msg hook

# on Linux or Mac
echo "npx haydenull-fabric verify-commit" >> .husky/commit-msg

tsconfig

in tsconfig.json

{
  "extends": "@haydenull/fabric/tsconfig/tsconfig.json",
}

czg

1. global install

npm install -g czg

2.in cz.config.mjs

import haydenullCz from '@haydenull/fabric/cz'


export default {
  ...haydenullCz,
  scopes: [/** your scopes */],
}

Recommended

Use lint-staged

1. Install

pnpm add -D lint-staged

2. in package.json

{
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      "npx prettier --write",
      "npx eslint --fix"
    ]
  }
}

3. add git hooks

# on Linux or Mac
echo "npx lint-staged" >> .husky/pre-commit

type check before commit

1. in package.json

{
  "scripts": {
    "typecheck": "tsc --noEmit"
  }
}

2. add git hooks

# on Linux or Mac
echo "npm run typecheck" >> .husky/pre-commit

spell check

Install Code Spell Checker Plugin for VSCode.