TSLint configuration for Angular 1 project

Question

my team is working on project using Angular 1.5.* + typescript.

Can someone give me advice for best TSLint configuration for such project as mine?

I want now to add TSLint config ( https://github.com/Microsoft/TypeScript/blob/master/tslint.json) from official TS repo and with ESlint rules set. https://github.com/Microsoft/TypeScript/blob/master/tslint.json

Will it be enough? What do you think?

Thank you in advance for your answers.

Answer 1

Will it be enough? What do you think?

Personally I don't switch it on till it becomes a problem. Fortunately I have the luxury of having my team mates respect and love so they know I mean well.

You can pick that one or just go with :

{
  "extends": "tslint:recommended"
}

To use palantir defaults: https://github.com/palantir/tslint/#configuration

Answer 2

I'm in a similar situation. I used tslint-microsoft-contrib as a baseline.

  "extends": "tslint-microsoft-contrib",

It definitely helps in all the ways you'd expect. However, some rules need to be reconfigured or turned off for AngularJs TypeScript code. I made the following configuration changes to function-name, member-ordering, no-import-side-effect, and no-unsafe-any:

"function-name": [
  true,
  {
    // allow public methods to start with $ for $onChanges
    // and other Angular lifecycle hooks
    "method-regex": "^[a-z$][\\w\\d]+$", 

    // otherwise unchanged
    "private-method-regex": "^[a-z][\\w\\d]+$",
    "protected-method-regex": "^[a-z][\\w\\d]+$",
    "static-method-regex": "^[A-Z_\\d]+$",
    "function-regex": "^[a-z][\\w\\d]+$"
  }
],

// Variant ordering that places public statics before constructor
// So we can place AngularJs $inject just before the constructor
"member-ordering": [
  true,
  {
    "order": [
      "public-instance-field",
      "protected-instance-field",
      "private-instance-field",
      "public-static-field",
      "protected-static-field",
      "private-static-field",
      "constructor",
      "public-static-method",
      "protected-static-method",
      "private-static-method",
      "public-instance-method",
      "protected-instance-method",
      "private-instance-method"
    ]
  }
],

// angular.module(...).component(...) is a side-effect
"no-import-side-effect": false,

// ng.IController, among others in @types/angular, uses "any"
// and is flagged by this rule
"no-unsafe-any": false,

Depending on how you define AngularJs components, you may not need to set no-import-side-effect to false. I've not seen any consensus on the best way to define AngularJs components in TypeScript, which is a shame given that this is listed as step 1 for migrating from AngularJs to Angular 2+.

Sadly, this is missing out on the possibility of custom tslint rules for AngularJs to match best practices. I'm toying with the idea of running eslint-plugin-angular on the generated code, or converting those rules to TypeScript. But the better solution may be to migrate to Angular 2+ and use codelyzer.