Geekly articles weekly

Règles strictes pour une nouvelle application Angular

Comment créer et configurer un projet Angular à partir de zéro


Brève introduction


Très souvent, je rencontre une situation où le projet n'est pas configuré de manière suffisamment stricte au début du développement et c'est une grosse erreur, car la modification des paramètres du linter ou l'inclusion d'options supplémentaires pour vérifier le dactylographie à l'avenir peut être une vraie douleur pour toute l'équipe. Par conséquent, ne commettez pas cette erreur courante et configurez votre projet aussi strictement que possible dès le début.


Préparation de l'environnement de développement


Git


La première chose qui doit être installée sur n'importe quel environnement de développement est Git . Téléchargez et installez Git sur votre système d'exploitation.


Après cela, vous devez configurer des données personnelles. Ces informations seront incluses dans chaque commit, puis tout membre de l'équipe pourra trouver l'auteur de n'importe quelle ligne de code sur le projet.


//    (  )   $ git config --global user.name "John Doe" $ git config --global user.email johndoe@example.com //            $ git config user.name "John Doe" $ git config user.email johndoe@example.com

NodeJs et NVM


La prochaine chose que vous devez configurer pour fonctionner avec Angular est NodeJs . Jusqu'à présent, la meilleure approche consiste à installer NodeJs à l'aide de Node Version Manager . Cela permettra de passer facilement à n'importe quelle version et même de le faire automatiquement pour chaque projet.


  1. Sur MacOs, vous devez créer un fichier .zshrc dans votre répertoire personnel avant l'installation.

 $ touch ~/.zshrc

  1. Exécutez l' une des commandes suivantes pour installer ou mettre à niveau NVM. La version de l'équipe peut être mise à jour, alors vérifiez la dernière version ici .

 $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash $ wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash

  1. Installez la dernière version LTS de NodeJs .

 $ nvm install 'lts/*'

  1. Définissez-le par défaut .

 $ nvm use 'lts/*' $ nvm alias default 'lts/*'

  1. Sous MacOs, ajoutez le code suivant au fichier ~ / .zshrc pour appeler automatiquement nvm use lorsque vous accédez au répertoire contenant le fichier .nvmrc avec une ligne indiquant à nvm la version de nodejs à utiliser. Pour les autres systèmes d'exploitation, lisez le manuel.

 # place this after nvm initialization! autoload -U add-zsh-hook load-nvmrc() { local node_version="$(nvm version)" local nvmrc_path="$(nvm_find_nvmrc)" if [ -n "$nvmrc_path" ]; then local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")") if [ "$nvmrc_node_version" = "N/A" ]; then nvm install elif [ "$nvmrc_node_version" != "$node_version" ]; then nvm use fi elif [ "$node_version" != "$(nvm version default)" ]; then echo "Reverting to nvm default version" nvm use default fi } add-zsh-hook chpwd load-nvmrc load-nvmrc

Installation CLI et création de projet


  1. Installez la CLI à l'aide du gestionnaire de packages npm.

 $ npm install -g @angular/cli

  1. Accédez à votre dossier de projet et créez un projet Angular vide

 $ cd ~/Projects $ ng new --create-application false --new-project-root apps project-name

Nous avons créé un projet vide avec un répertoire d' applications personnalisé pour les nouvelles applications. En d'autres termes, nous avons préparé la base du monorepositaire .


  1. Créez et validez la première application dans le référentiel mono .

 $ cd project-name $ ng generate application --routing true --style scss website $ git add . $ git commit -m 'website application created'

Pour créer des applications supplémentaires, répétez simplement cette étape avec un nom d'application différent au lieu du site Web .


Création de bibliothèque


Je recommande généralement de créer des bibliothèques dans le dossier libs . Pour ce faire, nous devons modifier une ligne dans le fichier angular.json :


 "newProjectRoot": "apps",

Sur la ligne suivante:


 "newProjectRoot": "libs",

Et exécutez la commande:


 $ ng generate library @group-name/lib-name

