eslint 使用配置的路径映射解决导入错误 jsconfig.json
eslint resolve error on imports using with path mapping configured jsconfig.json
这是我的项目结构:
-src
--assets
--components
--constants
--helpers
--pages
--routes
eslintrc.json
jsconfig.json
App.js
index.js
我厌倦了:
import SomeComponent from '../../../../../components/SomeComponent';
我想做的是:
import SomeComponent from '@components/SomeComponent';
所以我在 SO 上看到了这个问题:
我得到了它的工作:
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"target": "es6",
"module": "commonjs",
"paths": {
"@components/*": ["./src/components/*"]
}
}
}
但是 eslint 现在抱怨它没有解决,即使它编译得很好。
eslint错误:
Unable to resolve path to module '@components/SocialMedia'.eslint(import/no-unresolved)
注意:
我不想禁用 eslint。我也想让它理解这种路径。
我已经安装了:
npm install -D eslint-import-resolver-alias
并且我添加到我的 eslint 配置文件中:
eslintrc.json
"settings": {
"import/resolver" : {
"alias" : {
"map" : [
["@components","./src/components/"]
],
"extensions": [".js"]
}
}
}
现在可以正常使用了,eslint 不再显示错误了。
编辑:
我正在使用 webpack,我还需要做:
webpack.config.js
resolve: {
alias: {
'@components': path.resolve(__dirname, 'src/components/')
}
}
另一种方法,假设您已安装 eslint-plugin-import
(在您的 devDependencies 中)。只需将此 "settings" 添加到您的 .eslintrc.json
文件中。
.eslintrc.json
{
"settings": {
"import/resolver": {
"node": {
"moduleDirectory": ["node_modules", "src/"]
}
}
}
}
jsconfig.json
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
那你就可以打电话给
import SomeComponent from 'components/SomeComponent';`
对于 lerna 用户:
eslintrc
{
"settings": {
"import/parsers": {
"@typescript-eslint/parser": [".js", ".jsx", ".ts", ".tsx"]
},
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"],
// this resolves path alias import problems
"moduleDirectory": [ "apps/*/src", "packages/*/src" ]
},
"typescript": {
"alwaysTryTypes": true,
// this resolves packages import problems
"project": [
"packages/*/tsconfig.json",
"apps/*/tsconfig.json"
]
}
}
}
}
这是我的项目结构:
-src
--assets
--components
--constants
--helpers
--pages
--routes
eslintrc.json
jsconfig.json
App.js
index.js
我厌倦了:
import SomeComponent from '../../../../../components/SomeComponent';
我想做的是:
import SomeComponent from '@components/SomeComponent';
所以我在 SO 上看到了这个问题:
我得到了它的工作:
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"target": "es6",
"module": "commonjs",
"paths": {
"@components/*": ["./src/components/*"]
}
}
}
但是 eslint 现在抱怨它没有解决,即使它编译得很好。
eslint错误:
Unable to resolve path to module '@components/SocialMedia'.eslint(import/no-unresolved)
注意:
我不想禁用 eslint。我也想让它理解这种路径。
我已经安装了:
npm install -D eslint-import-resolver-alias
并且我添加到我的 eslint 配置文件中:
eslintrc.json
"settings": {
"import/resolver" : {
"alias" : {
"map" : [
["@components","./src/components/"]
],
"extensions": [".js"]
}
}
}
现在可以正常使用了,eslint 不再显示错误了。
编辑:
我正在使用 webpack,我还需要做:
webpack.config.js
resolve: {
alias: {
'@components': path.resolve(__dirname, 'src/components/')
}
}
另一种方法,假设您已安装 eslint-plugin-import
(在您的 devDependencies 中)。只需将此 "settings" 添加到您的 .eslintrc.json
文件中。
.eslintrc.json
{
"settings": {
"import/resolver": {
"node": {
"moduleDirectory": ["node_modules", "src/"]
}
}
}
}
jsconfig.json
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
那你就可以打电话给
import SomeComponent from 'components/SomeComponent';`
对于 lerna 用户:
eslintrc
{
"settings": {
"import/parsers": {
"@typescript-eslint/parser": [".js", ".jsx", ".ts", ".tsx"]
},
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"],
// this resolves path alias import problems
"moduleDirectory": [ "apps/*/src", "packages/*/src" ]
},
"typescript": {
"alwaysTryTypes": true,
// this resolves packages import problems
"project": [
"packages/*/tsconfig.json",
"apps/*/tsconfig.json"
]
}
}
}
}