React Linting，“react”缺少文件扩展名（导入/扩展）答案

【问题标题】：React Linting, Missing file extension for "react" (import/extensions)React Linting，“react”缺少文件扩展名（导入/扩展）
【发布时间】：2018-05-10 23:56:29
【问题描述】：

我正在为我的 react 应用使用 Airbnb lint 设置

和线

import React from 'react';

给出错误

缺少“react”的文件扩展名（导入/扩展）

知道如何解决这个问题吗？

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.17.1",
    "firebase": "^4.6.2",
    "jquery": "^3.2.1",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "sass": "sass --watch src/styles/scss:src/styles/css",
    "sass:build": "sass src/styles/scss:src/styles/css"
  },
  "devDependencies": {
    "eslint": "^4.12.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.5.1"
  }
}

【问题讨论】：

airbnb 设置和 linter 哪个版本？请提供您的 package.json。
发布你的 package.json

标签： reactjs ecmascript-6 eslint lint

【解决方案1】：

在.eslintrc 的rules 对象中，将"import/extensions" 设置为never 或0 以避免这种情况。

【讨论】：

这将完全失去import/extensions lint 功能。

【解决方案2】：

您应该检查您是否安装了eslint-plugin-import，Airbnb 风格指南配置使用它来处理导入和导出的 linting。如果没有，则会导致错误 Unable to resolve path to module '_module-name_' 和/或 Missing file extension for "_module-name_" (import/extensions)。

此外，由于您已将其安装在开发依赖项中，因此您可以运行类似 ./node_modules/.bin/eslint . 或全局设置 eslint 以仅运行 eslint .

【讨论】：