Nous avons ajouté group-name pour regrouper plus clairement les bibliothèques par domaine ou un autre principe. De plus, si vous souhaitez publier une bibliothèque par exemple dans npm, vous devez d'abord créer une organisation ici avec le nom correspondant à group-name . C'est comme un espace de noms pour un groupe de bibliothèques liées, par exemple:


 "@angular/common" "@angular/compiler" "@angular/core" "@angular/forms"

Je décrirai plus en détail le processus de publication des bibliothèques dans npm dans les prochains articles. En attendant, suivez simplement cette règle.


Et n'oubliez pas de remettre angular.json à son état précédent: "newProjectRoot": "apps"


Configuration supplémentaire


Version NodeJs


Ajoutez un fichier .nvmrc contenant du texte lts lts/* . Vous pouvez également spécifier une version spécifique du nœud, par exemple 12.13.1 . Cette version sera automatiquement installée si vous avez suivi mes instructions précédentes. Vous pouvez également activer cette version manuellement à l'aide de la $ nvm use .


 $ touch .nvmrc $ echo "lts/*" > .nvmrc

Vérifications strictes pour null et indéfini


Ajoutez la règle suivante à tsconfig.json pour activer la vérification stricte de null et indéfini. Cela vous protégera de l'erreur courante de lecture d'une propriété d'une variable non définie ou nulle.


 "compilerOptions": { "strictNullChecks": true, }

Ou mieux , si vous voulez des contrôles plus rigoureux, incluez toutes les règles dans le compilateur:


 /* Strict Type-Checking Options */ "strict": true, /* Enable all strict type-checking options. */ // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ // "strictNullChecks": true, /* Enable strict null checks. */ // "strictFunctionTypes": true, /* Enable strict checking of function types. */ // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ /* Additional Checks */ "noUnusedLocals": true, /* Report errors on unused locals. */ "noUnusedParameters": true, /* Report errors on unused parameters. */ "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */

Pour que TypeScript soit plus strict non seulement dans les fichiers TS, mais dans les modèles angulaires, vous devez activer l'option 'fullTemplateTypeCheck' dans tsconfig.json:


 { "compilerOptions": { ... }, "angularCompilerOptions": { "fullTemplateTypeCheck": true ... } }

Après avoir ajouté ces règles, essayez de créer un projet et de corriger toutes les erreurs trouvées.


 $ npm run build

Règles strictes de TsLint


Activez toutes les règles tslint avec les paramètres les plus stricts, remplacez-les simplement dans tslint.json pour cela


 "extends": "tslint:recommended",

Sur


 "extends": "tslint:all",

Et ajoutez les règles suivantes pour désactiver certaines règles supplémentaires


 "no-implicit-dependencies": false, "no-submodule-imports": false, "completed-docs": false, "prefer-function-over-method": false, "file-name-casing": [ true, "kebab-case" ], "no-object-literal-type-assertion": [ true, { "allow-arguments": true } ], "no-floating-promises": false, "promise-function-async": false, "no-unsafe-any": false, "no-any": false, "comment-format": [ true, "check-space" ], "newline-per-chained-call": false, "typedef": [ true, "call-signature", "arrow-call-signature", "parameter", "arrow-parameter", "property-declaration", "object-destructuring", "array-destructuring" ]

Au cours du processus de développement, désactivez ou configurez les règles que vous n'aimez pas. Et n'oubliez pas d'inclure le support tslint dans votre IDE .


Après avoir ajouté ces règles, essayez d'exécuter le projet avec un linter et corrigez toutes les erreurs.


 $ npm run lint

Lint SCSS avec stylelint


Ajoutez stylelint pour vérifier la qualité de votre code sssss


 $ npm install stylelint stylelint-config-standard --save-dev $ touch .stylelintrc

Et configurez les règles dans .stylelintrc


 { "extends": "stylelint-config-standard", "rules": {} }

Ajoutez les lignes suivantes pour exécuter stylelint dans package.json


 "scripts": { "lint-all-scss": "stylelint \"**/*.scss\"", "lint-all-scss-fix": "npm run lint-all-scss -- --fix" }

