o-imports- an AI companion for clean code

The Chaos 🚩

Messy imports are a headache for almost all junior devs, who frequently get feedback to clean them up during code reviews. It was about time someone fixed this. Now, just toss your chaotic imports into the engine and watch them get organized. Phew.

The Solution 💡

Introducing o-imports, an AI-powered application that helps you organize your messy import section. Follow the steps below to use it:

• First, you paste your code snippet into the o-imports interface.

• The tool analyzes your code, identifies all import statements, and categorizes them based on their sources: standard libraries, third-party libraries, or local modules.

• Within seconds, o-imports provides you with a neatly organized import section labelled with relevant comments in lowercase.

Quick Demo 📱

For instance

If the code with messy imports below were parsed through o-imports,

   import {{ FunctionComponent, useState }} from 'react';
   import {{ usePathname }} from 'next/navigation';
   import {{ H6 }} from '@library/atoms/typography';
   import DateRangePicker from '@library/molecules/date-range-picker';
   import HighlightsContainer from '@components/highlights-container';
   import HighlightsContainerWithThreadsData from '@components/highlights-container-with-threads-data';
   import {{ getDate, getTodayDate }} from '@library/molecules/date-range-picker/helpers';
   import * as classNames from './styles';
   import HighlightsUI from '@components/highlights-container/highlights-ui';

Then, we get the following output result

   // react
   import {{ FunctionComponent, useState }} from 'react';

   // next
   import {{ usePathname }} from 'next/navigation';

   // library
   import {{ H6 }} from '@library/atoms/typography';
   import DateRangePicker from '@library/molecules/date-range-picker';
   import {{ getDate, getTodayDate }} from '@library/molecules/date-range-picker/helpers';

   // components
   import HighlightsContainer from '@components/highlights-container';
   import HighlightsContainerWithThreadsData from '@components/highlights-container-with-threads-data';
   import HighlightsUI from '@components/highlights-container/highlights-ui';

   // styles
   import * as classNames from './styles';

As you can see, it looks much cleaner! This improves code readability, makes maintenance easier, and boosts productivity.

Try it yourself

Go to this link and give it a try.

#AIForTomorrow