Modern and strict configuration files to build consistently web applications.

1. Getting Started
   1. Installation
   2. Configuration
   3. IDE Integration
2. Typescript Setup
3. Stylelint Setup
   1. SCSS Setup
   2. CSS Order Setup

Start by installing BiomeJS, Prettier and @axa-ch/easy-config.

npm i -D --save-exact @biomejs/biome @axa-ch/easy-config prettier

Create a biome.json file at the root of your project

{
  extends: ['./node_modules/@axa-ch/easy-config/biome/base.json'],
  // Other config...
}

You can configure this to your liking. Follow the Configuration guide from biome.

To configure prettier, add a .prettierrc.js file with the following content:

import { prettier } from './index.js';

export default prettier.base;

Biome provides plugins for the most common IDEs:

• IntelliJ-based products: Biome
• VSCode Extension: Biome

When using IntelliJ, Biome and Prettier conflict when trying to run Ctrl+Alt+ Shift+P. This is because Biome is set to run biome check when pressing this shortcut, Prettier is set up to format when this shortcut is used. To avoid this conflict we would recommend Setting the prettier configuration to manual and then checking the Run on 'Reformat Code' action. This way, you can press Ctrl+Alt+L to run Prettier. Alternatively, you can remap either of those commands to different keystrokes.

Start by installing typescript:

npm i -D --save-exact typescript

Then, create a tsconfig.json file and extend @axa-ch/easy-config:

{
  extends: ['@axa-ch/easy-config/ts-config/base'],
  // Other config...
}

Start by installing stylelint and the rules used by easy-config:

npm i -D --save-exact stylelint stylelint-config-standard

Extend easy-config in the .stylelintrc.js file:

import { stylelint } from '@axa-ch/easy-config';

/** @type {import('stylelint').Config} */
export default {
  extends: [stylelint.base],
};

To use Stylelint with SASS, start by installing the SCSS default config for stylelint:

npm i -D --save-exact stylelint-config-standard-scss

Extend your stylelint configuration like shown below:

import { stylelint } from '@axa-ch/easy-config';

/** @type {import('stylelint').Config} */
export default {
  extends: [stylelint.base, stylelint.scss],
};

You can install this extension if you want to ensure that CSS Properties are defined in a consistent way.

Start by installing the extension:

npm i -D --save-exact stylelint-order

Extend your stylelint configuration like shown below:

import { stylelint } from '@axa-ch/easy-config';

/** @type {import('stylelint').Config} */
export default {
  extends: [stylelint.base, stylelint.order],
};