Au cours du processus de développement, désactivez ou configurez les règles qui ne vous conviennent pas. Et n'oubliez pas d'inclure le support stylelint dans votre IDE


 $ npm run lint-all-scss-fix

Plus joli


Plus joli est utilisé pour formater le code. Pour certaines lignes de code, Prettier ne vous donne pas le résultat que vous aimez, mais malgré les avantages de l'utiliser, il y a bien plus.


 $ npm install --save-dev --save-exact prettier

Ajoutez le fichier de configuration .prettierrc au projet


 { "printWidth": 120, "tabWidth": 2, "arrowParens": "always", "bracketSpacing": true, "endOfLine": "lf", "semi": true, "singleQuote": true, "quoteProps": "consistent", "trailingComma": "all" }

Et un fichier .prettierignore avec des fichiers et dossiers ignorés


 karma.conf.js protractor.conf.js ng-package.json package.json tsconfig.lib.json tsconfig.app.json tsconfig.spec.json tslint.json tsconfig.json browserslist .gitkeep favicon.ico

Ajouter des scripts pour exécuter plus joli dans package.json


 "scripts": { "prettier": "prettier --write \"{apps,libs}/**/*\"", "prettier:check": "prettier --check \"{apps,libs}/**/*\"" },

Après cela, exécutez plus joli pour corriger tous les fichiers du projet


 $ npm run prettier

CROCHETS


Afin d'exécuter linter, formatter ou d'autres scripts, nous pouvons configurer les hooks git. Nous utiliserons pour cela les packages suivants:


  • husky - pose des crochets
  • assez rapide - lance plus joli uniquement pour les fichiers modifiés

 $ npm i husky pretty-quick -D

L'étape suivante consiste à écrire des scripts pour nos hooks. Je préfère créer un dossier d' outils pour les scripts shell. Nous allons configurer 3 crochets:


  1. pre-commit - Un hook qui est exécuté avant le commit. Dans ce capot, nous serons plus jolis sur les fichiers modifiés.
  2. commit-msg - Un hook dans lequel vous pouvez changer le texte de commit, nous l'utilisons pour ajouter un nom de branche au texte de commit.
  3. pre-push - Un hook qui est exécuté avant git push. Nous l'utilisons pour lancer linter.

Configuration Husky dans package.json :


 "husky": { "hooks": { "pre-commit": "pretty-quick --staged", "commit-msg": "node ./tools/commit-msg.js", "pre-push": "./tools/pre-push.sh" } },

Script ./tools/commit-msg.js


 const fs = require('fs'); const { execSync } = require('child_process'); const message = fs.readFileSync(process.env.HUSKY_GIT_PARAMS, 'utf8').trim(); const currentBranch = getCurrentBranch(); fs.writeFileSync(process.env.HUSKY_GIT_PARAMS, `${currentBranch}: ${message}`); process.exit(0); function getCurrentBranch() { const branches = execSync('git branch', { encoding: 'utf8' }); return branches .split('\n') .find((b) => b.charAt(0) === '*') .trim() .substring(2); }

Script ./tools/pre-push.sh


 #!/usr/bin/env bash npm run lint-all-scss || exit npm run lint || exit

Vous pouvez également ajouter un cycle de test et e2e à un script de pré-push.


BIENTÔT ...


Cet article est le premier d'une série sur la configuration d'un projet Angular. Dans les articles suivants, je prévois de couvrir les sujets suivants:


  • Configuration de l'intégration continue avec Travis et Docker
  • Rendu côté serveur
  • Traductions
  • Les tests
  • Gestion de l'état et de la structure des modules
  • Référentiel mono avec Nrwl.Nx

Abonnez-vous, posez des questions. Vous pouvez également voir l'exemple décrit dans cet article dans ce référentiel .



Rejoignez également notre communauté sur Medium , Telegram ou Twitter .

Source: https://habr.com/ru/post/fr481444/

More articles:


All Articles