Contents |
Es necesario que instales las siguientes herramientas, en este orden:
Home
Artículos
nvm install 20.4.0
npm install -g @angular/cli
Dentro de Visual Studio Code, te recomendamos que crees un perfil vacío y lo asocies a tus nuevos proyectos Angular (podés ver cómo se trabaja con perfiles en VSCode en este video. También te dejamos este tutorial muy piola - en inglés y la documentación oficial).
Opción 1: podés importar este archivo que trae todas las extensiones para Angular
O si no, podés instalar las extensiones del Visual Studio Code manualmente. Para 2024 son los que ya instalaste para trabajar con HTML/CSS y los siguientes:
.eslintrc.json y .prettierrc.json.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
npm start
Para ejecutar los tests de un proyecto, te posicionás en el directorio raíz y ejecutás desde la consola
npm test
Te recomendamos que dentro del proyecto crees una carpeta .vscode y dentro un archivo settings.json que tenga este contenido:
{
"[javascript]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
"editor.formatOnPaste": false, // required
"editor.formatOnType": false, // required
"editor.formatOnSave": true, // optional
"editor.formatOnSaveMode": "file", // required to format on save
},
"[typescript]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
"editor.formatOnPaste": false, // required
"editor.formatOnType": false, // required
"editor.formatOnSave": true, // optional
"editor.formatOnSaveMode": "file", // required to format on save
},
"[json]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
"editor.formatOnPaste": false, // required
"editor.formatOnType": false, // required
"editor.formatOnSave": true, // optional
"editor.formatOnSaveMode": "file", // required to format on save
},
"editor.codeActionsOnSave": {
"source.fixAll": "explicit"
}
}
Dentro del archivo package.json del raíz de tu proyecto debés tener estos scripts (los últimos 4 son los que agregamos):
"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:
20.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:
coverageReporter: {
dir: require('path').join(__dirname, './coverage/XXXXXX'), // <-- reemplazar XXXXXX por nombre del proyecto
subdir: '.',
reporters: [
{ type: 'html' },
{ type: 'text-summary' }, // <-- agregar una coma al final
{ type: 'lcov' } // <-- agregar esta línea
]
},
Si no tenés un archivo
karma.conf.jslo podés generar desde el Angular CLI:ng generate config karma.
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
}
.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
}
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):
