ESLint 기본 내보내기 Import/prefer-default-export 선호

ESLint 기본 내보내기 Import/prefer-default-export 선호

안녕하세요, 저는 리액트 프로젝트에서 이 eslint 오류를 없애려고 노력하고 있습니다.

Prefer default export import/prefer-default-export

Helpers.js 오류는 다음을 나타냅니다.

export function getItems() {
  fetch('./data/data_arr.js')
  .then(results => results.json())
  .then(results => this.setState({ items: results }));
}

함수 가져오기:

import { getItems } from '../helpers/helpers';

componentDidMount() {
    getItems.call(this);
}

난 노력했지만 소용없었다.

"rules": {
     "import/prefer-default-export": off,
     ...
}

기능에 "기본값"을 추가해야 합니까? export default function getItems() {...}

감사해요.

"rules": {
     "import/prefer-default-export": "off",
     ...
}

그 말off인용해야 합니다.

이 경고를 해제하려면 주석을 추가합니다.

/* eslint-disable import/prefer-default-export */

getItems를 내보내는 파일의 맨 위로 이동합니다.

주의: ESLint는 스타일 경고입니다.코드에 "잘못된" 것은 없습니다.앞으로 같은 파일에서 더 많은 함수를 내보낼 예정이라면 더욱 그렇습니다.

배경

유용하게 쓰일 경우, 여기 이 두 가지 차이점이 있습니다.export default그리고.export:

사용.export default

이 예에서는 파일이myFile.js1비트의 코드만 내보냅니다.myFunction.

// myFile.js

function myFunction() {
    // do something
}

export default myFunction;

import 할 때, import 할 때export default뭐라고 부르든 상관없습니다이렇게 같은 이름을 붙일 수 있습니다.

// someOtherFile.js

import myFunction from './myFile';

// ... now you can use myFunction by calling myFunction()

...아니면 다른 이름으로 불러도 좋다.

// someOtherFile.js

import someDifferentName from './myFile';

// ... now you can use myFunction by calling someDifferentName()

각 파일에는 "기본" 내보내기가 하나만 있을 수 있습니다.자주 사용하는 것이 가장 좋습니다.export default파일에서 코드 1비트만 내보내는 경우.그것이 나무 셰이킹을 돕는 것에 대한 약간의 논란이 있지만, 이것은 정말 문제가 되지 않을 것이다.실제로는 코드를 다른 파일로 가져올 때 더 좋은 구문일 뿐입니다.

사용.export저절로

파일에서 여러 비트의 코드를 내보내는 경우(또는 앞으로 내보낼 계획)에는export스스로요.가져올 때 동일한 이름을 사용해야 하므로 "이름 내보내기"라고도 합니다.예를 들어 다음과 같습니다.

// myFile.js

function myFunction() {
    // do something
}

const someVariable = "Hello World"

export { 
    myFunction, 
    someVariable,
    // plus as many others as you like
    };

이제 이름 있는 내보내기를 가져올 때 동일한 이름과 파기 구문을 사용해야 합니다.

// someOtherFile.js

import { myFunction } from './myFile';

// ... now you can use myFunction by calling myFunction()

여러 항목을 가져올 수 있습니다.

// someOtherFile.js

import { myFunction, someVariable } from './myFile';

// ... now you can use myFunction by calling myFunction()
// ... now you can use someVariable as someVariable

가져올 때 다른 이름을 사용해야 할 수 있습니다.이 문제는 이름이 같은 (2개의 다른 파일에서)2개의 이름 있는 내보내기가 있는 경우에 발생할 수 있습니다.이 경우 이름 있는 내보내기에 에일리어스를 사용할 수 있습니다.

// someOtherFile.js

import { myFunction as someDifferentName } from './myFile';

// ... now you can use myFunction by calling someDifferentName()

"rules": {
     "import/prefer-default-export": 0,
     ...
}

Import/syslog-default-export 문제에 0을 사용합니다.

언급URL : https://stackoverflow.com/questions/52627477/eslint-prefer-default-export-import-prefer-default-export