Project Setup

For any new project or any project developed before the release of the guidelines the following would be considered.

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

Volta

Volta is the hassle-free javascript tool manager. When every developer works with volta installed, volta will manage the node and npm version according to the setup on package.json without having to worry about switching projects and switching node version for every project.

1. Volta installation

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

# install Node
volta install node

# start using Node
node

2. Add node version on package.json for new projects use the latest stable version of Node.

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

Linter

• Linter - Angular eslint

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

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

2. If does not exist already, create a .eslintrc.json file on root folder and add the following configuration:

{
  "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. Add or edit the following script in `package.json“

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

Now the linter works by npm run lint

Prettier

We use prettier to stop any debate over styling. Build and enforce a style guide, help newcomers to worry less about code style and focus about actually writing code.

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

2. Create config file .prettierrc.json

3. Add the following rules:

{
  "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. Create file .prettierignore and add the following:

/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. Add following script to `package.json“

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

Now the formatter works by npm run format