jackmiwamiwa devblog

フロントエンドをメインに行ったことをまとめていくサイトになります。

eslintを使用してimportの部分をいい感じにする

以下のルール・パッケージを使用するといい感じにimport文の整形を行うことができたので、設定方法などを記載したものになります。

※ 執筆時点(2022/07/18)の情報になるため、ご認識ください。

結論としては以下のルール・パッケージになります。

ルール・パッケージについて

typescript-eslint.io

www.npmjs.com

実行結果

eslint --fixを実行した場合

変更前

import './App.css';
import { TypeHoge } from '~/types/Hoge';
import { useState, FC } from 'react';
import { ComponentHoge } from '~/components/Hoge';

変更後

import './App.css';
import type { FC } from 'react';
import { useState } from 'react';
import { ComponentHoge } from '~/components/Hoge';
import type { TypeHoge } from '~/types/Hoge';

1. consistent-type-imports

typescript-eslint.io

{
  rules: {
    // ここから記載
    "@typescript-eslint/consistent-type-imports": [
      "error",
      {
        prefer: "type-imports"
      }
    ],
    // ここまで記載
  },
}

設定できるプロパティについて

type Options = {
  prefer: 'type-imports' | 'no-type-imports';
  disallowTypeAnnotations: boolean;
};

const defaultOptions: Options = {
  prefer: 'type-imports',
  disallowTypeAnnotations: true,
};

prefer

typescript-eslint.io

importしたtypeに対して、typeを付与するかしないか

type-importsの場合

import type { Foo } from 'Foo';
import type Bar from 'Bar';
type T = Foo;
const x: Bar = 1;

no-type-importsの場合

import { Foo } from 'Foo';
import Bar from 'Bar';
type T = Foo;
const x: Bar = 1;

disallowTypeAnnotations

typescript-eslint.io

trueの場合、以下のコードだとエラーになります。

type T = import('Foo').Foo;
const x: import('Bar') = 1;

2. eslint-plugin-import

eslintのimport文の整形をしてくれるパッケージです。

$yarn add --save-dev eslint-plugin-import

各種ルールについて

全体は省略。

今回設定しているものについては以下になります。(デフォルトのルールではありますが、後々パッケージ側で変更されても問題ないように個別にも記載しています。)

{
  rules: {
    "import/order": [2, { "alphabetize": { "order": "asc" } }]
  },
}

import/order

github.com

今回の場合は以下のようなイメージでの並び替えになります。

  • アルファベット順
  • 昇順

変更前

import React, { PureComponent } from 'react';
import aTypes from 'prop-types';
import { compose, apply } from 'xcompose';
import * as classnames from 'classnames';
import blist from 'BList';

変更後

import blist from 'BList';
import * as classnames from 'classnames';
import aTypes from 'prop-types';
import React, { PureComponent } from 'react';
import { compose, apply } from 'xcompose';

TypeScriptと併用する場合、以下のように設定

www.npmjs.com

$  yarn add --dave-dev @typescript-eslint/parser
{
  extends: [
    // なにかのルール
    "plugin:import/typescript" // 追記
  ],
  plugins: [
    'import', // 追記
  ],
}

React.js + TypeScript環境でnpx eslint --initを実行し、以下の選択肢を選んだ場合 + 上記の設定を行ったものになります。

※ Vue.jsや通常のTypeScriptの場合でも上記と同様の方法で入れることができます。

ESLintの設定

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScript
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · yarn

ESLintのコード

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
    "plugin:import/typescript"
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [
    'react',
    '@typescript-eslint',
    'import',
  ],
  rules: {
    "@typescript-eslint/consistent-type-imports": [
      "error",
      {
        prefer: "type-imports"
      }
    ],
    "import/order": [2, { "alphabetize": { "order": "asc" } }]
  },
};