TSLint - Preventing error: The key is not sorted alphabetically

Question

I'm doing a test app with Ionic2 / Cordova / Typescript / Angular. I'm using tslint 5.6.0.

I'm using the following module: https://www.npmjs.com/package/tslint

Focusing on just one file...

when linting the following file:

import { NgModule, ErrorHandler } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { IonicApp, IonicModule, IonicErrorHandler } from "ionic-angular";
import { MyApp } from "./app.component";

import { AboutPage } from "../pages/about/about";
import { ContactPage } from "../pages/contact/contact";
import { HomePage } from "../pages/home/home";
import { TabsPage } from "../pages/tabs/tabs";

import { StatusBar } from "@ionic-native/status-bar";
import { SplashScreen } from "@ionic-native/splash-screen";

@NgModule( {
    declarations: [
        MyApp,
        AboutPage,
        ContactPage,
        HomePage,
        TabsPage,
    ],
    imports: [
        BrowserModule,
        IonicModule.forRoot( MyApp ),
    ],
    bootstrap: [ IonicApp ],
    entryComponents: [
        MyApp,
        AboutPage,
        ContactPage,
        HomePage,
        TabsPage,
    ],
    providers: [
        StatusBar,
        SplashScreen,
        { provide: ErrorHandler, useClass: IonicErrorHandler },
    ],
})
export class AppModule { }

I get:

The key 'bootstrap' is not sorted alphabetically
RuleFailurePosition { position: 790, lineAndCharacter: { line: 25, character: 4 } }
RuleFailurePosition { position: 799, lineAndCharacter: { line: 25, character: 13 } }

I'm using the following options:

{
    "extends": "tslint:recommended",
    "rules": {
        "no-duplicate-variable": true,
        "max-line-length": {
            "options": [120]
        },
        "ordered-imports": false,
        "new-parens": true,
        "no-arg": true,
        "no-bitwise": true,
        "no-conditional-assignment": true,
        "no-consecutive-blank-lines": false,
        "no-console": {
            "options": [
                "debug",
                "info",
                "log",
                "time",
                "timeEnd",
                "trace"
            ]
        }
    },
    "jsRules": {
        "max-line-length": {
            "options": [120]
        }
    }
}

What option do I need to configure on TSLint to prevent showing up this error?

Athiste

do you want to configure tslint not to show this error? Or how to change your code in order to adhere to the tslint rule? – Formula

I do you want to configure tslint not to show this error – Athiste

Answer 1

The rule failing here seems to be object-literal-sort-keys.

You should be able to disable it in the rules section of your config file by adding:

"object-literal-sort-keys": false

You can find all the tslint rules here.

Formula

Answer 2

For anyone coming here who is doing a migration to TypeScript from javascript, or who simply has a mixed codebase of javascript + typescriptm you may to define this rule inside 'jsRules' as well, i.e. to get rid of this error, when you having console statements defined inside javascript (not typescript files).

//tslint.json

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],  
  "rules": {
    "object-literal-sort-keys": false //Disable for typescript
  },
  "jsRules": {
    "object-literal-sort-keys": false //Disable for javascript
  }
}

Vogele