Mise en place d'un projet

Création du projet

Un projet Angular peut se présenter sous deux structures différentes. Une structure “classique” qui ne comprend qu’un unique projet ou bien un workspace pouvant contenir plusieurs applications ou librairies (aussi appelé “monorepo”)

  • Structure ‘classique’
ng new [application-name] --routing --style scss --prefix [prefix]
  • Workspace vide + application (monorepo)
ng new [project-name] --create-application false
ng generate application [application-name] --routing --style scss --prefix [prefix]
Info

Si le projet est créé dans un dépôt Git existant, il faut utiliser l’option --skip-git afin de spécifier au CLI d’Angular de ne pas initialiser de dépôt Git.

Il peut aussi être utile de spécifier le package manager à utiliser à l’aide de l’option --package-manager.

Dans des cas plus rares, l’option --new-project-root permet de spécifier le nom du dossier dans lequel les nouvelles applications devront être générées.

Ajout d’ESLint et de Prettier

  • Installation d’ESLint

Il est possible d’ajouter facilement ESLint à un projet Angular en executant le schematic fourni :

ng add @angular-eslint/schematics

Cela aura pour effet d’installer les dépendances nécessaires et créer le(s) fichier(s) de configuration associé(s).

  • Installation de Prettier
  1. Commencer par installer la package prettier ainsi que les deux plugins nécessaires à son intégration avec ESLint
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
  1. Créer un fichier .prettierrc.json à la racine du projet
{
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "overrides": [
    {
      "files": ".editorconfig",
      "options": { "parser": "yaml" }
    }

  ]
}
  • Exemple de configuration ESLint pour workspace multi-projets
​
{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking",
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:prettier/recommended"
      ],
      "rules": {}
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    }
  ]
}
{
  "extends": "../../.eslintrc.json",
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": [
          "./tsconfig.lib.json",
          "./tsconfig.spec.json"
        ]
      },
      "rules": {
        "@typescript-eslint/no-inferrable-types": "off",
        "@typescript-eslint/no-empty-function": "off",
        "@angular-eslint/no-output-native": "off",
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "ui",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": ["element", "attribute"],
            "prefix": "ui",
            "style": "kebab-case"
          }
        ]
      }
    }
  ]
}

Ajout de Stylelint

  1. Commencer par installer la package stylelint ainsi que sa configuration standard
npm install --save-dev stylelint stylelint-config-standard
  1. Créer un fichier .stylelintrc.json à la racine du projet
{
  "extends": "stylelint-config-standard"
}

Ajout de Commitlint

  1. Commencer par installer la package commitlint ainsi que sa configuration standard
npm install -g @commitlint/cli @commitlint/config-conventional
  1. Créer un fichier commitlint.config.js à la racine du projet
module.exports = {
  extends: ['@commitlint/config-conventional']
}

Ajout de Husky

Husky est un outil qui permet de gérer facilement les Hooks Git en exécutant des scripts au format Node.js

  • Installation

Il peut s’installer de manière automatique grâce au script d’initialisation

npx husky-init && npm install

Mais aussi de manière manuelle en exécutant une suite de commandes :

npm install husky --save-dev
npx husky install
npm set-script prepare "husky install"
  • Création de hooks

Il est nécessaire des hooks afin d’exécuter les linters, les tests au commit et/ou au push. Pour ajouter une commande à un hook ou en créer un nouveau, utiliser la commande husky add <file> [cmd]

Ajout de Storybook

Storybook est un outil qui peut s’avérer très utile pour visualiser et tester ses composants en isolation. Il s’installe très facilement en exécutant le script d’init :

npx storybook init