我在 React 项目中遇到导入/未解决的问题,我遇到错误/战争的示例片段:
import { ArrowForwardIosRounded as ArrowForwardIcon } from "@mui/icons-material";
import axios from "axios";
import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Pathname } from "../../../routes";
import { handlers } from "../../../untils/handlers";
import Button from "./../Button";
import Input from ".//src/components/Input";
import Header from "../Header";
import SideBar from "../SideBar";
import WrapperForm from "../WrapperForm";
import FormHeader from "./FormHeader";
我在 Webshtorm 工作,希望组件导入这样的样式:
从“文件夹/文件夹/实用程序/处理程序”导入{TRANSACTION_STATUSES_PROPERTIES}; 或者 ... 来自“str/文件夹/文件夹/实用程序/处理程序”; 或者 ... 来自“/str/folder/folder/utils/handlers”;
(没有.../../../,仅来自模块 src)
这是我的jsconfig.json:
{
"compilerOptions": {
"target": "es6",
"baseUrl": "src",
"paths": {
"*": ["*"],
"src/**": ["src/**"]
},
"experimentalDecorators": true
},
"include": [
"src"
],
"exclude": [
"node_modules",
".idea",
".git"
]
}
.eslintrc:
module.exports = {
env: {
browser: true,
commonjs: true,
es6: true,
jest: true,
node: true
},
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"plugin:react-hooks/recommended",
"plugin:jest/recommended",
"plugin:testing-library/react",
"plugin:import/recommended",
"react-app"
],
parser: "@babel/eslint-parser",
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: "latest",
sourceType: "module"
},
plugins: ["react", "react-hooks", "import", "jsx-a11y"],
root: true,
rules: {
"comma-dangle": ["warn", "never"],
"eol-last": "error"
},
settings: {
react: {
version: "detect"
}
}
};
package.json:
{
"name": "portfolio-ui",
"version": "0.1.0",
"private": true,
"engines": {
"node": "v20.1.0",
"npm": "9.6.4"
},
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"run": "npm run start",
"dev": "next dev",
"build": "next build",
"lint": "next lint"
},
"dependencies": {
"@emotion/react": "^11.11.0",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.13.0",
"axios": "^1.4.0",
"classnames": "^2.3.2",
"crypto-js": "^4.1.1",
"jquery": "^3.7.0",
"moment": "^2.29.4",
"next": "13.4.2",
"prop-types": "^15.8.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-redux": "^8.0.5",
"react-router-dom": "^6.11.1",
"react-scripts": "^5.0.1",
"redux": "^4.2.1",
"redux-thunk": "^2.4.2",
"tailwindcss": "3.3.2",
"validator": "^13.9.0",
"web-vitals": "^3.3.1"
},
"resolutions": {
"eslint": "^8.40.0"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.21.8",
"@babel/eslint-parser": "^7.21.8",
"@babel/preset-env": "^7.21.5",
"@webpack-cli/generators": "^3.0.4",
"autoprefixer": "^10.4.14",
"babel-loader": "^9.1.2",
"css-loader": "^6.7.3",
"eslint": "^8.40.0",
"eslint-config-auto": "^0.7.3",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-import-resolver-node": "^0.3.7",
"eslint-import-resolver-typescript": "^3.5.5",
"eslint-import-resolver-webpack": "^0.13.2",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-testing-library": "^5.11.0",
"html-webpack-plugin": "^5.5.1",
"mini-css-extract-plugin": "^2.7.5",
"postcss": "^8.4.23",
"postcss-loader": "^7.3.0",
"prettier": "^2.8.8",
"sass": "^1.62.1",
"sass-loader": "^13.2.2",
"style-loader": "^3.3.2",
"typescript": "^4.9.4",
"webpack-cli": "^5.1.1",
"workbox-webpack-plugin": "^6.5.4"
}
}
我尝试 set off 是 eslintrc 中的规则,但 Webshtorm 无法从 src 路径导入自动组件(每次我尝试导入 atl+enter* 时,webstorm 添加 ../../../)