Treat @/path imports as absolute

Problem

In a project created with vue-cli, local components are sorted above global packages:

import Error from "@/components/error.vue"
import { Component, Vue } from "vue-property-decorator"

which is counter-intuitive, and may possibly suffer from missing side-effects coming from global imports.

The @ alias comes from here: https://github.com/vuejs/vue-cli/blob/486a921e9fc782fe4a9b9dd1bdf82066b1522782/packages/%40vue/cli-service/lib/config/base.js#L49

I understand that the sort plugin treats this as a normal package import, and character code of @ (64) is smaller than of any letter—I agree that the current behaviour is correct as per documentation.

However, using @ is a wide spread use case (at least in Vue world) for referring to local modules, so this problem might have a solution provided by simple-import-sort without needing to update all imports.

Proposal

I think the simplest solution would be to allow to customize prefixes for “absolute imports” group. As I understand, currently an import is considered absolute if and only if it starts with /. What if user could add more prefixes? Something like { absolutePrefixes: ['/', '@/'] }.

Current workaround

For now I’ve changed @/absolute/import to ~/absolute/import (~ sorts after all alphanumeric characters so these imports come directly after all package imports). Granted, it even makes more sense, as ~ means home in Unix (and also ~ is a suggested default in e.g. babel-plugin-root-import).

However, it’s breaking wide spread Vue conventions, so a solution in the sorter allowing to use the default alias @/ would be appreciated.

Also, logically even ~/package is an absolute import and belong to ‘absolute imports’ group, not a global package with weird name which just coincidentally happens to be sorted alphabetically after all other packages. This will also be useful for putting line breaks between groups.

[IlyaSemenov]

@zbeyens it’s more complicated than you perhaps thought. Currently, the plugin operates on the source code (AST tree as passed by ESLint) consistently and idempotently. Given the same set of imports, they will be sorted identically every time (and on any computer). In your scenario however, the order of imports will start depending on the content of ./src folder.

That means the plugin will need to implement some non-obvious realtime module lookup. Consider your example:

import config from "config"

How would the plugin know if config is a “global” npm package or “absolute” package (in your terms) residing in ./src? For example, let’s say there’s a file ./src/config/index.tsx. Does it constitute the “absolute” package? In plain node, no. In Typescript, that will depend on tsconfig options. Things will get even more complicated when using Webpack with resolve.extensions, directory-named-webpack-plugin, etc.

---

Also, I think you’re misusing your ./src folder. Let me elaborate. ./src is where you’d better put packages that you (in your code) treat as independent globals.

For example, let’s say you develop a React project and you came up with (imaginary) module react-currency-filter. You didn’t have time to publish it as an npm package but nevertheless you designed it to work independently (no coupling with the main project). Then you put it to ./src/react-currency-filter and import with:

import ReactCurrencyFilter from "react-currency-filter"

This naturally goes to “globals” group of imports, it’s no different from other similar packages such as react-format-time coming from npm. When you find time and actually publish react-currency-filter to npm, your imports will not change.

Your main project however better goes under ./src/acme/*. Config goes to ./src/acme/config, which is then either aliased as ~/config or imported as acme/config (with baseUrl). In first scenario, it will be sorted to “absolute imports” group automatically. Second scenario is more java-style (compare com.acme.config), it goes to “globals” but there your project imports stay together anyway as they are grouped alphabetically.

[zbeyens]

Thanks. As a workaround I was using:

  'import/order': [
      'error',
      {
        groups: [
          'builtin',
          'external',
          'internal',
          'parent',
          'sibling',
          'index',
        ],
      },
    ],

But I had to save (eslint --fix) from once to multiple times to sort all my imports.

Now with this plugin, one fix is enough 🎉