{"id":15630913,"url":"https://github.com/dmtrkovalenko/eslint-plugin-pretty-imports","last_synced_at":"2025-04-13T08:18:35.069Z","repository":{"id":35422766,"uuid":"178666324","full_name":"dmtrKovalenko/eslint-plugin-pretty-imports","owner":"dmtrKovalenko","description":"Do you hate chaos in javascript imports?  ","archived":false,"fork":false,"pushed_at":"2025-04-11T23:04:53.000Z","size":2274,"stargazers_count":205,"open_issues_count":11,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T08:18:26.025Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dmtrKovalenko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-03-31T09:16:49.000Z","updated_at":"2025-04-06T21:36:16.000Z","dependencies_parsed_at":"2023-02-19T03:46:11.579Z","dependency_job_id":"bfcc404d-4542-460c-9b0a-09717704e3fa","html_url":"https://github.com/dmtrKovalenko/eslint-plugin-pretty-imports","commit_stats":{"total_commits":739,"total_committers":4,"mean_commits":184.75,"dds":"0.27198917456021654","last_synced_commit":"46bfa244b6b09c06eae406fa27911041704ed174"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmtrKovalenko%2Feslint-plugin-pretty-imports","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmtrKovalenko%2Feslint-plugin-pretty-imports/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmtrKovalenko%2Feslint-plugin-pretty-imports/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmtrKovalenko%2Feslint-plugin-pretty-imports/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmtrKovalenko","download_url":"https://codeload.github.com/dmtrKovalenko/eslint-plugin-pretty-imports/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248681522,"owners_count":21144703,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T10:37:25.275Z","updated_at":"2025-04-13T08:18:35.040Z","avatar_url":"https://github.com/dmtrKovalenko.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pretty-imports\n\n\u003e Opinionated Imports Sorter\n\n[![npm package](https://img.shields.io/npm/v/eslint-plugin-pretty-imports.svg)](https://www.npmjs.org/package/eslint-plugin-pretty-imports)\n[![codecov](https://codecov.io/gh/dmtrKovalenko/eslint-plugin-pretty-imports/branch/master/graph/badge.svg)](https://codecov.io/gh/dmtrKovalenko/eslint-plugin-pretty-imports)\n[![CircleCI](https://circleci.com/gh/dmtrKovalenko/eslint-plugin-pretty-imports.svg?style=svg)](https://circleci.com/gh/dmtrKovalenko/eslint-plugin-pretty-imports)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n\nNo more mixes of default and named imports. Automatically prettify and sort your import statements.\n\n\u003e 🌟 Perfectly works in addition to [prettier](https://github.com/prettier/prettier) and [typescript](https://www.typescriptlang.org/).\n\n## 😨 Before\n\n```js\nimport * as React from \"react\";\nimport { runKeyHandler } from \"../../_shared/hooks/useKeyDown\";\nimport * as PropTypes from \"prop-types\";\nimport DayWrapper from \"./DayWrapper\";\nimport CalendarHeader from \"./CalendarHeader\";\nimport { Theme } from \"@material-ui/core\";\n\nimport { IconButtonProps } from \"@material-ui/core/IconButton\";\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\nimport SlideTransition, { SlideDirection } from \"./SlideTransition\";\nimport { withStyles, WithStyles } from \"@material-ui/core/styles\";\nimport { findClosestEnabledDate } from \"../../_helpers/date-utils\";\n// TODO smth\nimport Day from \"./Day\";\nimport { withUtils, WithUtilsProps } from \"../../_shared/WithUtils\";\n```\n\n## 😊 After\n\n```js\nimport * as React from \"react\";\nimport * as PropTypes from \"prop-types\";\n// TODO smth\nimport Day from \"./Day\";\nimport DayWrapper from \"./DayWrapper\";\nimport CalendarHeader from \"./CalendarHeader\";\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\nimport SlideTransition, { SlideDirection } from \"./SlideTransition\";\nimport { Theme } from \"@material-ui/core\";\nimport { runKeyHandler } from \"../../_shared/hooks/useKeyDown\";\nimport { IconButtonProps } from \"@material-ui/core/IconButton\";\nimport { withStyles, WithStyles } from \"@material-ui/core/styles\";\nimport { findClosestEnabledDate } from \"../../_helpers/date-utils\";\nimport { withUtils, WithUtilsProps } from \"../../_shared/WithUtils\";\n```\n\n## 💿 Installation\n\n```\nnpm install eslint-plugin-pretty-imports --save-dev\n\nyarn add --dev eslint-plugin-pretty-imports\n```\n\n**Note:** If you installed ESLint globally (using the `-g` flag) then you must also install `eslint-plugin-pretty-imports` globally.\n\n## 🌚 Usage\n\nAdd `pretty-imports` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:\n\n```json\n{\n  \"plugins\": [\"pretty-imports\"],\n  \"rules\": {\n    \"pretty-imports/sorted\": \"warn\"\n  }\n}\n```\n\n## 🦆 Sorting\n\nA little about the sorting logic. This package takes the import type as a first parameter to sort. We sort import groups in the following order:\n\n1.  `import 'anyfile'`\n2.  `import * as anything from 'anywhere'`\n3.  `import default from 'anywhere'`\n4.  `import { anything } from 'anywhere`\n\nAnd then we are sorting imports **by line length** inside each group. It needs only to improve the visual readability of the imports section. This behavior can be disabled by `\"no-line-length-sort\"` rule option.\n\n## 🔧 Customization\n\nThis plugin provides only 1 rule, that fully takes care of your imports. But you can also customize the behavior thanks to eslint rule options.\n\n```json\n\"rules\": {\n  \"pretty-imports/sorted\": [\"warn\", \"sort-by-specifiers-length\"]\n}\n```\n\nHere is a list of available options\n\n- `sort-by-specifiers-length` – sorts imports not by line length, but firstly by import specifier length\n\n  Example\n\n  ```js\n  import { one } from \"someLongImport.tsx\"; // so this imports comes before\n  import { longSpecifier } from \"b.js\";\n  import { longSpecifier } from \"longImport.js\";\n  ```\n\n- `no-line-length-sort` — disable sorting of same-type imports by line length\n\n  Example\n\n  ```js\n  import * as React from \"react\";\n  // imports of one category won't be sorted inside by line length\n  import { longSpecifier } from \"longImport.js\";\n  import { longSpecifier } from \"b.js\";\n  ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmtrkovalenko%2Feslint-plugin-pretty-imports","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmtrkovalenko%2Feslint-plugin-pretty-imports","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmtrkovalenko%2Feslint-plugin-pretty-imports/lists"}