Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
prettier-plugin-organize-imports
Advanced tools
Make prettier organize your imports using the TypeScript language service API.
The prettier-plugin-organize-imports npm package is a plugin for Prettier that automatically organizes and sorts your import statements in JavaScript and TypeScript files. It helps maintain a clean and consistent import structure in your codebase.
Sort Imports Alphabetically
This feature sorts the import statements alphabetically by module name, making it easier to find and manage imports.
import { B } from 'moduleB';
import { A } from 'moduleA';
import { C } from 'moduleC';
Group Imports
This feature groups imports from built-in modules, external modules, and local modules separately, improving the readability of the import section.
import fs from 'fs';
import path from 'path';
import { A } from 'moduleA';
import { B } from 'moduleB';
Remove Unused Imports
This feature removes any import statements that are not used in the file, helping to keep the code clean and free of unnecessary dependencies.
import { A } from 'moduleA';
import { B } from 'moduleB';
const a = new A();
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 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.
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. sorts, combines and removes unused ones) using the organizeImports
feature of the TypeScript language service API. This is the same as using the "Organize Imports" action in VS Code.
Features
.js
, .jsx
, .ts
, .tsx
and .vue
files.Caveat
This plugin inherits, extends, and then overrides the built-in Prettier parsers for babel
, babel-ts
, typescript
and vue
. This means that it is incompatible with other plugins that do the same; only the last loaded plugin that exports one of those parsers will function.
npm install --save-dev prettier-plugin-organize-imports
Note that prettier
and typescript
are peer dependencies, so make sure you have those installed in your project.
Automatic plugin discovery has been removed. Thus you need to configure Prettier to use the plugin according to the Plugins docs, for example by adding it to the plugins
config option:
{
"plugins": ["prettier-plugin-organize-imports"]
}
The plugin will be loaded by Prettier automatically. No configuration needed.
Note that automatic plugin discovery is not supported with some package managers, e. g. Yarn PnP (see https://github.com/prettier/prettier/issues/8474). In that case follow the instructions for Prettier 3 above.
Files containing the substring // organize-imports-ignore
or // tslint:disable:ordered-imports
are skipped.
If you don't want destructive code actions (like removing unused imports), you can enable the option organizeImportsSkipDestructiveCodeActions
via your Prettier config.
{
"organizeImportsSkipDestructiveCodeActions": true
}
For compatibility with ESLint or other linters, see "Integrating with Linters" in the Prettier docs. You should have any import order rules/plugins disabled.
Depending on your configuration, if you need the React
import to stay even if it's "unused" (i.e. only needed for the JSX factory), make sure to have the jsx
option set to react
in your tsconfig.json
. For more details click here.
Make sure that you have the optional peer dependency vue-tsc
installed.
npm install --save-dev vue-tsc
If you're using Vue.js with Pug templates, you'll also need to install @vue/language-plugin-pug
as a dev dependency, and configure it in vueCompilerOptions
(see usage).
If something doesn't work, you can try to prefix your prettier
command with DEBUG=true
which will enable this plugin to print some logs.
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.
See changelog.md.
MIT.
FAQs
Make prettier organize your imports using the TypeScript language service API.
The npm package prettier-plugin-organize-imports receives a total of 791,880 weekly downloads. As such, prettier-plugin-organize-imports popularity was classified as popular.
We found that prettier-plugin-organize-imports demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.