Configs

The DXP publishes a small set of shared @tmedxp/* configuration packages so teams don’t recreate them per repo. They cover the build/format/lint toolchain you’ll wire up alongside the styleguide.

The browserslist config encodes the Browser support matrix — the others are conventions for the rest of the toolchain.

Browserslist

@tmedxp/browserslist-config is the shared browserslist target list. It encodes the Browser support matrix, so your build transpiles and prefixes for every supported browser without you maintaining the matrix in two places.

npm

npm install --save-dev @tmedxp/browserslist-config

pnpm

pnpm add --save-dev @tmedxp/browserslist-config

babel.config.js

import browserslistTargets from '@tmedxp/browserslist-config/targets';

export default {
  presets: [['@babel/preset-env', { targets: browserslistTargets }]],
};

postcss.config.js

import postcssPresetEnv from 'postcss-preset-env';

export default {
  plugins: [postcssPresetEnv({ browsers: browserslistTargets })],
};

Source: dxp-rc-configs/browserslist-config

ESLint

@tmedxp/eslint-config is the shared flat-config ESLint preset.

npm

npm install --save-dev @tmedxp/eslint-config

pnpm

pnpm add --save-dev @tmedxp/eslint-config

eslint.config.js

import dxpConfig from '@tmedxp/eslint-config';

export default [
  ...dxpConfig,
  // { /* Add your own plugins and rules */ },
];

Source: dxp-rc-configs/eslint-config

Prettier

@tmedxp/prettier-config is the shared Prettier preset.

npm

npm install --save-dev @tmedxp/prettier-config

pnpm

pnpm add --save-dev @tmedxp/prettier-config

package.json

{
  "prettier": "@tmedxp/prettier-config"
}

Source: dxp-rc-configs/prettier-config

TSConfig

@tmedxp/tsconfig is the shared base TypeScript configuration.

npm

npm install --save-dev @tmedxp/tsconfig

pnpm

pnpm add --save-dev @tmedxp/tsconfig

tsconfig.json

{
  "extends": "@tmedxp/tsconfig/base.json",
  "include": ["src/"]
}

Source: dxp-rc-configs/tsconfig