@ivosabev/config

ESLint, Prettier, and TypeScript configs

This makes assumptions about the way you prefer to develop software and gives you configurations that will actually help you in your development.

Install

npm install @ivosabev/config

yarn add @ivosabev/config

pnpm add @ivosabev/config

---

Usage

Prettier

The easiest way to use this config is in your package.json:

"prettier": "@ivosabev/config/prettier"

Customizing Prettier

If you want to customize things, you should probably just copy/paste the built-in config. But if you really want, you can override it using regular JavaScript stuff.

Create a .prettierrc.js file in your project root with the following content:

import defaultConfig from '@ivosabev/config/prettier';

/** @type {import("prettier").Options} */
export default {
  ...defaultConfig,
  // .. your overrides here...
};

TypeScript

Create a tsconfig.json file in your project root with the following content:

{
  "extends": "@ivosabev/config/typescript",
  "include": ["@ivosabev/config/reset.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
  "compilerOptions": {
    "paths": {
      "#app/*": ["./app/*"],
      "#tests/*": ["./tests/*"]
    }
  }
}

If you want to build with tsc create a tsconfig.build.json file in your project root with the following content:

{
  "extends": "@ivosabev/config/typescript/build",
  "include": ["@ivosabev/config/reset.d.ts", "src", "tailwind.config.ts"],
  "compilerOptions": {
    "declarationDir": "dist/dts",
    "outDir": "dist/esm",
    "tsBuildInfoFile": ".tsbuildinfo/build.tsbuildinfo"
  }
}

Customizing TypeScript

Learn more from the TypeScript docs here.

ESLint

Create a eslint.config.js file in your project root with the following content:

import {config as defaultConfig} from '@ivosabev/config/eslint';

/** @type {import("eslint").Linter.Config} */
export default [...defaultConfig];

Customizing ESLint

Learn more from the Eslint docs here.

There are endless rules we could enable. However, we want to keep our configurations minimal and only enable rules that catch real problems (the kind that are likely to happen). This keeps our linting faster and reduces the number of false positives.

package.json

You may want to add the following scripts to your project:

{
  "format-check": "prettier --check .",
  "format": "prettier --write .",
  "lint-check": "eslint .",
  "lint": "eslint .",
  "typecheck": "tsc",
  "validate": "run-p -l format lint typecheck"
}

Credits

• https://github.com/epicweb-dev/config
• https://github.com/remix-run/remix/tree/main/packages/remix-eslint-config
• https://github.com/total-typescript/tsconfig
• https://github.com/mattpocock/ts-reset

License

MIT