Question

我使用create-react-app，我想使用./src的绝对导入。

作为Dan Abramov recommended我添加了.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

并在.eslintrc

中配置您的eslint设置

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

然后，您可以使用src文件夹中的导入。

例如，如果你有src/components/MyComponent.jsx，你会写下：

import MyComponent from 'components/MyComponent.jsx';

Answer 2

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

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

您可能需要调整更多规则。

Answer 3

已经有点晚了，但是以上答案并没有为我解决问题。经过一番研究，我发现this article使它对我有用。

安装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/"]
      }
    }
  }
}

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

3 个答案: