InTech Angular ESLint rules

Welcome to the "InTech Angular ESLint rules" repository, a centralized solution for managing and applying consistent code quality standards accross all projects at InTech using Angular. This repository hosts a custom ESLint configuration designed to enforce a unified coding style and coding best practices helping to ensure maintainability and reducing code quality discrepancies in collaborative projects.

🗂️ Table of Contents

1. Installation
   1. Requirements
   2. Step 1: install the ESLint extension for VSCode
   3. Step 2: install ESLint and the InTech rules
   4. Step 3: create the ESLint configuration
   5. Step 4: enjoy 🎉
2. Contribute
   1. Development
   2. Deployment

⚙️ Installation

Add the InTech Angular ESLint rules on your existing project.

📋 Requirements

• NPM version >= 9
• Node.js version >= 18.18.0
• Angular version >= 18.0.0

Supported versions

| Angular | InTech Angular ESLint | | ------------------ | --------------------- | | >= 18.0.0 | >= 2.0.0 | | < 18.0.0 | >=1.0.0 <2.0.0 |

1️⃣ Step 1: install the ESLint extension for VSCode

• https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Create a .vscode/settings.json file with the following configuration at the root of your project:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "typescript", "html"]
}

2️⃣ Step 2: install ESLint and the InTech rules

Go to the folder of your project and execute the following command:

npm install -D eslint '@intech.lu/eslint-config-angular'

Note: You'll have to install ESLint at least version 9 as it includes breaking changes and reworks the way ESLint is executed.

3️⃣ Step 3: create the ESLint configuration

At the root of your project, create an eslint.config.mjs file with the following content:

import eslintConfig from '@intech.lu/eslint-config-angular';

export default [ 
  ...eslintConfig,
];

If you need to override the InTech rules for some reason, simply do it by adding rules in your eslint.config.mjs, it will override the InTech related ones:

import eslintConfig from '@intech.lu/eslint-config-angular';

export default [ 
  ...eslintConfig,
  {
    rules: {
      'no-console': 'error', // will switch InTech 'no-console' rule value from 'warn' to 'error'
    }
  },
];

⚠️ NB: You should always override InTech rules after destructuring eslintConfig, otherwise eslintConfig will take precedence and override the rules you've just added.

4️⃣ Step 4: enjoy 🎉

You now have the InTech Angular ESLint rules applied automatically to your project.