eslint-plugin-import-helpers

ESLint Rules to Aid with Imports

Usage no npm install needed!

<script type="module">
  import eslintPluginImportHelpers from 'https://cdn.skypack.dev/eslint-plugin-import-helpers';
</script>

README

eslint-plugin-import-helpers

Originally forked/inspired by eslint-plugin-import and this fork

npm version

This package was created to supplement the rules provided by eslint-plugin-import. There are a lot of great rules in there, but we found it missing a few key use cases.

Rules

order-imports

Enforce a configurable convention in module import order. See the order-imports page for configuration details.

// Given ESLint Config
rules: {
  'import-helpers/order-imports': [
      'warn',
      {
          newlinesBetween: 'always', // new line between groups
          groups: [
              'module',
              '/^@shared/',
              ['parent', 'sibling', 'index'],
          ],
          alphabetize: { order: 'asc', ignoreCase: true },
      },
  ],
}

// will fix
import SiblingComponent from './SiblingComponent';
import lodash from 'lodash';
import SharedComponent from '@shared/components/SharedComponent';
import React from 'react';

// into
import lodash from 'lodash';
import React from 'react';

import SharedComponent from '@shared/components/SharedComponent';

import SiblingComponent from './SiblingComponent';

Installation

npm install eslint-plugin-import-helpers -g

or if you manage ESLint as a dev dependency:

# inside your project's working tree
npm install eslint-plugin-import-helpers --save-dev

To add a rule, update your .eslintrc.(yml|json|js):

{
    // .eslintrc.js
    plugins: ['eslint-plugin-import-helpers'],
    rules: {
        'import-helpers/order-imports': [
            'warn',
            { // example configuration
                newlinesBetween: 'always',
                groups: [
                    'module',
                    '/^@shared/',
                    ['parent', 'sibling', 'index'],
                ],
                alphabetize: { order: 'asc', ignoreCase: true },
            },
        ],
    }
}

TypeScript

To use this plugin with TypeScript, you must use the TypeScript parser for ESLint. See @typescript-eslint/parser for more details.

Working with This Repo

Dependencies

Name Version
node.js 10.x
yarn 1.x

Gulp v3 is the thing keeping us at node.js v10

Running Tests

First, yarn install Then, yarn test