eslint plugin import

Eslint-Plugin-Import

이 플러그인은 ES2015+ (ES6+) 가져 오기/내보내기 구문의 라인을 지원하고 파일 경로 및 가져 오기 이름의 철회와 관련된 문제를 방지 할 계획입니다. ES2015+ 정적 모듈 구문이 편집자에 표시되는 모든 선함이 제공하려고합니다.

이를 숭고한 상태에서 사용하는 경우 : 중요한 정보는 하단 섹션을 참조하십시오.

규칙

구성이 활성화되었습니다.
켈 구성이 경고로 설정되었습니다.
구성 비활성화.
❗ errors 구성에서 설정합니다.
☑️ recommended 구성에서 설정합니다.
typescript 구성에서 설정합니다.
? warnings 구성에 설정하십시오.
? --fix CLI 옵션으로 자동으로 고정 가능합니다.
편집자 제안에 의해 수동으로 수정 가능합니다.
더 이상 사용되지 않았습니다.

도움이되는 경고

이름	설명		켈		?
내보내다	유효하지 않은 수출, 즉 같은 이름의 재수출을 금지합니다.	❗ ❗ 추
응원 없음	@deprecated Documentation 태그로 표시된 수입 이름을 금지합니다.
비어 있지 않은 블록	비어있는 명명 된 가져 오기 블록을 금지합니다.				?
사기 의존성 없음	외부 패키지 사용을 금지합니다.
무의미한 수출품	var 또는 let .
이름 없음-디폴트	기본 수출의 식별자로 내보내기 이름을 금지합니다.		☑️?
이름 없음-디치 멤버	기본 수출의 속성으로 내보내기 이름을 금지합니다.		☑️?
비공개 모듈	수출없이 모듈을 금지하거나 다른 모듈에서 가져 오기와 일치하지 않고 내보내십시오.

모듈 시스템

이름	설명		켈		?
No-AMD	AMD는 require 금지하고 전화를 define .
무모한	CommonJS는 전화 및 module.exports require exports.*
비 임박한 모듈-수출물	commonjs module.exports를 사용하여 가져 오기 명세서를 금지합니다.				?
no-nodejs- 모듈	node.js 내장 모듈을 금지합니다.
모호하지 않습니다	잠재적으로 모호한 구문 분석 목표 ( script 대 module )를 금지합니다.

정적 분석

이름	설명		켈		?
기본	기본 가져 오기가 주어지면 기본 내보내기가 있는지 확인하십시오.	❗ ❗ 추
시행-노드 프로콜콜 사용	Node.js 내장 모듈을 가져올 때 node: 프로토콜 사용 또는 생략을 시행하십시오.				?
지명	명명 된 가져 오기가 원격 파일의 이름 지정된 내보내기에 해당합니다.	❗ ❗ 추		⌨️
네임 스페이스	가져온 네임 스페이스에 불쾌감을주는 부동산이 포함되어 있는지 확인하십시오.	❗ ❗ 추
무모한 경로	절대 경로를 사용하여 모듈의 가져 오기를 금지합니다.				?
주기 없음	모듈이 종속성 경로가있는 모듈을 가져 오는 것을 금지합니다.
다이나믹 보충 없음	require() 표현식이있는 전화를 금지합니다.
내부 모듈 없음	다른 모듈의 서브 모듈 가져 오기를 금지합니다.
관계가없는 패키지	상대 경로를 통해 패키지 가져 오기를 금지합니다.				?
관계없는 부모님이 포함됩니다	부모 디렉토리에서 모듈 가져 오기를 금지합니다.
제한되지 않은 경로	주어진 폴더에서 가져올 수있는 파일을 시행하십시오.
자부심이 없음	모듈이 가져 오는 것을 금지합니다.
없음 해결되지 않았습니다	가져 오기가 해결 될 수있는 파일/모듈을 가리키는지 확인하십시오.	❗ ❗ 추
무관심하지 않은 경로	수입에서 불필요한 경로 세그먼트를 금지하고 진술이 필요합니다.				?
No-Webpack-Loader-Syntax	가져 오기에 웹 팩 로더 구문을 금지합니다.

스타일 가이드

