Skip to main content

Configuration

Jeff Gonzalez

ESLint​

The only eslint rule right now added on top of the stuff NX gives you by default is eqeqeq.

There is an issue to add the NGRX ESLint rules

https://github.com/hypertheory-reference/angular/issues/24

~/.eslintrc.json
{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nrwl/nx"],
  "overrides": [W
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
        "eqeqeq": "warn",
        "@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            "enforceBuildableLibDependency": true,
            "allow": [],
            "depConstraints": [
              {
                "sourceTag": "*",
                "onlyDependOnLibsWithTags": ["*"]
              }
            ]
          }
        ]
      }
    },
    {
      "files": ["*.ts", "*.tsx"],
      "extends": ["plugin:@nrwl/nx/typescript"],
      "rules": {}
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": ["plugin:@nrwl/nx/javascript"],
      "rules": {}
    },
    {
      "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
      "env": {
        "jest": true
      },
      "rules": {}
    }
  ]
}

Prettier​

The configuration for Prettier looks like this:

~/prettier.rc
{
  "plugins": ["./node_modules/prettier-plugin-multiline-arrays"],
  "singleQuote": true,
  "singleAttributePerLine": true,
  "trailingComma": "all",
  "arrowParens": "always"
}

The prettier-plugin-multiline-arrays was NPM installed as a dev dependency.

prettier-plugin-multiline-arrays​

I really like this most of the time. Especially for modules, etc. Each element in the array is put on its own line:

Example
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedModule,
    AppNgrxModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

However in some places, it can be annoying. For example, in destructuring an array:

Example
// prettier-ignore
map(([,result]) => result)

singleQuote​

I've learned to live with it. It is the Angular Way.

singleLinePerAttribute​

Love it. In templates, it means if an element has multiple attributes, they each break on their own line.

Attributes Example
<a
    class="btn btn-accent"
    [routerLink]="['..', '..', 'list']"
  >Back to the List</a
>

trailingCommas​

I just like it. Especially with the multi-line arrays. You don't have to remember to go back up to the previous element and add a comma.

arrowParens​

Arrow functions with a single argument don't require parens. Others do. I just like to make them consistent.