ESLint로 가져오기 표준화

이 구성을 추가하면 앞서 말한 규칙에서 정의할 표준을 따르기 때문에 가져오기의 가독성이 크게 향상됩니다. 몇 가지 작은 예를 살펴보겠습니다.

요구 사항

이 문서에서는 프로젝트에 ESLint가 이미 구성되어 있다고 가정합니다. 구성이 없는 경우 여기에 첨부한 공식 문서를 따라야 합니다: ESLint configuring .

또한 npm 또는 yarn으로 다음 라이브러리를 설치해야 합니다.

오후:

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

실:

yarn add -D eslint-plugin-import

규칙없이 수입 🤨

보시다시피, 따르는 순서 및 그룹화는 어떤 기준도 따르지 않으며 더 나쁜 것은 다른 파일에서 다른 기준 또는 반대 기준을 따른다는 것입니다.

import React from 'react'
import AnotherComponent from './AnotherComponent'
import dayjs from 'dayjs';
import styles from './styles.module.scss'
import _ from 'lodash';

ESLint 구출 🛟

ESLint 구성 파일 내에서 다음 규칙을 추가합니다. 이 예에서는 내가 선호하는 구성을 사용합니다. 자세한 정보가 필요하면 여기에 official documentation에 대한 링크를 남겨둘 것입니다.

{
  "import/order": [
    "error",
    {
      "newlines-between": "always",
      "groups": [
        ["builtin"],
        ["external"],
        ["parent", "internal", "sibling", "index", "unknown"]
      ],
      "alphabetize": {
        "order": "asc",
        "caseInsensitive": true
      }
    }
  ]
}

이 규칙으로 인해 발생하는 기존 가져오기의 모든 "오류"를 수정하려면 --fix flag을 사용하여 해당 "오류"의 해결을 자동화하는 것이 좋습니다.

규칙이 있는 수입품 🥰

우리는 모든 것이 훨씬 더 읽기 쉽다는 것을 알 수 있습니다. 간단한 눈으로 우리는 해당 파일에 사용된 외부 및 내부 패키지의 가져오기를 식별할 수 있기 때문입니다. 가장 좋은 점은 이러한 방식으로 모든 가져오기에서 기준을 통합한다는 것입니다. 우리의 응용 프로그램.

import dayjs from "dayjs";
import _ from "lodash";
import React from 'react'

import AnotherComponent from './AnotherComponent'
import styles from './styles.module.scss'

더 복잡한 예를 볼 수 있습니다here.

결론

우리가 본 것처럼 이 규칙을 추가하면 매우 기본적인 구성으로 프로젝트의 모든 가져오기에서 표준을 가질 수 있다는 큰 이점을 얻을 수 있기 때문에 비용 대비 이점이 매우 좋습니다. 작업할 때 정말 유용한 것입니다. 여러 사람과.


읽어주셔서 감사합니다 😊