DEV Community

Shane Mitchell
Shane Mitchell

Posted on • Originally published at blog.shanemitchell.dev on

How to: Enable automatic import sorting in VS Code

Sorted ES6 imports

There’s a VS Code setting that enables automatic organizing of imports on file saves.

It primarily does two things:

  • sorts imports based on ESLint settings
  • removes any unused imports

Aside from being a timesaver, this also avoids linting errors (which is especially useful in CI/CD codebases where linting errors will stop a job from completing).

What’s great is you can set it in your user or project settings and forget about it, and it’s only a couple lines.



// settings.json

{
  // put this in your settings object
  "editor.codeActionsOnSave": {
    "source.organizeImports": true,
  },
}


Enter fullscreen mode Exit fullscreen mode

And that’s it! Now when you save, your imports magically sort themselves out!

Imports automatically organizing themselves

Top comments (9)

Collapse
 
jordanbtucker profile image
Jordan Tucker • Edited

Organize Imports is not the same thing as Sort Imports. Organize Imports will remove unused imports, which sounds handy, however it's quite annoying if you add an import and save before using it.

Fortunately, "source.sortImports" works just like "source.organizeImports" without removing the imports you haven't used yet.

Collapse
 
onikd08 profile image
onikd08

"source.organizeImports": true was giving a type error in my editor. It had to be a string rather than boolean. I put the string value "always" instead boolean value "true" and it fixed the problem.

Collapse
 
szpaklabs profile image
MainFish

just restart VS Code

Collapse
 
meles_zawude profile image
Meles Zawude

This is perfectly working

Collapse
 
derzyklop profile image
DerZyklop

@nikkizol not sure about how vscode does it, but if you let eslint do the job (via eslint-plugin-imports) instead of vscode, then you can achieve this with the setting option "newlines-between": "never",.

Collapse
 
nikkizol profile image
Mykyta Zholkovskyi

Hi, I have source.organizeImports but it doesn't remove blank lines between import declarations, it there any rule for this one?

Collapse
 
pefington profile image
Pierre-François Salmand • Edited

Hi, with the package eslint-plugin-simple-import-sort as well as eslint-plugin-import this works:

// in settings.json

 "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
Enter fullscreen mode Exit fullscreen mode
// in .eslintrc

"plugins": ["simple-import-sort", "import"],
  "rules": {
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
    "import/first": "error",
    "import/newline-after-import": "error",
    "import/no-duplicates": "error",
  }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
maxim_onishchenko_158bb1c profile image
maxim onishchenko

Wreally importante publicante !

Collapse
 
maxim_onishchenko_158bb1c profile image
maxim onishchenko

Что же ты делаешь с моими настройками пользователя, старый повеса.....