<div id="readability-page-1" class="page"><article id="mainContent">
                <div>
                  <p><a href="/m/category/WEB2.0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D"><span>WEB2.0/프로그래밍</span></a></p><h3>import 순서를 지정하는 eslint-import-plugin</h3>
                </div>
                <p><cite>나를찾는아이</cite>
                  <span> 2022. 11. 2. 11:30</span>
                </p>
                
            
                <div>
                                <p data-ke-size="size16">하나의 파일이 많은 package들을 import하다보면 import된 시간순서에 따라 뒤죽박죽으로 선언됩니다</p>

<p data-ke-size="size16">민감하신분들은 상단의 import 구문들이 모여있는 곳을 깨끗이 순서대로 정리를 하는 사람도 있을테고</p>

<p data-ke-size="size16">그냥 무시하고 넘어가는 분들도 있을거예요</p>

<p data-ke-size="size16">import 가 모여있는 곳을 깨끗이 정리하고 싶으시다면</p>

<p data-ke-size="size16">import 선언의 패키지들의 순서를 지정하는 <a href="https://www.npmjs.com/package/eslint-plugin-import" target="_blank" rel="noopener">eslint-import-plugin</a> 이 있습니다</p>

<p data-ke-size="size16">typescript에서 사용하고 싶으시면 <a href="https://www.npmjs.com/package/eslint-import-resolver-typescript" target="_blank" rel="noopener">eslint-import-resolver-typescript</a> 를 사용하시면 됩니다</p>


<p data-ke-size="size16">.eslintrc.js(json, js, yml) 를 아래의 설정을 참고하여 선언해주시면 됩니다</p>

<p data-ke-size="size16">import 되는 순서를 Path의 pattern을 통해 상세하게 그룹화할수도 있고</p>

<p data-ke-size="size16">알파벳 순이라던가, 그룹별 한줄띄기라던가 다양한 설정을 사용하실수 있습니다</p>

<pre id="code_1667210496674" data-ke-language="javascript" data-ke-type="codeblock"><code>module.exports = {
  plugins: ['import'],
  rules: {
    // turn on errors for missing imports
    'import/no-unresolved': 'error',
    'import/order': [
      'warn',
      {
        groups: ['builtin', 'external', 'internal'],
      },
    ],
  },
  settings: {
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'],
    },
    'import/resolver': {
      typescript: {},
    },
  },
};</code></pre>



            
            
                </div>
            

                
              </article></div>

나를 찾는 아이

Kyoung min, Kim

하나의 파일이 많은 package들을 import하다보면 import된 시간순서에 따라 뒤죽박죽으로 선언됩니다
 
민감하신분들은 상단의 import 구문들이 모여있는 곳을 깨끗이 순서대로 정리를 하는 사람도 있을테고
 
그냥 무시하고 넘어가는 분들도 있을거예요
 
import 가 모여있는 곳을 깨끗이 정리하고 싶으시다면
 
import 선언의 패키지들의 순서를 지정하는 eslint-import-plugin 이 있습니다
 
typescript에서 사용하고 싶으시면 eslint-import-resolver-typescript 를 사용하시면 됩니다
 
 
.eslintrc.js(json, js, yml) 를 아래의 설정을 참고하여 선언해주시면 됩니다
 
import 되는 순서를 Path의 pattern을 통해 상세하게 그룹화할수도 있고
 
알파벳 순이라던가, 그룹별 한줄띄기라던가 다양한 설정을 사용하실수 있습니다
 
module.exports = {
  plugins: ['import'],
  rules: {
    // turn on errors for missing imports
    'import/no-unresolved': 'error',
    'import/order': [
      'warn',
      {
        groups: ['builtin', 'external', 'internal'],
      },
    ],
  },
  settings: {
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'],
    },
    'import/resolver': {
      typescript: {},
    },
  },
};

import 순서를 지정하는 eslint-import-plugin

댓글