Is it possible to remove unused imports with Prettier?

Question

I have an Expo React Native app that has a ton of unused imports in components.

I have Prettier setup for code formatting, is it possible to configure Prettier to also remove any unused imports across the project?

I can't see anything in the docs and I don't know if there is a way to add extra eslint plugins to Prettier.

Apodal

Does this answer your question? Is there a way to remove unused imports and declarations from Angular 2+? – Shellfish

@abolfazlshamsollahi No it doesn't because I don't use VSCode – Apodal

Answer 1

I don't think this is supported by default.

But you can use this prettier-plugin https://www.npmjs.com/package/prettier-plugin-organize-imports

Steffen

Great tip! Very simple to install and no configuration needed. Thanks! – Adalai

Answer 2

You can use VS Code .vscode/settings.json to organize imports.

"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
  "source.organizeImports": true
}

Justification

2024 UPDATE: As per VS Code, "source.organizeImports": true changed to "source.organizeImports": "explicit" and instead of false now it's never. check the link for more details. – Kopaz

Answer 3

 "editor.codeActionsOnSave": {
    "source.organizeImports": "always",
    "source.fixAll": "explicit"
  },

You need to add these lines in your settings.json

Robyn

Answer 4

Building off what @QuickSort mentioned above, this is what we did using the Prettier sdk:

prettier.format(text, {
    plugins: ['prettier-plugin-organize-imports']
  })

Hangman

Answer 5

works with yarn

As @QuickSort mentioned, you can use prettier-plugin-organize-imports. Install plugin, add this to your .prettierrc.cjs file:

module.exports = {
    plugins: [require.resolve('prettier-plugin-organize-imports')]
};

and run prettier.

Transmigrant