Modern and strict configuration files to build consistently web applications.
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
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],
};
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;
For React projects we need to install the following two dependencies:
npm i -D eslint-plugin-react@7 eslint-plugin-react-hooks@4
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],
}
Make sure to have Typescript installed in your project before proceeding with the following steps
npm i -D typescript@5
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"
}
Make sure to have Stylelint installed in your project before proceeding with the following steps
npm i -D stylelint@15 stylelint-config-standard@34
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],
};
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,
],
};
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,
],
};
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,
],
};
npm version patch && git push --tags
If you want to release a specific version of this package read the docs.