How to use ng lint with Angular

What you will learn?

1. What is lint
2. How to use lint with Angular
3. Must use TS Lint rules

What is lint

When we build enterprise standard application we run static code analysis which involves more manual work to review the code and making sure it is comply with the coding guidelines. Lint helps to process your typescript, expressions and templates validates against the defined rules and discovers potential errors.

• Helps to write consistent code
• Discovers potential errors
• Validates expressions, templates and even inline styles

How to use lint with Angular

When we create new Angular project by default it scaffolds with the lint setup, Angular CLI integrates codelyzer and TSLint tool for executing the lint rules.

Codelyzer built with predefined set of rules which is inspired by the Angular style guide.

tslint.json

{
  "extends": "tslint:recommended",
  "rules": {
    "array-type": false,
    "arrow-parens": false,
    "deprecation": {
      "severity": "warning"
    },
    "component-class-suffix": true,
    "contextual-lifecycle": true,
    "directive-class-suffix": true,
    "directive-selector": [
      true,
      "attribute",
      "app",
      "camelCase"
    ],
    "component-selector": [
      true,
      "element",
      "app",
      "kebab-case"
    ],
    "import-blacklist": [
      true,
      "rxjs/Rx"
    ],
    "interface-name": false,
    "max-classes-per-file": false,
    "max-line-length": [
      true,
      140
    ],
    "member-access": false,
    "member-ordering": [
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-consecutive-blank-lines": false,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-empty": false,
    "no-inferrable-types": [
      true,
      "ignore-params"
    ],
    "no-non-null-assertion": true,
    "no-redundant-jsdoc": true,
    "no-switch-case-fall-through": true,
    "no-var-requires": false,
    "object-literal-key-quotes": [
      true,
      "as-needed"
    ],
    "object-literal-sort-keys": false,
    "ordered-imports": false,
    "quotemark": [
      true,
      "single"
    ],
    "trailing-comma": false,
    "no-conflicting-lifecycle": true,
    "no-host-metadata-property": true,
    "no-input-rename": true,
    "no-inputs-metadata-property": true,
    "no-output-native": true,
    "no-output-on-prefix": true,
    "no-output-rename": true,
    "no-outputs-metadata-property": true,
    "template-banana-in-box": true,
    "template-no-negated-async": true,
    "use-lifecycle-interface": true,
    "use-pipe-transform-interface": true
  },
  "rulesDirectory": [
    "codelyzer"
  ]
}

We have three keys in above json

1. extends
2. rules
3. rulesDirectory

Let's focus on the rules rules now

"no-console" - This rule defines that no console statement is allowed and defined methods are not allowed.

"max-line-length" - For better readability of the code line length plays major role, this rule sets the allowed line length.

Example

 "max-line-length": [
      true,
      140
    ]

You can run "ng lint" to validate your code and we can also use VS Code which will gives realtime lint errors that will save your day.

Must use TS Lint

By default we get set of lint rules available but these rules will improve your code quality.

"no-unbound-method" - Prevents accidental use of single equal instead of conditional equal operator "===" or "==".

Fails

private condtion = this.role = 'admin' ? true : false;

Works

private condtion = this.role === 'admin' ? true : false;

"no-sparse-arrays" - it detects the missing element in an array.

private asc = ['a', 'b', 'c',, 'd', 'e'];

after "c" element we have comma "," which will will not throw error but if we use "no-sparse-arrays" rule, it will detects it and throws an error.

"no-invalid-template-string" - This rule detects the string concatenation with the "+" and suggest to use template string instead.

// Can be improved
const name = firstName + lastName; // Output - VasanthJagadeesan

// Alternative to first one but still can be improved
const name = firstName + ' ' + lastName; // Output - Vasanth Jagadeesan

// Better way
const name = `${firstName} ${lastName}`; // Output - Vasanth Jagadeesan

Conclusion

We have seen about lint and how to use the lint with angular also we have seen must use lint rules for improving better code quality.