reactjs - 带有 Babel、Flow、React 和 React Native 的 ESLint 配置
问题描述
我正在使用 React Native 开发一个移动应用程序,并且我一直在尝试正确配置 ESLint 一段时间(包括 Babel、Flow 和 Prettier)。
我在 VSCode 中收到以下错误:'module' should be listed in the project's dependencies. eslint(import/no-extraneous-dependencies)
. 这适用于我的所有模块和插件,例如 react、react-native 等。我安装了每个包和 VSCode ESLint 扩展,但 ESLint 仍然引发此错误。也许我在该extends
部分中也复制了一些功能,我想知道我的配置是否良好以及我是否可以摆脱这个错误(其他一切看起来都按预期工作)。
.eslintrc.json
{
"extends": [
"airbnb",
"plugin:react/recommended",
"plugin:flowtype/recommended",
"plugin:prettier/recommended",
"prettier",
"prettier/babel",
"prettier/react",
"prettier/flowtype",
"prettier/standard"
],
"plugins": [
"react",
"react-native",
"flowtype",
"standard",
"prettier"
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true
}
},
"env": {
"browser": true,
"jest": true
},
"rules": {
"import/no-unresolved": "off",
"react/jsx-filename-extension": [
1,
{
"extensions": [
".js",
".jsx"
]
}
],
"prettier/prettier": [
"error",
{
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 100
}
]
}
}
包.json
{
"name": "PICSTART",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"ios": "react-native run-ios --simulator=\"iPhone XR\"",
"android": "react-native run-android",
"debugjs": "react-devtools",
"test": "jest",
"flow": "node_modules/flow-bin/vendor/flow"
},
"dependencies": {
"@okgrow/react-native-copilot": "^2.4.1",
"moment": "^2.24.0",
"react": "16.5.0",
"react-native": "0.57.1",
"react-native-camera": "^1.3.0",
"react-native-datepicker": "^1.7.2",
"react-native-fs": "^2.13.3",
"react-native-image-picker": "^0.28.0",
"react-native-loading-spinner-overlay": "^1.0.1",
"react-native-modal": "^9.0.0",
"react-native-svg": "^9.3.3",
"react-native-vector-icons": "^6.1.0",
"react-navigation": "^2.0.4",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-mock-store": "^1.5.1",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/runtime": "^7.1.2",
"babel-eslint": "^10.0.1",
"babel-jest": "23.6.0",
"eslint": "^5.15.3",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-flowtype": "^3.4.2",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-native": "^3.6.0",
"eslint-plugin-standard": "^4.0.0",
"flow-bin": "^0.78.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.47.0",
"prettier": "^1.16.4",
"react-test-renderer": "16.5.0"
},
"jest": {
"preset": "react-native",
"testRegex": "./__tests__/[^setup].*.js$",
"transformIgnorePatterns": [
"node_modules/(?!react-native|native-base|react-navigation|react-native-fabric)"
],
"setupFiles": [
"./__tests__/setup.js"
]
}
}
解决方案
发生此错误eslint(import/no-extraneous-dependencies)
是因为您正在导入不在您的package.json.
如果一切正常,编译时没有错误,您可以查看此处的文档,他们解释了如何禁用此规则。
如果.eslintrc.json
和package.json
不在同一个文件夹中,这可能会导致错误,因为 eslint 会查找package.json
文件,但它可以找到它,因为它在另一个文件夹中。
编辑:也许你错过"es6": true
了"env"
尝试
"env": {
"es6": true,
"browser": true,
"jest": true
},
推荐阅读
- r - (速度挑战)任何更快的方法来计算两个矩阵的行之间的距离矩阵,就欧几里得距离而言?
- c# - System.Data.SqlClient.SqlException:'操作数类型冲突:datetime2 与十进制不兼容
- azure-devops - 拉取请求弹出一个确认框
- java - 日期从数据库显示为前一天到前端
- angular - Angular 组件缺少模板
- c++ - 智能指针是否会删除由 new 定义的内存
- python - python对象的身份
- python-2.7 - Subprocess.Popen() 在终端上工作,而不是在 VSCode 上
- sql - 通过在Oracle中分组一列从表中选择数据
- mysql - MySQL data to time value