"editor.codeActionsOnSave": {
"source.fixAll": "explicit",
// "source.sortImports": "explicit"
},
I have right now the same issue, I've solved it by commenting the source.sortImports property in my VSCode Open User settings file (Command+P -> >Open User Settings)
I beleive it will help you!
Answer from Sergei on Stack OverflowHere's one of the videos I made that helped many people with automatic sorting import statements in VS Code using Prettier. I hope it helps people around here as well.
Do let me know some feedback 🙂
https://youtu.be/QQWgN0_gUxI
Videos
» npm install prettier-plugin-organize-imports
In another project I have taken another look into this matter. The only solution is to turn the VSC organize import feature off and let the formatter/linter do the work. As I dont like my linter on autofix and I generally think its the job of the formatter and everyone should have one heres my solution:
- In a TS project I used prettier-plugin-organize-imports. This prettier plugin mimicks the formatting order of the organize imports feature, so its basically the same. Very nice, except it has a TS peer dependency.
Therefore a second solution for JS projects:
- Use the prettier plugin prettier-plugin-import-sort. This plugin needs you to add an order style of your choice with it. But it supports vanilla JS
As mentioned I have also found rules for eslint with an autofix, but I dont like that solution. The above packages fix the problem if you are using prettier.
You can install a vs-code extension sort-imports to achieve the sorting of imports.
Looking at this GitHub comment, it seems like I should be able to add "editor.codeActionsOnSave": { "source.organizeImports": true } to .vscode/settings.json and have it "just work", but in my testing that doesn't work. How do you handle automatic import sorting for .vue files in Visual Studio Code?