이름	설명		켈		?
일관된 유형 스피커 스타일	명명 된 수입에 인라인 유형 전용 마커의 사용을 시행하거나 금지합니다.				?
다이나믹 임플란트-청크 이름	동적 가져 오기에 대한 WebPackChunkName과 함께 주요 주석을 시행하십시오.
수출 작용	다른 진술 후에 모든 수출이 나타납니다.
확장	가져 오기 경로 내에서 파일 확장을 일관되게 사용하십시오.
첫 번째	모든 가져 오기가 다른 진술 앞에 나타나는지 확인하십시오.				?
그룹 수출	단일 수출 선언으로 함께 그룹화하는 지명 된 수출을 선호합니다.
수입 우선	import/first 로 대체.				?
최대 의존성	모듈이 가질 수있는 최대 종속성 수를 시행합니다.
Newline-After-Import	수입 명세서 후 Newline을 시행합니다.				?
무인-표피 전출	기본 수출로 익명 값을 금지합니다.
무도회 수출품	기본 수출을 금지합니다.
중독자	여러 곳에서 동일한 모듈의 반복적 인 수입을 금지합니다.		☑️?		?
이름이없는 디틀	기본 수출 이름을 금지합니다.
이름이없는 출입구	지명 된 수출을 금지합니다.
No-Namespace	네임 스페이스 금지 (일명 "와일드 카드" * ) 가져 오기.				?
비 설계된 임박	할당되지 않은 수입을 금지합니다
주문하다	모듈 가져 오기 순서의 협약을 시행합니다.				?
선호-디펜션-수출	모듈이 단일 이름 또는 여러 이름을 내보내는 경우 기본 내보내기를 선호합니다.

eslint-plugin-import for Enterprise

TideLift 구독의 일부로 제공됩니다.

eslint-plugin-import 의 관리자와 수천 개의 다른 패키지는 Tidelift와 협력하여 응용 프로그램을 구축하는 데 사용하는 오픈 소스 의존성에 대한 상업적 지원 및 유지 보수를 제공하고 있습니다. 사용하는 정확한 종속성을 유지 관리자에게 지불하면서 시간을 절약하고 위험을 줄이며 코드 건강을 향상시킵니다. 자세히 알아보십시오.

설치

 # inside your project's working tree
npm install eslint-plugin-import --save-dev

구성 - 레거시 ( .eslintrc )

모든 규칙은 기본적으로 꺼져 있습니다. 그러나 사전 설정 구성 중 하나를 확장하거나 .eslintrc.(yml|json|js) 에서 수동으로 구성 할 수 있습니다.

• 사전 설정 구성 확장 :

 {
  "extends" : [
     "eslint:recommended" ,
     "plugin:import/recommended" ,
  ] ,
}

• 수동으로 구성 :

 {
  "rules" : {
    "import/no-unresolved" : [ "error" , { "commonjs" : true , "amd" : true } ] ,
    "import/named" : "error" ,
    "import/namespace" : "error" ,
    "import/default" : "error" ,
    "import/export" : "error" ,
    // etc...
  } ,
} ,

config -flat ( eslint.config.js )

모든 규칙은 기본적으로 꺼져 있습니다. 그러나 eslint.config.(js|cjs|mjs) 에서 수동으로 구성하거나 사전 설정 구성 중 하나를 확장 할 수 있습니다.

 import importPlugin from 'eslint-plugin-import' ;
import js from '@eslint/js' ;

export default [
  js . configs . recommended ,
  importPlugin . flatConfigs . recommended ,
  {
    files : [ '**/*.{js,mjs,cjs}' ] ,
    languageOptions : {
      ecmaVersion : 'latest' ,
      sourceType : 'module' ,
    } ,
    rules : {
      'no-unused-vars' : 'off' ,
      'import/no-dynamic-require' : 'warn' ,
      'import/no-nodejs-modules' : 'warn' ,
    } ,
  } ,
] ; 

TypeScript

다음 스 니펫을 사용하거나 아래에 설명 된 과립 설정을 사용하여 자신의 구성을 조립할 수 있습니다.

다음 구성에 사용되는 @typescript-eslint/parser 및 eslint-import-resolver-typescript 설치했는지 확인하십시오.

 {
  "extends" : [
    "eslint:recommended" ,
    "plugin:import/recommended" ,
// the following lines do the trick
    "plugin:import/typescript" ,
  ] ,
  "settings" : {
    "import/resolver" : {
      // You will also need to install and configure the TypeScript resolver
      // See also https://github.com/import-js/eslint-import-resolver-typescript#configuration
      "typescript" : true ,
      "node" : true ,
    } ,
  } ,
}

config- typescript-eslint 의 config() 가있는 flat

