Conflict of TSLint and VS code Format Document

Question

Can you tell me how to fix this TSLint and VS code Format Document issue? i.e TsLint formatting rule and VS code Document format do 2 things.

Here is the Youtube video about that conflict: https://youtu.be/1MoUX8BdO9E

tslint.json

{
  "extends": "tslint:recommended",
  "rulesDirectory": [
    "codelyzer"
  ],
  "rules": {
    "array-type": false,
    "arrow-parens": false,
    "deprecation": {
      "severity": "warn"
    },
    "import-blacklist": [
      true,
      "rxjs/Rx"
    ],
    "interface-name": false,
    "max-classes-per-file": false,
    "max-line-length": [
      true,
      200
    ],
    "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-use-before-declare": true,
    "no-var-requires": false,
    "object-literal-key-quotes": [
      true,
      "as-needed"
    ],
    "object-literal-sort-keys": false,
    "ordered-imports": false,
    "quotemark": [
      true,
      "single"
    ],
    "trailing-comma": false,
    "no-output-on-prefix": true,
    "no-inputs-metadata-property": true,
    "no-host-metadata-property": true,
    "no-input-rename": true,
    "no-output-rename": true,
    "use-lifecycle-interface": true,
    "use-pipe-transform-interface": true,
    "one-variable-per-declaration": false,
    "component-class-suffix": [
      true,
      "Page",
      "Component"
    ],
    "directive-class-suffix": true,
    "directive-selector": [
      true,
      "attribute",
      "app",
      "camelCase"
    ],
    "component-selector": [
      true,
      "element",
      "app",
      "page",
      "kebab-case"
    ]
  }
}

user_1077309 · Answer

I was able to fix this issue like so: i.e. you can see that new line for all.

constructor(
    private router: Router,
    private modalController: ModalController,
    public detectBackendService: DetectBackendService,
    private formBuilder: FormBuilder,
    public departmentsDataService: DepartmentsDataService,

  ) { }

AppBeacon_75644 · Answer

There are 2 things here:

1) Using tslint is really not recommended anymore. In fact, it's pretty much deprecated and should be replaced by ESLint.

2) I would suggest integrating Prettier instead of using VSCode's default formatter. Prettier can work with ESLint to ensure consistent formatting without conflicting errors.

Conflict of TSLint and VS code Format Document

2 Answers