Differentiate third party import from absolute paths

[urbanbuddha]

Hi team,

Thanks for this helpful plugin.

My request is: Can we have an option, eg. another special key-phrase or plugin property, that would separate third party modules over absolute path imports?

I understand the plugin can support regex imports if a project was setup with path aliases, ie. @ui, @core.
Unfortunately, I have a project created from create-react-app and we have absolute paths enabled on the /src. The files are not grouped in domain/function specific folders. Doing so would be a large refactoring effort.

There is another prettier sort import plugin that distinguishes between npm packages (third party) vs. local imports/types. So I was wondering if we can achieve something similar?

Example

Given

// .prettierrc.js
{
  ...,
  importOrderSeparation: true,
   importTypeOrder: [ 
      "^react(.*)$", 
      "<THIRD_PARTY_MODULES>",
      "<LOCAL_IMPORTS>", // potential new keyword
      "^[./]", // relative imports
  ],
}

// someFile.tsx

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { format } from 'date-fns';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import childModule from './childModule';
import { analytics } from 'analytics'; // absolute path to local module 
import { someFn } from 'utils';  // absolute path to local module 

Actual

// someFile.tsx - after plugin is formatted
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import childModule from './childModule';
import { analytics } from 'analytics'; // absolute path to local module 
import { format } from 'date-fns';
import { someFn } from 'utils';  // absolute path to local module 

Expected

// someFile.tsx - after plugin is formatted
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import { format } from 'date-fns';

import { analytics } from 'analytics'; // absolute path to local module 
import { someFn } from 'utils';  // absolute path to local module 

import childModule from './childModule';

Thanks for your time

[prakashmallow]

I'm also facing the same

Please give a solution for this.

[anicioalexandre]

I think would be a cool feature if we could have something like <LOCAL_IMPORTS>. Meanwhile, I guess a fair enough solution could be just adding your absolute imports manually

// .prettierrc.js
{
  ...,
  importOrderSeparation: true,
   importTypeOrder: [ 
      "^react(.*)$", 
      "<THIRD_PARTY_MODULES>",
      "^(hooks/|constants/|types/|styles/)", // matches "hooks/", "constants/", "types/", "styles/"
      "^[./]", // relative imports
  ],
}

[prakashmallow]

@anicioalexandre I'm working on a large application. How to mention absolute imports manually?

[anicioalexandre]

if you know what the folders are, I don't think it's gonna be too much hassle to add them to your config. Even for larger projects, should be almost an one-time effort if you don't change much the folders organization