import order convention

코딩에서 사용되는 컨벤션Convention의 뜻은 '협업을 위한 규칙 or 표준 작성 기준'으로 보면 된다.

react를 사용하다 보면 import를 많이 쓰게 되는데, import 순서에도 컨벤션이 있다고 한다.

1번이 가장 위쪽에 입력되고 8번이 가장 아래쪽에 입력되는 순서이다.

 

 

1. 노드 빌트인 모듈

1. node "builtin" modules

import fs from 'fs';
import path from 'path';

 

2. 외부 모듈

2. "external" modules

import _ from 'lodash';
import chalk from 'chalk';

 

3. 내부 모듈 (내부 경로를 다루기 위해 웹팩이나 경로를 따로 설정한 경우)

3. "internal" modules (if you have configured your path or webpack to handle your internal paths differently)

import foo from 'src/foo';

 

4. 부모 디렉토리의 모듈

4. modules from a "parent" directory

import foo from '../foo';
import qux from '../../foo/qux';

 

5. 같거나 형제 경로에 있는 형제 모듈

5. "sibling" modules from the same or a sibling's directory

import bar from './bar';
import baz from './bar/baz';

 

6. 현재 디렉토리의 index

6. "index" of the current directory

import main from './';

 

 

---

 

 

 

참조 :

https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md

GitHub - import-js/eslint-plugin-import: ESLint plugin with rules that help validate proper imports.