@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:

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

module.exports = prettierConfig();

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

module.exports = {
  extends: '@ttoss/eslint-config',
};

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:

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

module.exports = commitlintConfig();

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

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.

Babel

Add the babel.config.js file on the package folder:

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

module.exports = babelConfig();

Jest

Install Jest and its types on your package:

pnpm add -D jest @types/jest

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

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

const config = jestConfig();

export default config;

Configure the test script on package.json of your package:

"scripts": {
  "test": "jest",
}

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:

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

export const tsup = tsupConfig();

Configure the build script on 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:

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

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

{
  "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:

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

module.exports = prettierConfig();

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

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.

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',
  }
);