@ttoss/config

@ttoss/config is an opinionated configuration library for monorepo and packages. It contains a set of default configurations that you can use on your projects.

Install

pnpm add -Dw @ttoss/config

Monorepo

Use the configs of this section on the root of your monorepo.

ESLint and Prettier

Install the following packages:

pnpm add -Dw eslint prettier @ttoss/eslint-config

Create the .prettierrc.js file and add the following configuration:

.prettierrc.js

const { prettierConfig } = require('@ttoss/config');

module.exports = prettierConfig();

Create the eslint.config.mjs file and add the following configuration:

eslint.config.mjs

import ttossEslintConfig from '@ttoss/eslint-config';

export default [...ttossEslintConfig];

Husky, commitlint, and lint-staged

This group of packages will only work if you have already installed ESLint and Prettier because lint-staged will run the eslint --fix command.

Install the following packages on the root of your monorepo:

pnpm add -Dw husky @commitlint/cli lint-staged

Create the .commitlintrc.js file and add the following configuration:

.commitlintrc.js

const { commitlintConfig } = require('@ttoss/config');

module.exports = commitlintConfig();

Create the .lintstagedrc.js file and add the following configuration:

.lintstagedrc.js

const { lintstagedConfig } = require('@ttoss/config');

module.exports = lintstagedConfig();

Finally, configure Husky:

npm set-script prepare "husky install"
pnpm run prepare
pnpm husky add .husky/commit-msg "pnpm commitlint --edit"
pnpm husky add .husky/pre-commit "pnpm lint-staged"

Packages

You can use configs below to your packages folders.

Jest

Follow our tests guidelines to configure and run your tests.

Tsup

Use tsup to bundle your TypeScript packages.

Install tsup on your package.

pnpm add -D tsup

Create the tsup.config.ts file on the package folder:

tsup.config.ts

import { tsupConfig } from '@ttoss/config';

export const tsup = tsupConfig();

Configure the build script on package.json:

package.json

"scripts": {
  "build": "tsup",
}

TypeScript

Install TypeScript on your package:

pnpm add -D typescript

Extend default configuration for each tsconfig.json (touch tsconfig.json) on the package folder:

tsconfig.json

{
  "extends": "@ttoss/config/tsconfig.json"
}

For tests, you can extend the default test configuration tsconfig.test.json on the package tests folder:

tests/tsconfig.json

{
  "extends": "@ttoss/config/tsconfig.test.json",
  "include": ["**/*.test.ts", "**/*.test.tsx"]
}

Extending configurations

Each configuration is customizable and you can extend them with your own. For example, you can use the default .prettierrc.js file in your monorepo:

.prettierrc.js

const { prettierConfig } = require('@ttoss/config');

module.exports = prettierConfig();

But, if you want to change the printWidth option, you can do so:

.prettierrc.js

const { prettierConfig } = require('@ttoss/config');

module.exports = prettierConfig({
  printWidth: 120,
});

You can also pass a second argument to every configuration to handle array's append or overwrite items.

babel.config.js

const { babelConfig } = require('@ttoss/config');

// Append plugins (default)
const appendConfig = babelConfig(
  {
    plugins: ['@babel/plugin-proposal-class-properties'],
  },
  {
    arrayMerge: 'append',
  }
);

const overwriteConfig = babelConfig(
  {
    plugins: ['@babel/plugin-proposal-class-properties'],
  },
  {
    arrayMerge: 'overwrite',
  }
);