daidodo / format-imports-vscode

Format imports and exports for JavaScript and TypeScript in VS Code.
https://marketplace.visualstudio.com/items?itemName=dozerg.tsimportsorter
MIT License
62 stars 5 forks source link

format import flash #87

Closed tjx666 closed 1 year ago

tjx666 commented 1 year ago

https://user-images.githubusercontent.com/41773861/209470032-fe12287a-c9d3-4555-a677-b8e4945055c2.mov

With following user settings:

{
    "editor.codeActionsOnSave": {
        "source.addMissingImports": true,
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true,
        "source.fixAll.markdownlint": true,
        "source.organizeImports.sortImport": true
    },
    "editor.formatOnSave": true,
    "[javascript][javascriptreact][typescript][typescriptreact][vue][json][jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
}

The solution is add following settings:

{
    "tsImportSorter.configuration.autoFormat": "off",
    "tsImportSorter.configuration.wrappingStyle": "prettier",
}

https://user-images.githubusercontent.com/41773861/209470161-74bf3be5-efc0-4ba7-9072-61f17e69d767.mov

That's why my format result is differen't with you in pr: https://github.com/daidodo/format-imports/pull/18

daidodo commented 1 year ago

When you set:

tsImportSorter.configuration.wrappingStyle": "prettier"

The plugin will mimic prettier's result which doesn't wrap unless line limit is met.

So the question is why you have it in vscode user settings?

tjx666 commented 1 year ago

I add that setting because I want to ensure the wrappingStyle using prettier style

tjx666 commented 1 year ago

The key probelem is when I using first setting, will cause code falsh like in video.

Seems to avoid flash, only need add:

{
    "tsImportSorter.configuration.autoFormat": "off",
}
daidodo commented 1 year ago

Now I understand your problem. The "flash" you see is due to twice formations by prettier and this plugin. It's gone when you turn either off.

I understand it's unpleasant but there's not much I can do (or I don't know what to do).

Happy to take advices!

tjx666 commented 1 year ago

For anyone with the same question, my advice is to disable auto format and just using the codeActionOnSave:

{
    "editor.codeActionsOnSave": {
        // others...
        "source.organizeImports.sortImport": true,
        "tsImportSorter.configuration.autoFormat": "off",
    },
}