typescript-eslint 의 config 메소드를 사용하는 경우 flatConfig 가 extends 어레이에 포함되어 있는지 확인하십시오.

 import tseslint from 'typescript-eslint' ;
import importPlugin from 'eslint-plugin-import' ;
import js from '@eslint/js' ;

export default tseslint . config (
  js . configs . recommended ,
  // other configs...
  {
    files : [ '**/*.{ts,tsx}' ] ,
    extends : [ importPlugin . flatConfigs . recommended ] ,
    // other configs...
  }
) ; 

Resolvers

모듈 bundlers와 현재 모듈 및 모듈 구문 사양의 출현으로 import x from 'module' module 뒤에있는 파일을 찾아야 할 곳이 항상 분명하지는 않습니다.

v0.10ish를 통해이 플러그인은 Node의 가져 오기 동작을 구현하는 Substack의 resolve 플러그인을 직접 사용했습니다. 이것은 대부분의 경우 잘 작동합니다.

그러나 WebPack은 로더 ( import 'file!./whatever' ) 및 externals 와 같은 여러 별명 체계와 같이 노드가없는 가져 오기 모듈 소스 문자열의 여러 가지를 허용합니다.

v0.11 은이 두 가지를 모두 지원하기 위해 Resolvers를 소개합니다.

현재 노드 및 웹 팩 해상도가 구현되었지만 Resolvers는 단지 NPM 패키지이므로 타사 패키지가 지원됩니다.

여러 가지 방법으로 리졸버를 참조 할 수 있습니다 (우선 순위) :

• eslint-import-resolver eslint-import-resolver-foo 이름으로 :

 // .eslintrc
{
 "settings" : {
   // uses 'eslint-import-resolver-foo':
   "import/resolver" : "foo" ,
 } ,
} 

 # .eslintrc.yml
settings :
  # uses 'eslint-import-resolver-foo':
  import/resolver : foo 

 // .eslintrc.js
module . exports = {
  settings : {
    'import/resolver' : {
      foo : { someConfig : value }
    }
  }
}

• my-awesome-npm-module 이름으로 :

 // .eslintrc
{
  "settings" : {
    "import/resolver" : "my-awesome-npm-module" ,
  } ,
} 

 # .eslintrc.yml
settings :
  import/resolver : ' my-awesome-npm-module ' 

 // .eslintrc.js
module . exports = {
  settings : {
    'import/resolver' : {
      'my-awesome-npm-module' : { someConfig : value }
    }
  }
}

• 이 예제에서 computed property 이름으로 정의 된 파일 시스템 경로를 사용하여 다음과 같습니다.

 // .eslintrc.js
module . exports = {
  settings : {
    'import/resolver' : {
      [ path . resolve ( '../../../my-resolver' ) ] : { someConfig : value }
    }
  }
}

package.json 없는 경우 소스의 가장 가까운 package.json 또는 프로세스의 현재 작업 디렉토리에 대해 상대 경로가 해결됩니다.

Resolver를 작성하는 것이 흥미롭면 자세한 내용은 사양을 참조하십시오.

설정

.eslintrc 에서 다음 설정을 설정할 수 있습니다.

import/extensions

모듈로 구문 분석하고 export 를 검사하는 파일 확장 목록.

이 기본값은 ['.js'] 로, react 공유 구성을 사용하지 않는 한 ['.js', '.jsx'] 로 지정됩니다. 기본값에도 불구하고 TypeScript를 사용하는 경우 (위에서 설명한 plugin:import/typescript 구성없이) 새 확장자 ( .ts 및 .tsx 를 사용하는 경우)를 지정해야합니다.

 "settings" : {
  "import/extensions" : [
    ".js" ,
    ".jsx"
  ]
}

더 많은 세분화 된 확장 정의가 필요한 경우 다음을 사용할 수 있습니다.

 "settings" : {
  "import/resolver" : {
    "node" : {
      "extensions" : [
        ".js" ,
        ".jsx"
      ]
    }
  }
}

이는 .json , .coffee 등을 포함 할 수있는 import/resolver 확장 설정 설정과는 다르며 (및 아마도 하위 세트의 하위 집합)는 여전히 no-unresolved 규칙에 영향을 줄 수 있습니다.

또한 다음 import/ignore 패턴은이 목록을 지배합니다.

import/ignore

경로와 일치하는 경우 export 가없는 경우 일치 모듈을보고하지 않는 정규식 문자열 목록. 실제로, 이는 no-unresolved 규칙 이이 패턴과 일치하는 (절대 파일 시스템) 경로가있는 import 에 대해보고하지 않는다는 것을 의미합니다.

