prettier-plugin-organize-imports

Prettier Plugin: Organize Imports

Make sure that your import statements stay consistent no matter who writes them and what their preferences are.

A plugin that makes Prettier organize your imports (i. e. sort and remove unused imports) using the organizeImports feature of the TypeScript language service API. This is the same as using the "Organize Imports" action in VS Code.

Installation

npm install --save-dev prettier-plugin-organize-imports

prettier and typescript are peer dependencies, so make sure you have those installed in your project.

Usage

The plugin will be loaded by Prettier automatically. No configuration needed.

Files containing the substring // organize-imports-ignore or // tslint:disable:ordered-imports are skipped.

Vue.js

TL;DR: Make sure that you have either @vue/compiler-sfc (for Vue 3.x) or both @vue/component-compiler-utils and vue-template-compiler (for Vue 2.x) installed.

npm i --save-dev @vue/compiler-sfc

or

npm i --save-dev @vue/component-compiler-utils vue-template-compiler

The vue parser of Prettier splits the SFC (single file component) into its blocks and then runs each block through their respective "child" parser, i. e. typescript for a <script lang="ts"> block. This plugin would then preprocess the script content to organize the imports. However Prettier has a bug with the preprocess hook when called in a child parser, which causes broken code around comments and other things. Therefore some work was necessary to do the import organizing on the parent parser level already; this requires some manual parsing using the aforementioned packages. Hopefully Prettier will fix this bug soon so that this whole readme section and the extra code can be deleted and it just works™️ again 🤓

Debug Logs

If something doesn't work, you can try to append your command with DEBUG=true which will enable this plugin to print some logs.

Changelog

Version 2.3.1 adds debug logs and fixes Vue.js support.

Version 2.2.0 adds a compiler options cache to improve performance.

Version 2.1.0 adds support for Vue.js (.vue files).

Version 2.0.0 adds support for the parsers babel (i. e. JavaScript) and babel-ts which are only available since Prettier v2 (and thus the peer dependency has received a major bump).

Rationale

This plugin acts outside of Prettier's scope because "Prettier only prints code. It does not transform it.", and technically sorting is a code transformation because it changes the AST (this plugin even removes code, i. e. unused imports). In my opinion however, the import statements are not really part of the code, they are merely directives that instruct the module system where to find the code (only true as long as your imports are side-effects free regarding the global scope, i. e. import order doesn't matter), comparable with using directives in C# or #include preprocessing directives in C. Therefore the practical benefits outweigh sticking with the philosophy in this case.

License

MIT.

Similar packages

Other packages similar to prettier-plugin-organize-imports

eslint-plugin-import

eslint-plugin-import is an ESLint plugin that provides a set of rules for managing and organizing import statements. It can enforce consistent import order, prevent duplicate imports, and remove unused imports. Unlike prettier-plugin-organize-imports, it is more configurable and integrates with ESLint for a broader range of linting capabilities.

import-sort

import-sort is a tool that sorts import statements in JavaScript and TypeScript files. It is highly configurable and can be integrated with various editors and build tools. Compared to prettier-plugin-organize-imports, import-sort offers more customization options for sorting and grouping imports.