import/order

import/order:moduleのimport 順番で規則を適用する。

require()/import 文の順番で規則を適用する。

--fixを用いてこのルールに従って報告された問題は自動的に修正される。

順番は以下の通りに示しております。

// 1. node "builtin" modules
import fs from 'fs';
import path from 'path';
// 2. "external" modules
import _ from 'lodash';
import chalk from 'chalk';
// 3. "internal" modules
// (if you have configured your path or webpack to handle your internal paths differently)
import foo from 'src/foo';
// 4. modules from a "parent" directory
import foo from '../foo';
import qux from '../../foo/qux';
// 5. "sibling" modules from the same or a sibling's directory
import bar from './bar';
import baz from './bar/baz';
// 6. "index" of the current directory
import main from './';
// 7. "object"-imports (only available in TypeScript)
import log = console.log;

指定されていないimportsは無視されるのでimportした順番は需要です。

分はes6のimport シンタックスを用いてrequireの前に書かなければならない。

Fail

import _ from 'lodash';
import path from 'path'; // `path` import should occur before import of `lodash`

// -----

var _ = require('lodash');
var path = require('path'); // `path` import should occur before import of `lodash`

// -----

var path = require('path');
import foo from './foo'; // `import` statements must be before `require` statement

Pass

import path from 'path';
import _ from 'lodash';

// -----

var path = require('path');
var _ = require('lodash');

// -----

// Allowed as ̀`babel-register` is not assigned.
require('babel-register');
var path = require('path');

// -----

// Allowed as `import` must be before `require`
import foo from './foo';
var path = require('path');

Options

This rule supports the following options:

このルールは以下の通りのオプションをサポートしております。

`groups: [array]`:

How groups are defined, and the order to respect. groups must be an array of string or [string]. The only allowed strings are: "builtin", "external", "internal", "unknown", "parent", "sibling", "index", "object". The enforced order is the same as the order of each element in a group. Omitted types are implicitly grouped together as the last element. Example:

グループの定義方法と尊重する順序.groupsはstringの配列でなければならない。以下のstringが有効である。"builtin", "external", "internal", "unknown", "parent", "sibling", "index", "object".

施行される順番はグループの各要素の順番と同じである。

[
  'builtin', // Built-in types は最初
  ['sibling', 'parent'], // Then sibling and parent types.次に兄弟タイプと親タイプ 。それらは一緒に混ぜることができます。
  'index', // 次にindexファイル
  'object',

　　最後に:internalとexternlのタイプ
]

The default value is ["builtin", "external", "parent", "sibling", "index"].

デフォルトのvalueは["builtin", "external", "parent", "sibling", "index"].である。

You can set the options like this:

あなたはこのようにセットすることもできる

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

`pathGroups:`

To be able to group by paths mostly needed with aliases pathGroups can be defined.

Properties of the objects

エイリアスで最も必要とされているパスでグループ化できるようにするためには、pathGroupesを定義できます。

property	required	type	description
pattern	x	string	パスのためにミニマッチパターンはこのグループになる。(builtinsやexternalsでは使われない)
patternOptions		object	ミニマッチのためのオプション default: { nocomment: true }
group	x	string	認可されたグループのひとつ。パスグループはこのグループと相対的にポジショニングされる
position		string	パスグループのポジションををグループとして定義する場所で"after"か"before"を用いる。もしpathGroupがグループのようにポジションされていなかったら無効化される。

{
  "import/order": ["error", {
    "pathGroups": [
      {
        "pattern": "~/**",
        "group": "external"
      }
    ]
  }]
}

`pathGroupsExcludedImportTypes:`

This defines import types that are not handled by configured pathGroups. This is mostly needed when you want to handle path groups that look like external imports.

設定したパスグループにハンドルしないimport typeを定義する。

これはexternal importのようなパスグループを扱うときに必要になってくる。

Example:

