DEV Community

Shane Mitchell
Shane Mitchell

Posted on • Originally published at 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 (2)

derzyklop profile image

@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",.

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?

Visualizing Promises and Async/Await 🤓

async await

☝️ Check out this all-time classic DEV post on visualizing Promises and Async/Await 🤓