@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 .eslintrc.js file and add the following configuration:

.eslintrc.js

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:

.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.

Babel

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

babel.config.js

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

module.exports = babelConfig();

Jest

Install Jest and its types on your package:

pnpm add -D jest @types/jest ts-node

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