TSLINT: Remove Missing Whitespace rule on Import

Question

TSLint requires an import like this...

import { RouterModule } from "@angular/router";

However, my IDE imports everything like this...

import {RouterModule} from "@angular/router";

Now I am sure I can configure the IDE to change this but it would seem to be easier just to turn off this rule. However, I am new to linting and I am not sure where to find the right rule to disable. I still want some enforcement of whitespace (properties etc) but just not this one.

What is the proper setting to turn off just this rule?

Answer 1

There is not a rule targeting the specific case you describe, but there is a more general rule: Whitespace

And in the case you are using IntelliJ or Webstorm the editor settings can be changed at: Settings -> Editor -> Code Style -> JavaScript -> Spaces -> Within ES6 Import/export braces

Answer 2

To deactivate a rule, you need to modify your tslint.json.

You have to remove check-module from the array in the whitespace property.

See the documentation:

"check-module" checks for whitespace in import & export statements.

So at the end you should have something like that:

tslint.json (other rules not appearing)

{
 "rules": {
   "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type",
      "check-typecast"
    ]
}

Answer 3

I have

"whitespace": [
  true,
  "check-branch",
  "check-decl",
  "check-operator",
  "check-separator",
  "check-type",
  "check-typecast"
],
"import-destructuring-spacing": true,
"import-spacing": true

and in IJ/WebStorm, enable it in Prefs > Editor > Code Style > TypeScript > Spaces > Within > ES6 import/export braces

Answer 4

I Started this before the previous responses. The first one is great for IJ but that wasn't really the question I asked. The other one Is correct and what I came to as well...

"whitespace": [
  true,
  "check-branch",
  "check-decl",
  "check-operator",
  "check-separator",
  "check-type"
]

As long as you leave out "check-module" you shouldn't get those messages.

But there is also another little nuance if you are using Angular. Angular declares this rule as well. So even if you disable this in TS lint the Angular Style guide will cause an error as well if you are using Codealyzer. Again the first response of changing IJ is still valid (Although my mind is blown IJ doesn't have proper defaults for TS). In that case you will need to make sure to include...

"import-destructuring-spacing": false,