@axa-ch/easy-config

easy-config

Modern and strict configuration files to build consistently web applications.

Installation

npm i @axa-ch/easy-config

Notice that all the easy-config peer dependencies should be installed manually. For this reason we need to explicitly define their major version.

# Install the linting tools
npm i -D eslint@8 prettier@3

# Install the plugins used in easy-config
npm i -D eslint-config-airbnb-base@15 eslint-plugin-prettier@5 eslint-config-prettier@9 eslint-plugin-import@2

# Install this package from npm
npm i -D axa-ch/easy-config

For Typescript support

npm i -D typescript@5 @typescript-eslint/eslint-plugin@6 @typescript-eslint/parser@6

These plugins assume a tsconfig.json file in your project root (Docs).
See also our typescript setup

Optional IDE Configuration

• Install eslint in your IDE
• Install prettier in your IDE

Eslint Setup

Set up your eslint config (.eslintrc.js) file as follows to enable the easy-config eslint rules in your project

const { eslint } = require('@axa-ch/easy-config');

module.exports = {
  extends: [eslint.base],
};

To enable Typescript support, simply add the eslint.typescript settings to the extension list

const { eslint } = require('@axa-ch/easy-config');

module.exports = {
  extends: [eslint.base, eslint.typescript],
};

Prettier Setup

Set up your prettier config (.prettierrc.js) file as follows to enable the easy-config prettier rules in your project

const { prettier } = require('@axa-ch/easy-config');

module.exports = prettier.base;

React Setup

Installation

For React projects we need to install the following two dependencies:

npm i -D eslint-plugin-react@7 eslint-plugin-react-hooks@4

Eslint Setup

To enable linting for React/JSX files, you should add the following extension to your eslint config (.eslintrc.js) file:

const { eslint } = require('@axa-ch/easy-config')

module.exports = {
-  extends: [eslint.base],
+  extends: [eslint.base, eslint.react],
}

You don't need any specific plugins for Typescript support with React, just enable both configs in your .eslintrc.js.

const { eslint } = require('@axa-ch/easy-config')

module.exports = {
-  extends: [eslint.base],
+  extends: [eslint.base, eslint.react, eslint.typescript],
}

Typescript Setup

Make sure to have Typescript installed in your project before proceeding with the following steps

npm i -D typescript@5

Typescript Basic Config

To use the basic easy-config typescript config in your project you can set up your .tsconfig.json file as follows

{
  "extends": "@axa-ch/easy-config/ts-config/base"
}

Stylelint Setup

Stylelint Installation

Make sure to have Stylelint installed in your project before proceeding with the following steps

npm i -D stylelint@15 stylelint-config-standard@34

Stylelint Basic Rules Config

To use only the basic easy-config stylelint rules in your project you can set up your .stylelintrc.js file as follows

const { stylelint } = require('@axa-ch/easy-config');

module.exports = {
  extends: [stylelint.base],
};

Stylelint SCSS Config

Does your project use SCSS files? No problems... you can enable the easy-config stylelint rules for scss. First you need to install the stylelint-config-standard-scss dependency

npm i -D stylelint-config-standard-scss@10

You can then update your .stylelintrc.js file as follows

const { stylelint } = require('@axa-ch/easy-config');

module.exports = {
  extends: [
    stylelint.base,
+   stylelint.scss,
  ],
};

Stylelint BEM Patterns Config

To make sure your classes will be properly named according to BEM, you might enable the easy-config bem pattern plugin. First you need to install stylelint-selector-bem-pattern

npm i -D stylelint-selector-bem-pattern@3

You can then update your .stylelintrc.js file as follows

const { stylelint } = require('@axa-ch/easy-config');

module.exports = {
  extends: [
    stylelint.base,
    stylelint.scss,
+   stylelint.bemPattern,
  ],
};

Stylelint Order Config

Do you care about the order of your css properties? In that case the easy-config stylelint/config-order is what you are looking for. First install stylelint-order

npm i -D stylelint-order@6

Then update your .stylelintrc.js file as follows

const { stylelint } = require('@axa-ch/easy-config');

module.exports = {
  extends: [
    stylelint.base,
    stylelint.scss,
    stylelint.bemPattern,
+   stylelint.order,
  ],
};

Release new Version of easy-config

npm version patch && git push --tags

If you want to release a specific version of this package read the docs.