no-unresolved 자체 ignore 설정이 있습니다.

 {
  "settings" : {
    "import/ignore" : [
      ".coffee$" , // fraught with parse errors
      ".(scss|less|css)$" , // can't parse unprocessed CSS modules, either
    ] ,
  } ,
}

import/core-modules

"코어"모듈로 간주 할 추가 모듈은 해결되어야하지만 파일 시스템의 경로가없는 모듈. Resolver는 이미 이들 중 일부를 정의 할 수 있으므로 (예 : 노드 리졸버는 fs 와 path 에 대해 알고 있음) 재정의 할 필요는 없습니다.

예를 들어, 전자는 electron 모듈을 노출시킵니다.

 import 'electron'  // without extra config, will be flagged as unresolved!

그렇지 않으면 해결되지 않았습니다. 이를 피하기 위해 electron 핵심 모듈로 제공 할 수 있습니다.

 // .eslintrc
{
  "settings" : {
    "import/core-modules" : [ "electron" ] ,
  } ,
}

Electron의 특정 경우에는이를 지정하는 electron 이라는 공유 구성이 있습니다.

다른 플랫폼에 대한 더 많은 공유 구성의 기여를 환영합니다!

import/external-module-folders

폴더 배열. 해당 폴더에서만 해결 된 모듈은 "외부"로 간주됩니다. 기본적으로 - ["node_modules"] . 내부 경로를 다르게 처리하도록 경로 나 웹 팩을 구성하고 일부 폴더 (예 : bower_components 또는 jspm_modules 와 같은 일부 폴더의 모듈을 "외부"로 고려하려는 경우 적합합니다.

이 옵션은 Monorepo 설정에도 유용합니다. 여기에 Monorepo의 패키지가 포함 된 모든 디렉토리는 어떤 디렉토리를 사용하든 외부 디렉토리로 취급됩니다.

yarn PNP를 패키지 관리자로 사용하는 경우 .yarn 폴더를 추가하면 설치된 모든 종속성이 internal 대신 external 로 간주됩니다.

이 배열의 각 항목은 폴더 이름, 하위 경로 또는 절대 접두사 경로입니다.

• jspm_modules jspm_modules 라는 모든 파일 또는 폴더와 일치하거나 jspm_modules 라는 직접 또는 비 지향적 인 부모가있는 폴더, eg /home/me/project/jspm_modules 또는 /home/me/project/jspm_modules/some-pkg/index.js 있습니다.

• packages/core 이 두 세그먼트 (예 : /home/me/project/packages/core/src/utils.js )를 포함하는 모든 경로와 일치합니다.

• /home/me/project/packages 이 디렉토리의 파일과 디렉토리와 디렉토리 자체 만 일치합니다.

불완전한 이름은 여기서 불완전한 이름이 허용되지 않으므로 components bower_components 와 일치하지 않으며 packages/ui packages/ui-utils 와 일치하지 않지만 packages/ui/utils 와 일치합니다).

import/parsers

파서에서 파일 확장 배열까지의 맵. 파일 확장자가 일치하는 경우 종속성 파서는 구성된 ESLINT 파서 대신 맵 키를 구문 분석자로 사용하고 사용합니다. 예를 들어 WebPack을 사용하여 직접 TypeScript를 인터 오르 잉 중에 사용하는 경우 유용합니다.

 // .eslintrc
{
  "settings" : {
    "import/parsers" : {
      "@typescript-eslint/parser" : [ ".ts" , ".tsx" ] ,
    } ,
  } ,
}

이 경우 @typescript-eslint/parser 실행중인 eslint 모듈의 위치 (예 : ESLINT의 피어로 설치)에서 설치하고 요구할 수 있어야합니다.

이것은 현재 @typescript-eslint/parser (및 전임자, typescript-eslint-parser )로 만 테스트되었지만 이론적으로 적당히 부수적 인 파서와 함께 작동해야합니다.

토끼 구멍이 얼마나 멀리 떨어져 있는지에 따라 다양한 플러그인 기능이 얼마나 잘 지원 될지 말하기는 어렵습니다. 여기에 이상한 행동을 발견하면 문제를 제출하지만 wontfix 와의 폐쇄 결과에 대해 마음을 강조하십시오.

import/resolver

Resolvers를 참조하십시오.

import/cache

캐시 동작에 대한 설정. Memoization은 오류를 올바르게보고하는 데 필요한 fs.statSync /Module 구문 분석 호출을 피하기 위해 다양한 수준에서 사용됩니다.

