DEV Community

Damir Drempetić for Bornfight

Posted on

Easily sort imports and remove unused declarations on each save in VS Code

All this time I was using VSCode formatting on save which triggers the selected default formatter (Prettier).

Also I was organizing and sorting my imports manually all the time. Or in other words, I didn’t. So foolish…

Because it couldn’t be more simpler to enable it without installation of any additional ESLint or Prettier plugins. Of course, I’m assuming you already have ESLint and Prettier VS Code extensions because they are a must have for any JavaScript project.

Just add the following to your VS Code settings.json:

 ...
 "editor.formatOnSave": true,
 "editor.codeActionsOnSave": {
   "source.fixAll": true,
   "source.organizeImports": true,
   "source.sortMembers": true
 }
Enter fullscreen mode Exit fullscreen mode

fixAll is not necessary for this case but could be useful too.

fixAll property turns on Auto Fix for all providers including ESLint, according to VS Code Docs, Release Notes November 2019 (version 1.41)

🚀 Voilà, while having all these enabled in your settings, VS Code will automatically on each file save:

  • run code formatting with default formatter
  • sort imports
  • remove all unused declarations
  • run ESLint auto fix

It's always nice when you don't need to take care of these things manually, right? 😎 🤖

Top comments (9)

Collapse
 
joeduncko profile image
Joe Duncko

So I think this post is wrong in a bunch of ways. First, organizeImports seems to also run sortMembers. Second, none of these settings have anything to do with prettier or eslint. Also, ESLint's import sorting disagrees with VSCode's, so if you do turn that on you're going to have problems.

Collapse
 
laxedo17 profile image
laxcivo

thx for the tip! Still, when I do that my code doesnt format on Auto Save. I gotta save manually for it to work, sigh. Any ideas? I program on C# and F#

Collapse
 
ddrempe profile image
Damir Drempetić

Hi @laxedo17! I'm glad if post was useful to you. Did it work on manual save with C# and F#?

Which preference do you use for Auto Save (afterDelay, onFocusChange, onWindowChange)?

I don't use Auto Save because I like to have full control, but tested it now and it didn't work only when I choose afterDelay.

Please check this issue on GitHub: Allow autoSave and formatOnSave. There is whole discussion about it and a possible workaround which could work for you.

Let me know whether it works. :)

Collapse
 
laxedo17 profile image
laxcivo

okayyyy. Final test made, and I chose to use onFocusChange instead of afterDelay.

The issue is that when formatting in real time, you can go crazy and delete, move, switch to certain expressions 'cos the autoformat in real time moves your cursor or displaces words to tidy everything up.

cheers m8

Thread Thread
 
ddrempe profile image
Damir Drempetić

Cool, I'm glad you quickly found a solution for your way of working. :)

Collapse
 
laxedo17 profile image
laxcivo

tested already. Works like a charm! Only thing I'd need is to configure it for all files (.cs .fs), and I found this easy way following the post you linked to! (changed the .cs or .fs whatever, to simply a .* )

"runOnSave.commands": [
    {
        "match": ".*",
        "command": "editor.action.formatDocument",
        "runIn": "vscode"
    }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
laxedo17 profile image
laxcivo

thanks!!!! I use afterDelay, also no change with others. Gotta test the workaround. Many many thanks

Thread Thread
 
fatihapaydin profile image
Fatih Apaydın

In order to remove C# usings from vs code solution you can follow github.com/OmniSharp/omnisharp-vsc... link also

Collapse
 
atsed27 profile image
Daniel N.

{
"editor.formatOnPaste": true,
"source.organizeImports": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.format": true,
"source.fixAll": true,
"source.organizeImports": "explicit"
}
}

I use above config in settings.json for Next Js but it is not work
can you help me?