{
  "import/order": ["error", {
    "pathGroups": [
      {
        "pattern": "@app/**",
        "group": "external",
        "position": "after"
      }
    ],
    "pathGroupsExcludedImportTypes": ["builtin"]
  }]
}

The default value is ["builtin", "external"].

`newlines-between`

import間の新しいlineを施行または排除

もしignoreならimport group間のlineエラーは表示しない
もしalwaysならimport間の新しいlineを作る。そしてグループ間の新しいlineは禁止される。多くのimport間のlineを防ぐためにno-multiple-empty-linesが用いられる
もしalways-and-inside-groupsをセットしたらimportグループ内のk許可された新しいlinesをのぞく.
もしneverをセットしたなら、import セクションにいかなるlineも作れない。

デフォルトは以下の通りである。

/* eslint import/order: ["error", {"newlines-between": "always"}] */
import fs from 'fs';
import path from 'path';
import index from './';
import sibling from './foo';

/* eslint import/order: ["error", {"newlines-between": "always-and-inside-groups"}] */
import fs from 'fs';

import path from 'path';
import index from './';
import sibling from './foo';

/* eslint import/order: ["error", {"newlines-between": "never"}] */
import fs from 'fs';
import path from 'path';

import index from './';

import sibling from './foo';

while those will be valid:

/* eslint import/order: ["error", {"newlines-between": "always"}] */
import fs from 'fs';
import path from 'path';

import index from './';

import sibling from './foo';

/* eslint import/order: ["error", {"newlines-between": "always-and-inside-groups"}] */
import fs from 'fs';

import path from 'path';

import index from './';

import sibling from './foo';

/* eslint import/order: ["error", {"newlines-between": "never"}] */
import fs from 'fs';
import path from 'path';
import index from './';
import sibling from './foo';

アルファベット順にする。

import パスのアルファベット順に基づいて順番にする。

order:ascを使うことのよって上から順番をアルファベット順にすることができる。
caseInsensitive: use true to ignore case, and false to consider case (default: false).
caseInsensitive:trueににすることにcaseを無視する。falseによってcasewを考慮する。

Example setting:

alphabetize: {
  order: 'asc', /* sort in ascending order. Options: ['ignore', 'asc', 'desc'] */
  caseInsensitive: true /* ignore case. Options: [true, false] */
}

This will fail the rule check:

/* eslint import/order: ["error", {"alphabetize": {"order": "asc", "caseInsensitive": true}}] */
import React, { PureComponent } from 'react';
import aTypes from 'prop-types';
import { compose, apply } from 'xcompose';
import * as classnames from 'classnames';
import blist from 'BList';

While this will pass:

/* eslint import/order: ["error", {"alphabetize": {"order": "asc", "caseInsensitive": true}}] */
import blist from 'BList';
import * as classnames from 'classnames';
import aTypes from 'prop-types';
import React, { PureComponent } from 'react';
import { compose, apply } from 'xcompose';

import/external-module-folders setting
import/internal-regex setting

import/orderを使うことによってimportの順番を整えることができる。

絶対パスの指定につまづいてしまったが、パスグループの指定でその都度パスグループの指定をしなければいけなかった模様。

例えばimport {yourname} /component/yournameのように絶対パス指定のimport先も対応させるためには

 {
pattern: '/**',
group: 'internal',
position: 'after',
 },

このように/の中身を全て取得してinternalグループとして扱って順序は一番最後にするといった内容にしなければいけなかった。

kaikai221のブログ

kaikaiについてのブログです

eslint-plugin-import について

import/order

Fail

Pass

Options

`groups: [array]`:

`pathGroups:`

`pathGroupsExcludedImportTypes:`

`newlines-between`

Related

import/order

Fail

Pass

Options

groups: [array]:

pathGroups:

pathGroupsExcludedImportTypes:

newlines-between

Related

まとめ

`groups: [array]`:

`pathGroups:`

`pathGroupsExcludedImportTypes:`

`newlines-between`