ESLint support messes with "wrappingStyle: prettier"

[Nxt3]

It would seem that when formatting in VS Code with the newly added ESLint support, it messes with indentation that causes ESLint to error for indentation.

I am using VS Code to perform code actions onSave: ["source.formatDocument", "source.fixAll.tslint"]. I think your extension runs last which causes the problem.

For my use case, it would be awesome if format-imports handled grouping/sorting while tools like prettier and eslint handle formatting the imports how they see fit. Could we maybe have a config for disabling eslint support?

[daidodo]

@Nxt3 Could you share your ESLint config?

I guess you've turned on max-len. If yes, tabWidth will be the tab size and default to 4. The easy fix is to set it to 2 explicitly.

Meanwhile, I'll fix the issue by considering indent as well. Thanks!

[Nxt3]

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/contextual-lifecycle": "warn",
        "@angular-eslint/no-forward-ref": "off",
        "@angular-eslint/no-output-on-prefix": "warn",
        "@angular-eslint/no-output-native": "warn",
        "@angular-eslint/no-host-metadata-property": "warn",
        "@angular-eslint/no-input-rename": "warn",
        "@angular-eslint/no-conflicting-lifecycle": "warn",
        "@typescript-eslint/naming-convention": "warn",
        "@typescript-eslint/no-empty-function": "error",
        "@typescript-eslint/no-inferrable-types": "off",
        "@typescript-eslint/unbound-method": "warn",
        "@typescript-eslint/no-floating-promises": "warn",
        "@typescript-eslint/no-explicit-any": "warn",
        "@typescript-eslint/no-unsafe-member-access": "warn",
        "@typescript-eslint/no-unsafe-assignment": "warn",
        "@typescript-eslint/ban-types": "warn",
        "@typescript-eslint/no-unsafe-call": "warn",
        "@typescript-eslint/no-unsafe-return": "warn",
        "@typescript-eslint/restrict-plus-operands": "warn",
        "@typescript-eslint/prefer-regexp-exec": "warn",
        "@typescript-eslint/restrict-template-expressions": "warn",
        "@typescript-eslint/member-ordering": "warn",
        "@typescript-eslint/await-thenable": "warn",
        "@typescript-eslint/require-await": "warn",
        "@typescript-eslint/no-misused-promises": "warn",
        "@typescript-eslint/no-namespace": "warn",
        "@typescript-eslint/no-var-requires": "warn",
        "@typescript-eslint/adjacent-overload-signatures": "warn",
        "@typescript-eslint/ban-ts-comment": "warn",
        "@typescript-eslint/no-this-alias": "warn",
        "@typescript-eslint/no-unnecessary-type-assertion": "warn",
        "@typescript-eslint/indent": [
          "error",
          2
        ],
        "@typescript-eslint/no-empty-interface": "warn",
        "brace-style": [
          "error",
          "1tbs"
        ],
        "id-blacklist": "off",
        "id-match": "off",
        "max-len": [
          "error",
          {
            "ignorePattern": "^import [^,]+ from |^export | implements | ('|\")(http|https):",
            "code": 140
          }
        ],
        "indent": "off",
        "no-duplicate-imports": "error",
        "no-empty": "error",
        "no-redeclare": "warn",
        "no-underscore-dangle": "off",
        "prefer-const": "warn",
        "no-fallthrough": "warn",
        "no-var": "warn",
        "prefer-rest-params": "warn",
        "no-extra-boolean-cast": "warn",
        "no-prototype-builtins": "warn",
        "no-empty-pattern": "warn",
        "object-curly-spacing": [
          "error",
          "always"
        ],
        "no-unused-vars": [
          "error",
          {
            "argsIgnorePattern": "^_"
          }
        ],
        "getter-return": "warn",
        "no-useless-escape": "warn"
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "parser": "@angular-eslint/template-parser",
      "rules": {
        "@angular-eslint/template/no-negated-async": "warn"
      }
    }
  ]
}

The rules are in a monorepo where I don't have the authority to change the config, sadly. It would really be ideal if format-imports handled sorting/grouping exclusively and let other tools handle the formatting.

[daidodo]

@Nxt3 - Thanks for the info! Apparently the extension is missing @typescript-eslint/indent and indent from ESLint. I'll add support on them in the next release.

Regarding the suppression of formatting, my opinion is it's inevitable. Once the extension needs to modify code, it has to consider formatting, e.g. new lines, spaces, indentation. If you don't want its style, you can always add another formatting step AFTER its running. Maybe https://github.com/daidodo/format-imports-vscode/issues/45 is a good way to make that easy.

[Nxt3]

Oh sweet glad to see you're familiar with that extension; that's actually what I'm doing now and was still getting this issue.

"editor.codeActionsOnSave": [
      "source.addMissingImports", // vscode
      "source.formatDocument", // prettier
      "source.fixAll.eslint" 
]

I think the problem is because I can't register your actions, they run after everything else.

[daidodo]

@Nxt3 - I've released v7.3.1 to support both indent and @typescript-eslint/indent from ESLint, which should fix your problem. Please try it out. Thanks!

[Nxt3]

Looks like that fixed it. Thanks so much :)

[daidodo]

@Nxt3 - FYI I've released v7.3.2 with code action support:

"editor.codeActionsOnSave": ["source.organizeImports.sortImports"],
"tsImportSorter.configuration.autoFormat": "off"

Note: You should turn off autoFormat to avoid formatting twice. Thanks!

[Nxt3]

Aw heck yeah! This is awesome. Thanks so much for implementing :D

[daidodo]

@Nxt3 I've release v7.3.4 which fixes the "formatting twice" issue, so you can enable both autoFormat and editor.codeActionsOnSave now.