eslint-plugin-simple-import-sort 적용하기

import 문 자동 정렬하기

개인 프로젝트를 하면서 import문들이 중구난방으로 있는 것을 자주 볼 수 있었다. 무언가 기준을 잡고 정렬하면 좋을텐데..라는 마음만 가지고 정렬해보았지만, 계속 생겨나는 import문때문에 다시 지저분해지기일수였다!!

그런 나에게 자동으로 정렬을 해주는 플러그인을 발견했다!

https://github.com/lydell/eslint-plugin-simple-import-sort

import한 Package를 알파벳 순서대로 정렬하고, 절대경로로 import 된 그룹과 상대경로로 import 된 그룹을 자동으로 분리시켜 준다고 한다.

before

import React from "react";
import Button from "../Button";

import styles from "./styles.css";
import type { User } from "../../types";
import { getUser } from "../../api";

import PropTypes from "prop-types";
import classnames from "classnames";
import { truncate, formatNumber } from "../../utils";

after

import classnames from "classnames";
import PropTypes from "prop-types";
import React from "react";

import { getUser } from "../../api";
import type { User } from "../../types";
import { formatNumber, truncate } from "../../utils";
import Button from "../Button";
import styles from "./styles.css";

적용하는법

1. 플러그인을 설치해준다.

npm install --save-dev eslint-plugin-simple-import-sort

2. package.json 파일에 밑에 코드를 추가해준다.

{
  "plugins": ["simple-import-sort"],
  "rules": {
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error"
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": "latest"
  }
}

eslintConfig가 있는 곳에 밑에와 같이 추가해주면 된다.

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "plugins": [
      "simple-import-sort"
    ],
    "rules": {
      "simple-import-sort/imports": "error",
      "simple-import-sort/exports": "error"
    },
    "parserOptions": {
      "sourceType": "module",
      "ecmaVersion": "latest"
    }
  },

3. 이제 정렬이 되지 않은 import문들에 에러가 뜰 것이다. quick fix를 통해 고칠 수 있지만, 수동으로 바꿔야하기에 번거롭다.
   자동으로 저장하면 eslint가 알아서 바꿔주게 해보자.

   
   

4. setting으로 가서 code actions를 검색한다.
   

5. Edit in settings.json을 누른다.

6. 해당 코드를 추가한다.

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

그럼 이제 자동으로 저장버튼을 누르면 알아서 import문을 정렬해준다!!