使用ESLint时导入JSX文件时未添加扩展名错误提示

Question

我正在 ES6 中尝试导入 JSX 文件，而无需使用 .jsx 扩展名：

import LoginErrorDialog from './LoginErrorDialogView';

Not:

import LoginErrorDialog from './LoginErrorDialogView.jsx';

虽然我已经成功地使用webpack按照这种方式导入了：

export default {
  entry: './src/ui/js/app.js',
  output: {
    publicPath: '/',
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx'],

Eslint (esw webpack.config.* ./ --color --ext .js --ext .jsx) 仍在报错。

Unable to resolve path to module './LoginView' import/no-unresolved

有什么想法吗？

- gazzwi86

---

我相信这不是 webpack 错误，而是 eslint 告诉您找不到 LoginView 的路径。请参见 https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-unresolved.md。 - redconservatory

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - gazzwi86

所以如果你已经全局安装了eslint，你还必须全局安装eslint-plugin-react才能让jsx:true生效（WTF！？）。如果这是一个个人项目，我建议安装JS Standard。如果这是一个工作项目，我不会使用全局的node模块，而是只在你的项目中本地安装eslint和eslint-plugin-react...如果你正在使用像Sublime或Atom这样的编辑器，你可能需要深入了解本地lint设置... - redconservatory

@redconservatory 很不幸，这是一个工作项目。无论如何，我已经在本地安装了eslint，全局安装似乎也无法解决问题。这真是个大问题！ - gazzwi86

Answer 1

我也遇到了相同的问题，在我的.eslintrc中添加了额外的配置后，问题得以解决。

在extends属性中添加：

"plugin:import/react"

在 settings 属性中添加：

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

你的.eslintrc文件应该长这样:

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

- Carlos

---

我在导入根目录下的文件时遇到了问题。该如何解决？ - StangSpree

我没有听懂你的问题！ - Carlos

这个解决方案适用于 src 目录下的文件。然而，对于根目录下的文件，eslint 无法解析路径。如何解决这个问题？ - StangSpree

这对我来说毫无意义，它似乎更与你的配置有关，比如webpack而不是eslint。 - Carlos

对我有用，谢谢！只需记住，在更改后，您需要执行 npm start，基本上是重新启动。 - darmis

哇，你真是救命恩人！非常感谢你！ - undefined

Answer 2

在规则部分下方添加以下内容："import/extensions": [0, { "js": "always" }]

- Tedros