@intech.lu/eslint-config-angular 1.0.0

package/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright 2025 InTech S.A.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,90 @@
+# 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](#⚙️-installation)
+    1. [Requirements](#📋-requirements)
+    2. [Step 1: install the ESLint extension for VSCode](#1️⃣-step-1-install-the-eslint-extension-for-vscode)
+    3. [Step 2: install ESLint and the InTech rules](#2️⃣-step-2-install-eslint-and-the-intech-rules)
+    4. [Step 3: create the ESLint configuration](#3️⃣-step-3-create-the-eslint-configuration)
+    5. [Step 4: enjoy 🎉](#4️⃣-step-4-enjoy-🎉)
+2. [Contribute](#🤝-contribute)
+    1. [Development](#💻-development)
+    2. [Deployment](#🚀-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:
+
+```json
+{
+  "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:
+
+```bash
+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:
+
+```js
+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:
+
+```js
+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.

package/eslint.config.mjs

@@ -0,0 +1,109 @@
+import angular from 'angular-eslint';
+import { defineConfig } from 'eslint/config';
+import eslintConfig from '@intech.lu/eslint-config';
+
+export default defineConfig(
+  ...eslintConfig,
+  {
+    files: ["**/*.ts"],
+    extends: [
+      ...angular.configs.tsAll,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      // @angular-eslint already has a rule for this but only allows 
+      // "Component" suffixes. This rule adds support for "Page" 
+      // and "Modal" suffixes.
+      '@angular-eslint/component-class-suffix': [
+        'error',
+        {
+          suffixes: ['Component', 'Page', 'Modal'],
+        },
+      ],
+      // Kebab case is the recommended way to name Angular components,
+      // so we want to enforce this naming convention.
+      // https://angular.dev/style-guide#component-selectors
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          style: 'kebab-case',
+        },
+      ],
+      // Lower camel case is the recommended way to name Angular 
+      // directives, so we want to enforce this naming convention.
+      // https://angular.dev/style-guide#directive-selectors
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          style: 'camelCase',
+        },
+      ],
+      // Empty functions should not go in production code, as they are a sign of
+      // a mistake or a leftover from development. Just add a comment in the function
+      // body to explain why it's empty and the error will go away.
+      // However, we want to allow empty constructors, as they are common in Angular
+      // for dependency injection (when not using inject() method) or to inject
+      // data in modal components.
+      'no-empty-function': ['error', { allow: ['constructors'] }],
+      // Members are public by default in TypeScript classes, so we
+      // don't need to explicitly declare them as public.
+      '@typescript-eslint/explicit-member-accessibility': [
+        'error',
+        {
+          accessibility: 'no-public',
+          ignoredMethodNames: [
+            'ngOnInit',
+            'ngAfterViewInit',
+            'ngAfterContentInit',
+            'ngDoCheck',
+            'ngAfterViewChecked',
+            'ngAfterContentChecked',
+            'ngOnChanges',
+            'ngOnDestroy',
+          ],
+        },
+      ],
+      // Angular uses decorators to define props of a component,
+      // which is changing with the introduction of signals. But still,
+      // we want to enforce decorators to be places before constructor
+      // and members.
+      '@typescript-eslint/member-ordering': [
+        'error',
+        {
+          default: {
+            memberTypes: [
+              'signature',
+              'decorated-field',
+              'field',
+              'constructor',
+              'method',
+            ],
+            order: 'as-written',
+          },
+        },
+      ],
+      "@typescript-eslint/no-extraneous-class": [
+        "error",
+        {
+          allowWithDecorator: true,
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAll,
+    ],
+    rules: {
+      // Even if it's not considered a good practice, it really too handy to call expressions
+      // in Angular templates and reduce the amount of logic in the component class.
+      '@angular-eslint/template/no-call-expression': 'off',
+      // A project don't necessarily use Angular i18n, so we disable this rule.
+      '@angular-eslint/template/i18n': 'off',
+    }
+  },
+);

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@intech.lu/eslint-config-angular",
+  "version": "1.0.0",
+  "description": "ESLint rules for InTech Angular projects",
+  "keywords": [
+    "style guide",
+    "lint",
+    "eslint",
+    "prettier",
+    "format",
+    "intech",
+    "angular"
+  ],
+  "author": "InTech S.A. <equipe.titane@intech.lu> (https://www.intech.lu)",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "contributors": [
+    {
+      "name": "Tristan Chaumont",
+      "email": "tristan.chaumont@intech.lu"
+    },
+    {
+      "name": "Loïc Gasiorowski",
+      "email": "loic.gasiorowski@intech.lu"
+    },
+    {
+      "name": "Silvio Brancati",
+      "email": "silvio.brancati@intech.lu"
+    },
+    {
+      "name": "Jacques Vernay",
+      "email": "jacques.vernay@intech.lu"
+    }
+  ],
+  "repository": "github:intech-lu/eslint-config-angular",
+  "homepage": "github:intech-lu/eslint-config-angular",
+  "license": "MIT",
+  "files": [
+    "eslint.config.mjs"
+  ],
+  "main": "eslint.config.mjs",
+  "dependencies": {
+    "angular-eslint": "^20.4.0",
+    "@intech.lu/eslint-config": "1.0.1"
+  },
+  "peerDependencies": {
+    "eslint": "^9.35.0"
+  },
+  "engines": {
+    "node": ">=18.18.0"
+  }
+}