일반 eslint 콘솔 실행의 경우 캐시 수명은 무의미합니다. Linter 프로세스의 수명 동안 파일이 변경되지 않아야한다고 강력히 가정 할 수 있습니다 (따라서 메모리의 캐시).

그러나 eslint_d 또는 eslint-loader 와 같은 오래 지속되는 프로세스의 경우, 튼튼한 개념이 있어야합니다.

eslint_d 또는 eslint-loader 사용하지 않으면 캐시 수명을 Infinity 로 설정할 수 있으며 모든 것이 정상입니다.

 // .eslintrc
{
  "settings" : {
    "import/cache" : {
      "lifetime" : "∞" , // or Infinity, in a JS config
    } ,
  } ,
}

그렇지 않으면 정수를 설정하면 몇 초가 지나면 캐시 항목이 퇴거됩니다.

 // .eslintrc
{
  "settings" : {
    "import/cache" : {
      "lifetime" : 5 , // 30 is the default
    } ,
  } ,
}

import/internal-regex

패키지에 대한 정규식은 내부로 취급되어야합니다. Monorepo 설정을 사용하거나 서로 의존하는 패키지 세트를 개발할 때 유용합니다.

기본적으로, import/external-module-folders 에서 참조 된 모든 패키지는 원사 작업 공간 또는 Lerna 환경과 같은 모노 포로의 패키지를 포함하여 "외부"로 간주됩니다. 이 패키지를 "내부"로 표시하려면 유용합니다.

예를 들어, Monorepo의 패키지가 모두 @scope 에 있으면 import/internal-regex 이와 같이 구성 할 수 있습니다.

 // .eslintrc
{
  "settings" : {
    "import/internal-regex" : "^@scope/" ,
  } ,
}

import/node-version

사용중인 Node.js의 버전을 나타내는 문자열. 허위 가치는 eslint를 실행중인 Node.js의 버전을 암시합니다.

 // .eslintrc
{
  "settings" : {
    "import/node-version" : "22.3.4" ,
  } ,
} 

Sublimelinter-eslint

Sublimelinter-Eslint는 편집 중에 줄무늬가있을 때 파일 경로가 Eslint로 전달되는 방식을 변경 한 .eslintignore 파일을 지원하기위한 변경 사항을 도입했습니다. 이 변경 사항은 파일에 대한 절대 경로 대신 (Eslint가 일반적으로 제공하는 것처럼) 상대 경로를 보냅니다.이 플러그인은 파일 시스템의 종속성을 해결할 수 없습니다.

.eslintignore .gitignore 와 같이 작동하도록 업데이트 될 때 ESLINT 2.0의 --stdin-filename 에서는이 해결 방법이 더 이상 필요하지 않아야합니다.

그 동안 자세한 내용과 토론은 Roadhump/Sublimelinter-Eslint#58을 참조하십시오. 그러나 본질적으로 Sublime 프로젝트 파일에 다음 SublimeLinter 구성을 추가해야 할 수도 있습니다.

{
    "folders" :
    [
        {
            "path" : " code "
        }
    ],
    "SublimeLinter" :
    {
        "linters" :
        {
            "eslint" :
            {
                "chdir" : " ${project}/code "
            }
        }
    }
}

${project}/code folders[0].path 에서 제공된 code 와 일치합니다.

이 경우 chdir 설정의 목적은 ESLINT가 실행되는 작업 디렉토리를 SubleMelinter-Eslint가 제공하는 상대 경로를 기반으로하는 디렉토리와 동일하게 설정하는 것입니다.

자세한 내용은 프로젝트에서 작동하지 않는 경우 chdir 의 Sublimelinter Docs를 참조하십시오.

.eslintignore 사용하지 않거나 숭고한 프로젝트 파일이없는 경우 코드의 일부 조상 디렉토리에서 .sublimelinterrc 파일을 통해 다음을 수행 할 수도 있습니다.

{
  "linters" : {
    "eslint" : {
      "args" : [ " --stdin-filename " , " @ " ]
    }
  }
}

또한 rc_search_limit .sublimelinterrc null 설정해야한다는 것을 알았습니다.

패키지 설정 / Sublimelinter / 사용자 설정 :

{
  "user" : {
    "rc_search_limit" : null
  }
}

이 기본값을 3 으로 믿기 때문에 프로젝트 폴더 Max 깊이에 따라 변경할 필요가 없습니다.