Skip to main content

Enforcing coding standards

This page will show you how to enforce our coding standards using popular front-end tools.

Tools​

All XIP frontend projects are required to use ESLint, Prettier, Stylelint and Husky to enforce consistent code styling using our XIP configurations. You can install these plugins in your project if they are not already installed:

npm i -D eslint prettier stylelint husky
Use IDE Plugins

All of these tools have IDE plugins that can benefit your experience.

Configuration​

We offer configuration files for several linting and styling tools that you can simply npm install in your project. Follow these links to see the individual ways for implementing them.

ESLint​

ESLint helps finding problems and errors in your JavaScript (and TypeScript) code. Run the following command to install ESLint and the XIP configuration:

npm i -D eslint @xip-online-applications/eslint-config

and add it to your package.json:

{
  // ...
  "eslintConfig": {
    "extends": "@xip-online-applications/eslint-config"
    // TypeScript flavour
    // "extends": "@xip-online-applications/eslint-config/typescript"
  }
}

or, in an NX repository:

{
  "files": ["*.ts", "*.tsx"],
  "extends": ["plugin:@nrwl/nx/typescript", "@xip-online-applications/eslint-config/typescript"],
  "rules": {}
},
{
  "files": ["*.js", "*.jsx"],
  "extends": ["plugin:@nrwl/nx/javascript", "@xip-online-applications/eslint-config"],
  "rules": {}
}

Prettier​

Prettier is an opinionated code formatter that we use to apply consistent code formatting. Run the following command to install Prettier and the XIP configuration:

npm i -D  prettier @xip-online-applications/prettier-config

and extend the configuration in your package.json:

{
  // ...
  "prettier": "@xip-online-applications/prettier-config"
}

Stylelint​

Stylelint is a CSS linter that helps avoid errors and enforce conventions. Run the following command to install Stylelint and the XIP configuration:

npm i -D stylelint @xip-online-applications/stylelint-config

and extend the configuration in your package.json:

{
  // ...
  "stylelint": {
    "extends": "@xip-online-applications/stylelint-config"
  }
}

Browserslist​

Browserslist is a way of sharing information about target/supported browsers in front-end projects. Install the XIP browserslist configuration:

npm i -D @xip-online-applications/browserslist-config

and extend the configuration in your package.json:

{
  // ...
  "browserslist": ["extends @xip-online-applications/browserslist-config"]
}

Commitlint​

We lint commits using Husky hooks. Run the following command to install Husky and the XIP configuration:

npm i -D husky @xip-online-applications/commitlint-config

Add husky install to your prepare script in package.json so that husky is installed when you run npm/yarn/pnpm install.

"scripts": {
  // ...
  "prepare": "husky install",
}

Add a commit hook with husky:

npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

IDE setup​

For VSCode users, we recommend the following settings to speed up your workflow. These settings will:

  • set the default formatter to prettier;
  • disable default (S)CSS validation;
  • enable automatic formatting on save.
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "css.validate": false,
  "scss.validate": false,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.addMissingImports": true,
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "stylelint.validate": ["css", "scss"]
}