Es necesario que instales las siguientes herramientas, en este orden:
nvm install lts/hydrogen -> v18.4.0
npm install -g @angular/cli
Los plugins del Visual Studio Code que te recomendamos al 2021 son:
Otra opción es utilizar Web Storm (de la suite de IntelliJ), si tienen una cuenta de la facultad pueden solicitar una licencia educativa. Solo que como no vamos a aprovechar todas las herramientas de este IDE poderoso quizás convenga ir por el Visual Studio Code.
Typescript es el lenguaje de programación base para Angular. Tranquilo, es muy similar a los lenguajes orientados a objetos en los que ya trabajaste. Para iniciarte o para hacer consultas te dejamos estos links:
En la consola Git Bash o bien desde una terminal de Linux hacemos
ng new nombre-de-tu-app
cd nombre-de-tu-app
ng serve -open # o bien, la versión corta es ng s -o
Para ejecutar los tests de un proyecto, te posicionás en el directorio raíz y ejecutás desde la consola
ng test
Te recomendamos que dentro del proyecto crees una carpeta .vscode
y dentro un archivo settings.json
que tenga este contenido:
{
"prettier.semi": false,
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true
},
"[typescript]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true
},
"[json]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
Dentro del archivo package.json
del raíz de tu proyecto debés tener estos scripts:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "eslint \"**/*.{ts,tsx}\" ",
"lint:fix": "eslint --fix \"**/*.{ts,tsx}\" ",
"build:prod": "ng build --prod",
"test:prod": "ng test --browsers=ChromeHeadless --watch=false --code-coverage"
},
Instalaremos algunas dependencias adicionales:
# Installar ESLint
npm install --save-dev eslint @typescript-eslint/parser
# Instalar plugins adicionales
npm install --save-dev @typescript-eslint/eslint-plugin eslint-plugin-prettier
# Instalar Prettier y sus dependencias
npm install --save-dev prettier prettier-eslint eslint-config-prettier
Tener un archivo .nvmrc
es conveniente si todo el equipo trabaja con NVM (el versionador de Node). El contenido especifica qué versión de Node vamos a utilizar:
18.4.0
Te recomendamos que configures tu archivo .gitignore de la siguiente manera:
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
/out-tsc
# Only exists if Bazel was run
/bazel-out
# dependencies
/node_modules
# profiling files
chrome-profiler-events*.json
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings
# System Files
.DS_Store
Thumbs.db
# Angular cache
.angular
El linter es el proceso que genera advertencias o errores en base a la sintaxis y semántica de nuestros componentes. Lo interesante es que podemos configurar, por ejemplo, que escribir console.log
o debugger
no es código que queremos que esté en el ambiente productivo, pero sí podríamos admitirlo en desarrollo. También se puede configurar validaciones como el uso de let en lugar de const, variables sin utilizar, etc. Te dejamos la configuración recomendada en el archivo .eslintrc.json
que debe estar en el directorio raíz:
{
"parser": "@typescript-eslint/parser",
"extends": [
"plugin:@typescript-eslint/recommended"
],
"parserOptions": {
"ecmaVersion": 2021,
"sourceType": "module"
},
"rules": {
"semi": [
2,
"never"
],
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/explicit-module-boundary-types": ["off"],
"@typescript-eslint/no-var-requires": "off"
}
}
Para ejecutar el linter desde la línea de comandos, podés escribir
npm run lint
con el archivo package.json
que contenga los scripts que arriba te dejamos. Es importante hacerlo ya que el CI de Github Actions lo va a ejecutar para pasar el build, para arreglar automáticamente todos los problemas que detecta el linter podés hacer
npm run lint:fix
Al archivo karma.conf.js
que está en el directorio raíz hay que agregarle la opción para que genere el porcentaje de cobertura en formato json
también (borrale los comentarios porque no están permitidos en json
):
coverageReporter: {
dir: require('path').join(__dirname, './coverage/eg-conversor-angular'),
subdir: '.',
reporters: [
{ type: 'html' },
{ type: 'text-summary' }, // <-- agregar una coma al final
{ type: 'json-summary' } // <-- agregar esta línea
]
},
En la carpeta raíz creá los siguientes archivos
.htmlhintrc
(configuración del Linter para HTML), con el siguiente contenido
{
"tagname-lowercase": false,
"attr-lowercase": false,
"attr-value-double-quotes": true,
"doctype-first": false,
"tag-pair": true,
"spec-char-escape": true,
"id-unique": true,
"src-not-empty": true,
"attr-no-duplication": true,
"title-require": true
}
.prettierrc.json
(configuración de Prettier para eliminar puntos y coma, definir tab de 2 espacios, utilizar single quote, etc.) Es importante que tod@s tengan esta configuración para que no haya un montón de conflictos en git a la hora de pushear.
{
"singleQuote": true,
"trailingComma": "none",
"endOfLine": "auto",
"tabWidth": 2,
"semi": false
}
Para tener información más precisa sobre el porcentaje de cobertura de tus tests, en el archivo app.component.spec.ts
de tu directorio src/app
tenés que agregar este import:
import './app.module'
Para agregar el coverage tenés que reemplazar XXXXXXXXX
por el nombre de la carpeta donde está tu proyecto.
Te dejamos este archivo de ejemplo que tenés que guardar en .github/workflows/build.yml
. Descargalo y reemplazá XXXXXXXXX
por el nombre de la carpeta donde está tu proyecto.
Para agregar el badge del build de Github Actions, seguí estas instrucciones
Para agregar el badge del porcentaje de cobertura, tenés que agregar la imagen que genera el mismo build de Github Actions (reemplazando XXXXXXX
por el nombre de la carpeta donde está tu proyecto):
