如何更改eslint设置以了解绝对导入？

Question

我使用create-react-app,我想使用绝对导入./src.

正如丹·阿布拉莫夫推荐我加入.env与NODE_PATH=src和它的作品.

但我的eslint不明白该模块已经存在.我得到的错误import/no-unresolved和import/extensions

这是我的eslint-config:

module.exports = {
parser: 'babel-eslint',
extends: 'airbnb',
rules: {
    'react/no-did-mount-set-state': 'off',
    'import/no-extraneous-dependencies': 'off',
    'no-use-before-define': 'off',
    'arrow-body-style': 'off',
    // uncommit on developing
    'no-console': 'off',
    'no-debugger': 'off',
  },
  globals: {
    browser: true,
    fetch: true,
    serviceworker: true,
    describe: true,
    it: true,
    expect: true,
    document: true,
  },

};

当然,如果vscode会通过'src'为我做出建议,那将会很好.

Answer 1

您需要使用eslint-plugin-import:https://github.com/benmosher/eslint-plugin-import

并在中配置您的eslint设置 .eslintrc

module.exports = {
  ...   
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    },
  },
}

然后,您可以使用从src文件夹导入.

例如,如果有src/components/MyComponent.jsx,你会写这个:

import MyComponent from 'components/MyComponent.jsx';

Answer 2

有点晚了，但上述答案并没有为我解决问题。经过一番研究，我发现这篇文章对我有用。

安装 eslint-plugin-import

npm i -D eslint-plugin-import

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

eslintrc.json

{
  "extends": ["react-app", "plugin:import/errors", "plugin:import/warnings"],
  "settings": {
    "import/resolver": {
      "node": {
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  }
}

Answer 3

您正在扩展爱彼迎的 eslint 配置，其中包括eslint-plugin-import，默认情况下启用以下规则：no-absolute-path。

请参阅： https: //github.com/benmosher/eslint-plugin-import/blob/HEAD/docs/rules/no-absolute-path.md

除此之外，您可能需要调整更多规则。