easy-config

Modern and strict configuration files to build consistently web applications.

Table of content

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

Getting started

Installation

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

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

Configuration

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

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "extends": ["./node_modules/@axa-ch/easy-config/biome/base.json"]
}

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 '@axa-ch/easy-config';

export default prettier.base;

Why not use biome format?

Biomes formatting support is currently not developed enough for us to make the full move over to biome. For instance, Biome currently doesn't support CSS Formatting or Markdown. Furthermore, Biome doesn't plan to support SCSS in the foreseeing future, so it makes sense to stick to prettier.

IDE Integration

Biome provides plugins for the most common IDEs:

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

IntelliJ

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.

Typescript setup

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"]
}

Stylelint setup

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],
};

SCSS Setup

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],
};

CSS Order Setup

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],
};