mgechev/tslint-angular

Recommended tslint configuration for Angular applications.

Angular TSLint Preset

A preset with TSLint rules for development of Angular applications. The preset contains both, tslint core rules, and codelyzer rules, which are going to perform Angular specific linting.

This package is based on the tslint configuration of Angular CLI and aligns with the Angular style guide.

Note: there are few more rules added on top of the Angular CLI configuration.

How to use?

npm i tslint-angular --save-dev

After that configure tslint.json to use the preset:

{
  "extends": ["tslint-angular"],
  "rules": {
    "directive-selector": [true, "attribute", "foo", "camelCase"],
    "component-selector": [true, "element", "foo", "kebab-case"]
  }
}

Notice that directive-selector and component-selector are configurable so you need to add them manually in the rules section of tslint.json.

License

MIT

tslint-angular's Issues

New innner config for tslint-angular:codelyzer

@mgechev, in this preset there is an override of the tslint:all config, I understand that this preset complies with angular style guide, but this in the future can be difficult to maintain. Maybe it makes sense to create another inner config with only codelyzer rules. Example: tslint-angular:codelyzer only codelyzer rules without override tslint:all config

There are errors after automatic correction

# "lint": "ng lint"
npm run lint -- --force --fix 'src/**/*{.ts}' -t verbose

tslint.json

{
  "extends": [
    "tslint:latest",
    "tslint-config-prettier",
    "tslint-config-airbnb",
    "tslint-angular",
    "rxjs-tslint-rules"
  ],
  "rulesDirectory": [
    "node_modules/codelyzer"
  ],
  "rules": {
    "arrow-return-shorthand": true,
    "callable-types": true,
    "class-name": true,
    "comment-format": [
      true,
      "check-space"
    ],
    "curly": true,
    "eofline": true,
    "forin": true,
    "import-blacklist": [
      true,
      "rxjs"
    ],
    "import-spacing": true,
    "indent": [
      true,
      "spaces"
    ],
    "interface-over-type-literal": true,
    "label-position": true,
    "max-line-length": [
      true,
      140
    ],
    "member-access": false,
    "member-ordering": [
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-super": true,
    "no-empty": false,
    "no-empty-interface": true,
    "no-eval": true,
    "no-inferrable-types": [
      true,
      "ignore-params"
    ],
    "no-misused-new": true,
    "no-non-null-assertion": true,
    "no-shadowed-variable": true,
    "no-string-literal": false,
    "no-string-throw": true,
    "no-switch-case-fall-through": true,
    "no-trailing-whitespace": true,
    "no-unnecessary-initializer": true,
    "no-unused-expression": true,
    "no-use-before-declare": true,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
    "one-line": [
      true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "prefer-const": true,
    "quotemark": [
      true,
      "single"
    ],
    "radix": true,
    "semicolon": [
      true,
      "always",
      "ignore-bound-class-methods"
    ],
    "triple-equals": [
      true,
      "allow-null-check"
    ],
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      }
    ],
    "typeof-compare": true,
    "unified-signatures": true,
    "variable-name": false,
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type",
      "check-module"
    ],
    "directive-selector": [
      true,
      "attribute",
      "app",
      "camelCase"
    ],
    "component-selector": [
      true,
      "element",
      "app",
      "kebab-case"
    ],
    "use-input-property-decorator": true,
    "use-output-property-decorator": true,
    "use-host-property-decorator": true,
    "no-input-rename": true,
    "no-output-rename": true,
    "use-life-cycle-interface": true,
    "use-pipe-transform-interface": true,
    "component-class-suffix": true,
    "directive-class-suffix": true,
    "no-access-missing-member": true,
    "templates-use-public": true,
    "invoke-injectable": true
  }
}

Broken html(s)

Update to codelyzer v6 or have less strict versioning

tslint-angular/package.json

Line 22 in b1b059e

"codelyzer": "^5.0.0",

Allowed console.log

I was wondering why is console.log not included in the list?

"no-console": [true, "debug", "info", "time", "timeEnd", "trace"],

Or even better, why not just

"no-console": true,

I think that if someone needs to leave a console in their code that should be their own custom rule overwrite and not a default.

RxJS 6 imports are causing "This import is blacklisted, import a submodule instead" errors

Details: angular/devkit#585 (comment)

Remove rxjs from import-blacklist

I think rxjs should be removed from import-blacklist, because in order to use RxJS 6 you have to import its components like this:

import { Observable } from 'rxjs'

will you migrate to eslint, since tslint deprecated?

palantir/tslint#4534

Issue running with tslint-angular preset

ng lint , throws below error
/src/tslint.json: Unexpected token in JSON at position 2383 in /Users/mydrive/personal/ngx-web-starter/node_modules/tslint-angular/tslint.json
at new FatalError (/Users/mydrive/personal/ngx-web-starter/node_modules/tslint/lib/

There is a space in the rule "use-pipe-decorator ": true,, causing above issue

lint --fix messes up template

When I run npm run lint -- --fix
This

<h1>
  {{name}}
</h1>

is turned into this:

<h1>
 {{ {nam }}}
</h1>

Here is my repo: https://github.com/dereklin/nx-demo-jest/tree/try-tslint-config
The template is at: https://github.com/dereklin/nx-demo-jest/blob/try-tslint-config/apps/app1/src/app/feature1/feature1.component.html

angular-whitespace is deprecated

i get this warning now (angular 7.2.15)

angular-whitespace is deprecated. Use a formatter like Prettier for formatting purposes

thanks

Extend from tslint/recommended and remove duplicate rules

Would be nice if tslint-angular would extend from tslint:recommended and remove the duplicate rules.

Or.

• Remove the duplicate rules and add it as best practice to the readme?

{
"extends": [
    "tslint:recommended",   // Should be extended before tslint-angular
    "tslint-angular",
     ....
  ]
}

This configurations seem to be very different from angular-cli's tslint configuration.

Angular-CLI tslint.json.template

tslint-angular

These two configurations seem to be very different.

---

Note: there are few more rules added on top of the Angular CLI configuration.

Can you tell me exactly what are the rules added ? This way I can know how to synchronize the angular-cli configuration to this project. Thanks.

Support for Angular 10

Hi,
Currently facing peer dependency facing waring while building the code. Support for angular 10 will be much appreciated

npm WARN [email protected] requires a peer of codelyzer@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of tslint@^5.16.0 but none is installed. You must install peer dependencies yourself.