format-imports-vscode

KO | EN

gitlite — search

#python #react #typescript #go #android #machine-learning #docker #nodejs #java #windows #cli #awesome-list #ios #open-source

format-imports-vscode

(★ 64)

Format imports and exports for JavaScript and TypeScript in VS Code.

format-imports-vscode Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# JS/TS Import/Export Sorter

[![Version](https://img.shields.io/vscode-marketplace/v/dozerg.tsimportsorter.svg)](https://marketplace.visualstudio.com/items?itemName=dozerg.tsimportsorter)
[![Installs](https://img.shields.io/visual-studio-marketplace/i/dozerg.tsimportsorter)](https://marketplace.visualstudio.com/items?itemName=dozerg.tsimportsorter)
[![Ratings](https://img.shields.io/vscode-marketplace/r/dozerg.tsimportsorter.svg)](https://marketplace.visualstudio.com/items?itemName=dozerg.tsimportsorter)
[![Build Status](https://github.com/daidodo/format-imports-vscode/actions/workflows/node.js.yml/badge.svg)](https://github.com/daidodo/format-imports-vscode/actions)

Automatically format **imports** and **exports** for **JavaScript** and **TypeScript** in VSCode.

- [Install VS Code Extension](https://marketplace.visualstudio.com/items?itemName=dozerg.tsimportsorter)
- [Open Issues](https://github.com/daidodo/format-imports-vscode/issues)

## [7.6.x]

### Added

- Support [Vue.js](https://vuejs.org).
- Support [use server](https://nextjs.org/blog/next-13-4#server-actions-alpha) / [cache](https://nextjs.org/docs/app/api-reference/directives/use-cache)
- Support URL as module identifier.
- Support [Import Attributes](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-3.html#import-attributes).

# Table of contents

- [Features](#features)
- [How to use](#how-to-use)
- [Configuration](#configuration)
  - [VSCode Settings](#vscode-settings)
  - [Config Files](#config-files)
- [ESLint Compatibility](#eslint-compatibility)
- [Monorepo Support](#monorepo-support)
- [Vue.js Support](#vuejs-support)
- [Contribution](#contribution)
- [Thanks](#thanks)
- [License](#license)

# Features

- Auto format imports and exports on save or [code actions](https://code.visualstudio.com/docs/languages/javascript#_code-actions-on-save), or manually from command, shortcut or context menu.
- Group and sort imports by [configurable rules](https://github.com/daidodo/format-imports/blob/main/README.md#grouping-rules), including [sort by paths or names](https://github.com/daidodo/format-imports/blob/main/docs/interfaces/Configuration.md#sortimportsby).
- Remove duplicated and unused names with [exceptions](https://github.com/daidodo/format-imports/blob/main/README.md#keeping-unused-imports).
- [Ignore files or declarations](https://github.com/daidodo/format-imports/blob/main/README.md#ignoring-files-or-declarations) by config or inline comments.
- Respect [ESLint](https://eslint.org) and [eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import) rules.
- Respect configs from [Prettier](https://prettier.io), [EditorConfig](https://editorconfig.org) and VS Code editor settings.
- Preserve `'use strict/client/server'`, `///` directives, shebang (`#!`) and comments.
- Support [Type-Only imports/exports](https://devblogs.microsoft.com/typescript/announcing-typescript-3-8/#type-only-imports-exports), [Type Modifier on names](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#type-on-import-names), [Import Attributes](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-3.html#import-attributes) and [satisfies](https://devblogs.microsoft.com/typescript/announcing-typescript-4-9/#satisfies) operator.
- Support multi-root projects.
- Support [Vue.js](https://vuejs.org).

# How to use

- Auto format on save when `autoFormat` is set to `onSave` (this is the default).
- Auto format via [Code Actions on Save](https://code.visualstudio.com/docs/languages/javascript#_code-actions-on-save) (VSCode 1.44+)

```js
  "editor.codeActionsOnSave": ["source.organizeImports.sortImports"]
  ```

```js
  "editor.codeActionsOnSave": {"source.organizeImports.sortImports": true}
  ```

- Press shortcut keys, default to `Alt+Shift+S`.
- Use `Sort Imports/Exports` command in the Command Palette (`Ctrl+Shift+P`).

- Right click on editor content and select `Sort Imports/Exports`.

# Configuration

The extension reads configurations from the following sources (in precedence from high to low):

- [ESLint configuration](https://eslint.org/docs/user-guide/configuring) if installed.
- `"importSorter"` section in `package.json`
- `import-sorter.json` (File name is configurable)
- [Prettier configuration](https://github.com/prettier/prettier-vscode#configuration) if installed
- `.editorconfig`
- VS Code `"editor"` and `"files"` settings
- VS Code `"tsImportSorter"` settings

## VSCode Settings

The following settings (and default values) are available in VSCode User Settings for this extension:

```js
// Configuration file name.
// Not available in 'import-sorter.json' or 'package.json'.
"tsImportSorter.configuration.configurationFileName": "import-sorter.json",

// When to auto format imports/exports. Valid values are 'off' or 'onSave'.
"tsImportSorter.configuration.autoFormat": "onSave",

// Whether to format exports as well.
"tsImportSorter.configuration.formatExports": true,

// Disable formatting for files matching regular expressions.
"tsImportSorter.configuration.exclude": ["node_modules"],

// Disable formatting for files matching glob patterns.
"tsImportSorter.configuration.excludeGlob": [],

// Sort import declarations by paths or first names. Valid values are 'paths' or 'names'.
"tsImportSorter.sortImportsBy": "paths",

// Grouping rules for path patterns for imports. {} is the fall-back group.
// Wiki: https://github.com/daidodo/format-imports/wiki/Grouping-Rules
"tsImportSorter.configuration.groupRules": [
  "^react(-dom)?$",
  "^@angular/",
  "^vue$",
  "^node:",
  {},
  "^[@]",
  "^[.]"
],

// Global Sorting rules. Valid values are 'none' or an object.
// Wiki: https://github.com/daidodo/format-imports/wiki/Sorting-Rules
"tsImportSorter.configuration.sortRules": {

// Sorting rule for import paths. Valid values are 'none' or an array.
  "paths": ["_", "aA"],

// Sorting rule for imported/exported names. Valid values are 'none' or an array.
  "names": ["_", "aA"]
}

// By default all unused imports are removed. Keep some or all them around with this
// setting via a list of regular expressions if you need.
// e.g. In order to keep all unused imports, use [".*"]
"tsImportSorter.configuration.keepUnused": [],

// Line wrapping style. Valid values are 'prettier' or an object.
// Wiki: https://github.com/daidodo/format-imports/wiki/Line-Wrapping-Style
"tsImportSorter.configuration.wrappingStyle": {

// Max binding names per line before wrapping for imports. 0 for no limit.
  "maxBindingNamesPerLine": 1,

// Max default and binding names per line before wrapping for imports. 0 for no limit.
  "maxDefaultAndBindingNamesPerLine": 2,

// Max binding names per line before wrapping for exports. 0 for no limit.
  "maxExportNamesPerLine": 0,

// Max names on wrapped lines. 0 for no limit.
  "maxNamesPerWrappedLine": 1,

// Whether to ignore trailing comments when counting line length.
  "ignoreComments": false
}

// Number of empty lines between groups (NOT sub-groups).
"tsImportSorter.configuration.emptyLinesBetweenGroups": 1,

// Number of empty lines after the last import declaration.
"tsImportSorter.configuration.emptyLinesAfterAllImports": 1,

// Whether to remove the last slash when normalizing paths.
"tsImportSorter.configuration.removeLastSlashInPath": false,

// Whether to remove the last 'index' when normalizing paths.
"tsImportSorter.configuration.removeLastIndexInPath": false,

// Whether to enable debug mode and write detailed logs to VSCode output channel.
// Not available in 'import-sorter.json' or 'package.json'.
"tsImportSorter.configuration.development.enableDebug": false,
```

## Config Files

Most of the above settings, plus more in [Configuration](https://github.com/daidodo/format-imports/blob/main/docs/interfaces/Configuration.md) are also available in `import-sorter.json` or `package.json` under `"importSorter` section.

For examples:

_import-sorter.json:_

```json
{
  "autoFormat": "onSave",
  "quoteMark": "single",
  "wrappingStyle": {
    "maxBindingNamesPerLine": 2
  }
}
```

_package.json:_

```json
{
  "importSorter": {
    "autoFormat": "onSave",
    "quoteMark": "single",
    "wrappingStyle": {
      "maxBindingNamesPerLine": 2
    }
  }
}
```

# ESLint Compatibility

If installed, [ESLint](https://eslint.org) and plugins rules will be detected and consulted, so that the result code will comply to the lint rules.

For how it works, please check the [ESLint Compatibility](https://github.com/daidodo/format-imports/wiki/ESLint-Compatibility) wiki.

# Monorepo Support

When reading config from `import-sorter.json` or `package.json`, the extention will automatically look for them in the directory of the file to be formatted, and in successive parent directories all the way up to the root directory of the filesystem (unless `"root": true` is specified).

Multiple `import-sorter.json` or `package.json` files can be useful when you want different configurations for different sub projects of your monorepo, while common settings are kept in the root `import-sorter.json` or `package.json`. When there is a conflict, the sub project (more localized) config will take precedence.

# Vue.js Support

From v7.2.0, the extension supports formatting `<script>` in _.vue_ files. But removing unused imports is disabled due to [an issue](https://github.com/daidodo/format-imports/issues/20). You'll need to remove them manually.

# Contribution

This is an open source project so your contribution will be well appreciated.

Please refer to [CONTRIBUTING.md](CONTRIBUTING.md) for more information.

# Thanks

The inspiration came from [import-sorter](https://github.com/SoominHan/import-sorter).

# License

format-imports-vscode

format-imports-vscode Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

format-imports-vscode

format-imports-vscode Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README