Import order

is there a vscode extension or prettier/eslint setting to do this?

// packages first
import a from 'a'
import c from 'c'
import b from 'b' // should error

// packages types
import type { a } from 'a'
import type { d } from 'd'
import type { c } from 'c' // should error

// local files
import { localFile } from '../thing';

// local file types
import { LocalFileSchema } from '../thing';

// packages first
import a from 'a'
import c from 'c'
import b from 'b' // should error

// packages types
import type { a } from 'a'
import type { d } from 'd'
import type { c } from 'c' // should error

// local files
import { localFile } from '../thing';

// local file types
import { LocalFileSchema } from '../thing';

and whenever you do a document format it'll order things

10 Replies

Pod•17mo ago

https://marketplace.visualstudio.com/items?itemName=amatiasq.sort-imports

sort-imports - Visual Studio Marketplace

Extension for Visual Studio Code - Sort ES6 imports automatically.

Matvey•17mo ago

https://www.npmjs.com/package/@trivago/prettier-plugin-sort-imports

npm

@trivago/prettier-plugin-sort-imports

A prettier plugins to sort imports in provided RegEx order. Latest version: 4.0.0, last published: 2 months ago. Start using @trivago/prettier-plugin-sort-imports in your project by running npm i @trivago/prettier-plugin-sort-imports. There are 50 other projects in the npm registry using @trivago/prettier-plugin-sort-imports.

NekoChan•17mo ago

https://www.npmjs.com/package/eslint-plugin-simple-import-sort

npm

eslint-plugin-simple-import-sort

Easy autofixable import sorting. Latest version: 10.0.0, last published: 8 days ago. Start using eslint-plugin-simple-import-sort in your project by running npm i eslint-plugin-simple-import-sort. There are 815 other projects in the npm registry using eslint-plugin-simple-import-sort.

Unknown User•17mo ago

Message Not Public

dingo•17mo ago

Yeah, I can see how that can be an issue, if VS Code would do auto importing all the time it wouldn't be so big of a problem lol

Unknown User•17mo ago

Message Not Public

michaelschufi•17mo ago

I can also recommend this package. You can even create custom groups to adjust what comes first and what later 😍 https://github.com/lydell/eslint-plugin-simple-import-sort/#custom-grouping

GitHub

GitHub - lydell/eslint-plugin-simple-import-sort: Easy autofixable ...

Easy autofixable import sorting. Contribute to lydell/eslint-plugin-simple-import-sort development by creating an account on GitHub.

Unknown User•17mo ago

Message Not Public

robotkutya•17mo ago

https://eslint.org/docs/latest/rules/sort-imports

sort-imports - ESLint - Pluggable JavaScript Linter

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

robotkutya•17mo ago

'sort-imports': [
      'error',
      {
        ignoreCase: false,
        ignoreDeclarationSort: false,
        ignoreMemberSort: false,
        memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
        allowSeparatedGroups: true,
      },
    ],

'sort-imports': [
      'error',
      {
        ignoreCase: false,
        ignoreDeclarationSort: false,
        ignoreMemberSort: false,
        memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
        allowSeparatedGroups: true,
      },
    ],

I use these settings it was pretty hard core at first, but I absolutely love the alphabetical order... would never go back, honestly it's like with books, you buy a bunch of them, and first you organize them according to topic, etc... but then comes the point (for me it was ~3000 copies) when I just went fuck it, and rearranged everything in ruthless alphabetical order it's reallly nice in the context of big, enterprise code

Gaming

Programming

Import order