Formatting imports jumps between prettier formatting about format-imports-vscode HOT 17 OPEN

The real fix here would be to remove formatting responsibilities from this extension and have it purely handle sorting.

from format-imports-vscode.

I don't have an answer to that. Someone needs to submit a PR with those changes. There isn't a fix for this currently.

from format-imports-vscode.

Thanks for the feedback!

You can set line wrapping style to be compatible with Prettier. More details: https://github.com/daidodo/format-imports/wiki/Line-Wrapping-Style#prettier-compatibility

Please tell me if you still have questions.

from format-imports-vscode.

I already have this setting enabled: "tsImportSorter.configuration.wrappingStyle": "prettier" and it doesn't seem to fix the problem. Can there be a setting to only sort/organize? Having this extension also handle formatting seems more problematic than it's worth given it can easily conflict with external formatting tools.

from format-imports-vscode.

The correct output should be having those imports split across several lines. If I disable this extension and let prettier handle formatting, the code is formatted properly.

If I disable prettier and let this extension format the code, the output is incorrect with all of the imports on a single line, even with "tsImportSorter.configuration.wrappingStyle": "prettier"

Disabling eslint has no effect on the formatting.

from format-imports-vscode.

I had the "jumping around on every save" issue, and setting "tsImportSorter.configuration.wrappingStyle": "prettier" fixed it for me. Thank you.

from format-imports-vscode.

I had the "jumping around on every save" issue, and setting "tsImportSorter.configuration.wrappingStyle": "prettier" fixed it for me. Thank you.

In the above, I already have this setting and it hasn't fixed the issue.

from format-imports-vscode.

I'm having this issue too and it's very frustrating.

remove formatting responsibilities

@Nxt3 How?

from format-imports-vscode.

Sorry for the late response!

The long-term solution is to migrate the extension to a Prettier plugin. But I don't have time ATM. I'd appreciate if anyone want to help.

Another workaround is to add the following settings with help of this extension:

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": [
    "source.formatDocument",
    "source.organizeImports.sortImports"
  ],

from format-imports-vscode.

Unfortunately that doesn't solve the problem as it just makes TS Importer/Sorter the formatter for imports; if someone else working in your project doesn't have this VS Code extension, their Prettier will undo the formatting changes causing an unnecessary diff.

from format-imports-vscode.

Did you try to swap the code actions so prettier can prevail?

from format-imports-vscode.

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

It still causes the imports to change formatting on every save.

This is referenced in the OP

from format-imports-vscode.

I think I fixed this by adding another prettier call:

    "editor.codeActionsOnSave": [
      "source.addMissingImports",
      "source.organizeImports.sortImports",
      "source.formatDocument",
      "source.formatDocument",
      "source.fixAll.eslint"
    ],

I not longer have the jump in formatting.

from format-imports-vscode.

It's frustrating. Thinking of uninstalling this extension, I'm afraid.

from format-imports-vscode.

I think I came up with a better solution when compared to running formatDocument twice.

Download this extension: stereokai.vscode-run-commands-as-code-actions

It allows us to add delays to code actions run on save so you can "waterfall" the commands.

Add this to your settings.json:

  "run-commands-as-code-actions.jsTsFormatAndLint": [
    {
      "command": "tsImportSorter.command.sortImports",
      "delay": 100
    },
    {
      "command": "prettier.forceFormatDocument",
      "delay": 150
    },
    {
      "command": "eslint.executeAutofix",
      "delay": 200
    },
    {
      "command": "workbench.action.files.saveWithoutFormatting",
      "delay": 250
    }
  ],
    "[typescript]": {
    // here's the magic
    "editor.codeActionsOnSave": ["source.addMissingImports", "source.runCommandsAsCodeActions.jsTsFormatAndLint"],
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": false,
  },

This will add missing imports, then run the actions defined under jsTsFormatAndLint: Sort imports, format using prettier, eslint fix, and then save the file. This has been working great for me for a couple of weeks now.

from format-imports-vscode.

Thanks for sharing, still a problem with the delays of 100, 150 or 200 - how will you know the previous action did really complete before starting the next one? Especially in large code bases.

from format-imports-vscode.

Thanks for sharing, still a problem with the delays of 100, 150 or 200 - how will you know the previous action did really complete before starting the next one? Especially in large code bases.

The extension author could probably answer that better.

from format-imports-vscode.