Setup

Para cualquier nuevo proyecto o cualquier proyecto desarrollado antes de la publicación de esta guía se debe tener en cuenta lo siguiente:

• Volta - volta.sh
• Linter - Angular eslint
• Prettier - Prettier

Volta

Volta es un gestor de herramientas javascript. Cuando el equipo de trabajo (desarrolladores) trabaja con volta instalado, volta gestionará la versión de node y npm de acuerdo con la configuración en package.json sin tener que preocuparse de cambiar de proyecto y cambiar de versión de node para cada proyecto.

1. Instalación de Volta

# install Volta
curl https://get.volta.sh | bash

# install Node
volta install node

# start using Node
node

2. Agregar la versión de Node al package.json. Para nuevos proyectos utilizar la última versión estable de Node.

{
    ...,
    "volta": {
        "node": "14.15.4"
    }
}

Linter

• Linter - Angular eslint

1. Agregar schematics ng add @angular-eslint/schematics@ANGULAR_CLI_VERSION

   Ejemplo. ng add @angular-eslint/schematics@14 for @angular/cli@14

2. Si no existe previamente, crear el archivo .eslintrc.json en el directorio raíz y agregar la siguiente configuración:

{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/component-class-suffix": [
          "error",
          {
            "suffixes": ["Page", "Component"]
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ]
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    }
  ]
}

3. Agregar o editar el siguiente script en `package.json“

{
    ...,
    "lint": "eslint . --ext .ts --max-warnings 0"`,
    ...
}

Ahora linter funcionara ejecutando npm run lint

Prettier

Usamos Prettier para unificar y eliminar el debate acerca del estilo de código. Ayuda a construir y forzar una guía de estilo, facilitar a nuevos integrantes al no tener que preocuparse por el estilo de código y dedicarse justo a solo escribirlo.

1. Instalar prettier `npm install —save-dev —save-exact prettier“

2. Crear archivo de configuración .prettierrc.json

3. Agregar la siguientes reglas:

{
  "singleQuote": true,
  "quoteProps": "preserve",
  "printWidth": 120,
  "htmlWhitespaceSensitivity": "ignore",
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "html"
      }
    },
    {
      "files": "*.component.html",
      "options": {
        "parser": "angular"
      }
    },
    {
      "files": "*.page.html",
      "options": {
        "parser": "angular"
      }
    }
  ]
}

4. Crear el archivo .prettierignore y agregar lo siguiente:

/node_modules

package-lock.json

assets
resources

coverage
docs
pipelines
proxy

Dockerfile
logs.txt
protractor.conf.js
dist

.gitlab-ci.yml
.angular/cache

documentation

5. Agregar el siguiente script a `package.json“

{
    ...,
    "format": "prettier --write .",
    ...
}

Ahora el formateo del código se puede conseguir ejecutando `npm run format“