Geekly articles weekly

Regras estritas para um novo aplicativo Angular

Como criar e configurar um projeto Angular do zero


Breve introdução


Muitas vezes, encontro uma situação em que o projeto não está configurado estritamente o suficiente no início do desenvolvimento e isso é um grande erro, pois alterar as configurações do linter ou incluir opções adicionais para verificar o texto datilografado no futuro pode ser uma dor real para toda a equipe. Portanto, não cometa esse erro comum e configure seu projeto o mais rigorosamente possível desde o início.


Preparando o ambiente de desenvolvimento


Git


A primeira coisa que precisa ser instalada em qualquer ambiente de desenvolvimento é o Git . Baixe e instale o Git no seu sistema operacional.


Depois disso, você precisa configurar dados pessoais. Essas informações serão incluídas em cada confirmação e, em seguida, qualquer membro da equipe poderá encontrar o autor de qualquer linha de código no projeto.


//    (  )   $ 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 e NVM


A próxima coisa que você precisa configurar para trabalhar com Angular são os NodeJs . Até agora, a melhor abordagem é instalar os NodeJs usando o Node Version Manager . Isso tornará possível alternar facilmente para qualquer versão e até mesmo fazê-lo automaticamente para cada projeto.


  1. Nos MacOs, você deve criar um arquivo .zshrc no diretório inicial antes de instalar.

 $ touch ~/.zshrc

  1. Execute um dos seguintes comandos para instalar ou atualizar o NVM. A versão da equipe pode ser atualizada. Verifique a versão mais recente aqui .

 $ 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. Instale a versão LTS mais recente dos NodeJs .

 $ nvm install 'lts/*'

  1. Defina como padrão .

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

  1. Nos MacOs, adicione o seguinte código ao arquivo ~ / .zshrc para chamar o nvm use automaticamente quando você for para o diretório que contém o arquivo .nvmrc com uma linha informando ao nvm qual versão do nodejs usar. Para outros sistemas operacionais, leia o manual.

 # 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

Instalação da CLI e criação do projeto


  1. Instale a CLI usando o gerenciador de pacotes npm.

 $ npm install -g @angular/cli

  1. Vá para a pasta do seu projeto e crie um projeto Angular vazio

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

Criamos um projeto vazio com um diretório de aplicativos personalizado para novos aplicativos. Em outras palavras, preparamos a base para o monorepositório .


  1. Crie e confirme o primeiro aplicativo no repositório mono .

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

Para criar aplicativos adicionais, basta repetir esta etapa com um nome de aplicativo diferente em vez de site .


Criação de Biblioteca


Eu geralmente recomendo criar bibliotecas na pasta libs . Para fazer isso, precisamos alterar uma linha no arquivo angular.json :


 "newProjectRoot": "apps",

Na seguinte linha:


 "newProjectRoot": "libs",

E execute o comando:


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

Adicionamos nome do grupo para agrupar mais claramente as bibliotecas por domínio ou outro princípio. Além disso, se você quiser publicar uma biblioteca, por exemplo, no npm, primeiro crie uma organização aqui com o nome correspondente ao nome do grupo . É como um espaço para nome de um grupo de bibliotecas relacionadas, por exemplo:


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

Descreverei com mais detalhes o processo de publicação de bibliotecas em npm em artigos futuros. Enquanto isso, basta seguir esta regra.


E não se esqueça de retornar o angular.json ao seu estado anterior: "newProjectRoot": "apps"


Configuração adicional


Versão do NodeJs


Adicione um arquivo .nvmrc com o texto lts/* . Você também pode especificar uma versão específica do nó, por exemplo 12.13.1 . Esta versão será instalada automaticamente se você seguiu minhas instruções anteriores. Você também pode ativar esta versão manualmente usando o $ nvm use .


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

Verificações rigorosas para nulo e indefinido


Adicione a seguinte regra ao tsconfig.json para ativar a verificação estrita de nulos e indefinidos. Isso o protegerá do erro comum de ler uma propriedade de uma variável indefinida ou nula.


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

Ou melhor , se você quiser verificações mais rigorosas, inclua todas as regras no compilador:


 /* 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. */

Para que o TypeScript seja mais rigoroso, não apenas nos arquivos TS, mas nos modelos Angular, é necessário ativar a opção 'fullTemplateTypeCheck' no tsconfig.json:


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

Depois de adicionar essas regras, tente criar um projeto e corrigir todos os erros encontrados.


 $ npm run build

Regras estritas do TsLint


Ative todas as regras do tslint com as configurações mais rigorosas, basta substituir no tslint.json por este


 "extends": "tslint:recommended",

Ativado


 "extends": "tslint:all",

E adicione as seguintes regras para desativar algumas regras extras


 "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" ]

Durante o processo de desenvolvimento, desative ou configure as regras que você não gosta. E não esqueça de incluir o suporte ao tslint no seu IDE .


Depois de adicionar essas regras, tente executar o projeto com um linter e corrija todos os erros.


 $ npm run lint

SCSS Lint com stylelint


Adicione stylelint para verificar a qualidade do seu código sssss


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

E configure as regras em .stylelintrc


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

Adicione as seguintes linhas para executar o stylelint em package.json


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

Durante o processo de desenvolvimento, desative ou configure as regras que não lhe convêm. E não se esqueça de incluir o suporte à stylelint no seu IDE


 $ npm run lint-all-scss-fix

Mais bonito


Mais bonito é usado para formatar o código. Para algumas linhas de código, o Prettier não fornece o resultado desejado, mas, apesar dos benefícios de usá-lo, há muito mais.


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

Adicione o arquivo de configuração .prettierrc ao projeto


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

E um arquivo .prettierignore com arquivos e pastas ignorados


 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

Adicione scripts para executar mais bonita no package.json


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

Depois disso, execute mais bonito para corrigir todos os arquivos no projeto


 $ npm run prettier

GANCHOS


Para executar o linter, formatador ou outros scripts, podemos configurar os git hooks. Usaremos os seguintes pacotes para isso:


  • rouca - conjuntos de ganchos
  • bastante rápido - lança mais bonito apenas para arquivos modificados

 $ npm i husky pretty-quick -D

O próximo passo é escrever scripts para nossos ganchos. Eu prefiro criar uma pasta de ferramentas para scripts de shell. Vamos configurar 3 ganchos:


  1. pré-confirmação - um gancho que é executado antes da confirmação. Neste capô, veremos os arquivos modificados mais bonitos.
  2. commit-msg - Um gancho no qual você pode alterar o texto de confirmação, usamos para adicionar um nome de filial ao texto de confirmação.
  3. pre-push - Um gancho que é executado antes do git push. Nós o usamos para iniciar o linter.

Configuração Husky no pacote.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

Você também pode adicionar a execução de teste e e2e a um script de pré-envio.


EM BREVE ...


Este artigo é o primeiro de uma série sobre a configuração de um projeto Angular. Nos artigos a seguir, pretendo abordar os seguintes tópicos:


  • Configurando a integração contínua com o Travis e o Docker
  • Renderização do lado do servidor
  • Traduções
  • Testes
  • Gerenciamento do estado e estrutura dos módulos
  • Repositório mono com Nrwl.Nx

Inscreva-se, faça perguntas. Você também pode ver o exemplo descrito neste artigo neste repositório .



Entre também para a nossa comunidade no Medium , Telegram ou Twitter .

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

More articles:


All Articles