我正在尝试使用 ESLint 在 TypeScript 项目中强制执行受限导入，但我遇到了配置问题。我已将 tsconfig.json 中的 baseUrl 设置为“src”，并尝试在 ESLint 配置中使用 path.resolve(__dirname, "app") 模块，但这两种方法似乎都没有按预期工作。
这是我的 tsconfig.json：
{
"compilerOptions": {
"outDir": "dist",
"sourceMap": true,
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true,
"allowJs": true,
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"types": ["@testing-library/jest-dom/vitest"],
"moduleResolution": "node",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"allowSyntheticDefaultImports": true,
"baseUrl": "src"
},
"exclude": ["node_modules"],
"include": ["src"],
"typeRoots": ["node_modules/@types"],
"references": [{ "path": "./tsconfig.node.json" }]
}
和我的 eslintrc.cjs：
module.exports = {
root: true,
env: {
browser: true,
node: true,
es2021: true
},
extends: [
'eslint:recommended',
"plugin:react/recommended",
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
"prettier"
],
settings: {
"react": {
"version": "detect"
}
},
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
parserOptions: {
sourceType: "module",
ecmaVersion: 2020,
ecmaFeatures: {
jsx: true
}
},
plugins: ['react-refresh',"react","import", "@typescript-eslint"],
rules: {
'import/no-extraneous-dependencies': 'error',
"@typescript-eslint/no-var-requires": 0,
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/no-empty-function": "off",
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
"react/react-in-jsx-scope": "off",
"no-restricted-imports": ["error", {
"patterns": ["../*"]
}],
"react/prop-types": "off"
},
};
尽管有这些配置，我仍然无法强制执行受限导入。任何有关如何解决此问题的见解或建议将不胜感激。
`从'types/enums/ConfigurationState'导入{ConfigurationState}；
// TS2307：找不到模块“types/enums/ConfigurationState”或其相应的类型声明。` 完整解决方案根路径：src/types/enums/ConfigurationState.tsx eslint 版本：^8.57.0
package.json devDependency：
"devDependencies": {
"@babel/core": "^7.18.5",
"@babel/plugin-proposal-class-properties": "^7.10.1",
"@babel/plugin-proposal-export-default-from": "^7.10.1",
"@babel/plugin-transform-typescript": "^7.24.1",
"@babel/preset-env": "^7.21.4",
"@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.24.1",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
"@preact/signals-react-transform": "0.3.0",
"@testing-library/dom": "^9.3.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.5.1",
"@types/lodash": "^4.14.198",
"@types/node": "^18.0.0",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@types/react-i18next": "^8.1.0",
"@types/testing-library__jest-dom": "^6.0.0",
"@types/uuid": "^9.0.7",
"@typescript-eslint/eslint-plugin": "^6.5.0",
"@typescript-eslint/parser": "^6.0.0",
"@vanilla-extract/babel-plugin": "^1.2.0",
"@vanilla-extract/css": "^1.13.0",
"@vanilla-extract/jest-transform": "^1.1.4",
"@vanilla-extract/vite-plugin": "^3.9.0",
"@vanilla-extract/webpack-plugin": "^2.2.0",
"@vitejs/plugin-react": "^4.0.3",
"@vitest/coverage-v8": "^0.34.3",
"axios-mock-adapter": "^1.22.0",
"babel-loader": "^8.2.5",
"babel-plugin-styled-components": "^1.10.7",
"babel-plugin-typescript-to-proptypes": "^2.1.0",
"bundle-loader": "^0.5.6",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.1",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-config-standard-with-typescript": "^39.0.0",
"eslint-plugin-import": "2.29.1",
"eslint-plugin-n": "^16.6.2",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"express": "^4.18.1",
"file-loader": "^6.2.0",
"fork-ts-checker-webpack-plugin": "^7.2.11",
"html-webpack-plugin": "^5.5.0",
"husky": "^8.0.0",
"identity-obj-proxy": "^3.0.0",
"image-webpack-loader": "^8.1.0",
"jest-environment-jsdom": "^29.7.0",
"jest-environment-jsdom-global": "^4.0.0",
"jest-styled-components": "^7.2.0",
"jsdom": "^22.1.0",
"mini-css-extract-plugin": "^2.7.5",
"prettier": "^3.0.3",
"react-refresh": "^0.14.0",
"rimraf": "^3.0.2",
"sass": "^1.66.1",
"sass-loader": "^13.0.0",
"style-loader": "^3.3.1",
"styled-components": "^5.3.5",
"ts-node": "^10.5.0",
"typescript": "^5.4.0",
"vite": "^4.4.9",
"vite-plugin-checker": "0.6.2",
"vite-tsconfig-paths": "^4.2.0",
"vitest": "^0.34.3",
"vitest-sonar-reporter": "0.5.0",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.2",
"webpack-merge": "^5.8.0"
},
"engines": {
"node": ">= 21.7.0",
"yarn": ">= 1.22.4"
},
"browserslist": [
"> 1%",
"last 2 versions"
],
"resolutions": {
"strip-ansi": "6.0.0",
"string-width": "4.2.0",
"wrap-ansi": "7.0.0"
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": [
"npx eslint --fix",
"npx prettier --write"
]
}
要在 webpack 配置文件中正确解析 src 路径，您可以为 src 目录添加解析别名。这将帮助 webpack 正确找到你的源文件。以下是重构 webpack 配置文件的方法：
context: resolve(__dirname, "../../src"),
为了让 ESLint 理解 TypeScript 的 baseUrl 和任何路径别名，您需要确保
@typescript-eslint/eslint-plugineslint-import-resolver-typescript首先，如果您还没有安装 eslint-import-resolver-typescript：
npm install eslint-import-resolver-typescript --save-dev
yarn add -D ...
然后，更新您的 .eslintrc.cjs 配置以在设置键下包含解析器设置：
settings: {
"react": {
"version": "detect"
},
'import/resolver': {
// This will help ESLint understand alias and baseUrl from tsconfig
typescript: {
alwaysTryTypes: true,
project: '.',
},
},