Search code examples
angularformatwebstorm

I don't want WebStorm to remove the spaces between "import { Injectable } ..."


When I press Ctrl + Alt + L which reformats the code, it converts import { Injectable } to import {Injectable}. I don't like that. How can I fix it?

import { Injectable } from '@angular/core';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
import { Subscription } from 'rxjs';

import { Logger } from '../core';
import enUS from '../../translations/en-US.json';
import bgBG from '../../translations/bg-BG.json';

const log = new Logger('I18nService');
const languageKey = 'language';

@Injectable({
  providedIn: 'root'
})
export class I18nService {

tslint.json

Not sure if it has to be made through WebStorm or the tslint config, so I'm pasting tslint config here, just in case.

{
  "extends": "tslint:recommended",
  "rules": {
    "align": {
      "options": [
        "parameters",
        "statements"
      ]
    },
    "array-type": false,
    "arrow-parens": false,
    "arrow-return-shorthand": true,
    "curly": true,
    "deprecation": {
      "severity": "warning"
    },
    "component-class-suffix": true,
    "contextual-lifecycle": true,
    "directive-class-suffix": true,
    "directive-selector": [
      true,
      "attribute",
      "vex",
      "camelCase"
    ],
    "component-selector": [
      true,
      "element",
      "vex",
      "kebab-case"
    ],
    "eofline": true,
    "import-blacklist": [
      true,
      "rxjs/Rx"
    ],
    "import-spacing": true,
    "indent": {
      "options": [
        "spaces"
      ]
    },
    "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"
    ],
    "semicolon": {
      "options": [
        "always"
      ]
    },
    "space-before-function-paren": {
      "options": {
        "anonymous": "never",
        "asyncArrow": "always",
        "constructor": "never",
        "method": "never",
        "named": "never"
      }
    },
    "trailing-comma": false,
    "no-conflicting-lifecycle": true,
    "no-host-metadata-property": false,
    "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,
    "typedef-whitespace": {
      "options": [
        {
          "call-signature": "nospace",
          "index-signature": "nospace",
          "parameter": "nospace",
          "property-declaration": "nospace",
          "variable-declaration": "nospace"
        },
        {
          "call-signature": "onespace",
          "index-signature": "onespace",
          "parameter": "onespace",
          "property-declaration": "onespace",
          "variable-declaration": "onespace"
        }
      ]
    },
    "use-lifecycle-interface": true,
    "use-pipe-transform-interface": true,
    "variable-name": {
      "options": [
        "allow-pascal-case",
        "allow-leading-underscore"
      ]
    },
    "whitespace": {
      "options": [
        "check-branch",
        "check-decl",
        "check-operator",
        "check-separator",
        "check-type",
        "check-typecast"
      ]
    }
  },
  "rulesDirectory": [
    "codelyzer"
  ]
}


Solution

  • I can't be sure because I don't have the Webstorm editor but found this link

    Add Spaces Between Import and Braces in Webstorm Settings:

    1. Open Settings: File > Default Settings
    2. Expand Editor Menu on Left
    3. Expand Code Style Menu under Editor Menu
    4. Click JavaScript or TypeScript if you are using TypeScript
    5. Click on the Spaces Tab in the right content area
    6. Scroll Down to Within Settings
    7. Select ES6 import/export braces
    8. Click Apply and Ok to close