eslint + jsconfig + nextjs 模块路径别名(绝对路径导入-@)
eslint + jsconfig + nextjs module path aliases (absolue path import - @)
我正在尝试使用 nextjs documentation 后的自定义别名导入文件。
我目前的做法是
来自
import Header from '../../../components/Header';
至
import Header from '@components/Header';
我得到了预期的结果。但是 eslint 抛出以下错误:
- 无法解析模块路径(eslint - import/no 未解析)
并且我尝试在我的 eslintrc 文件中添加以下行来解决错误
settings: {
'import/resolver': {
node: {
paths: ['src'],
},
},
},
但是 eslint 仍然抛出同样的错误。
解决这个问题的正确方法是什么?
提前致谢...
注意:我不想删除 eslint,我需要 @components import aliases
您可以尝试在 tsconfig.json
/jsconfig.json
中添加自定义路径,如下所示:
- 在您的
compilerOptions
中添加一个 baseUrl
(在我的例子中是 "baseUrl": "."
)
- 在
paths
对象中添加路径:
"paths": {
"components": ["components/*"],
}
在深入研究了很多 GitHub 答案等之后,终于...
在您的 eslintrc 文件中...添加以下别名
settings: {
'import/resolver': {
alias: {
map: [
['@components', '../../../components/'],
['@images', '../../../assets/images/'],
],
extensions: ['.js', '.jsx'],
},
},
},
并修复流量错误
在您的 flowconfig 文件中添加 name_mapper
module.name_mapper='^@components' ->'<PROJECT_ROOT>/../../../components'
module.name_mapper='^@images' ->'<PROJECT_ROOT>/../../../assets/images'
您还需要安装 npm i -D eslint-import-resolver-typescript
,然后将以下内容添加到 eslint 配置文件中:
"settings": {
"import/resolver": {
"typescript": {} // this loads <rootdir>/tsconfig.json to eslint
},
}
Reference: https://gourav.io/blog/nextjs-cheatsheet
我正在尝试使用 nextjs documentation 后的自定义别名导入文件。
我目前的做法是
来自
import Header from '../../../components/Header';
至
import Header from '@components/Header';
我得到了预期的结果。但是 eslint 抛出以下错误:
- 无法解析模块路径(eslint - import/no 未解析)
并且我尝试在我的 eslintrc 文件中添加以下行来解决错误
settings: {
'import/resolver': {
node: {
paths: ['src'],
},
},
},
但是 eslint 仍然抛出同样的错误。
解决这个问题的正确方法是什么?
提前致谢...
注意:我不想删除 eslint,我需要 @components import aliases
您可以尝试在 tsconfig.json
/jsconfig.json
中添加自定义路径,如下所示:
- 在您的
compilerOptions
中添加一个baseUrl
(在我的例子中是"baseUrl": "."
) - 在
paths
对象中添加路径:
"paths": {
"components": ["components/*"],
}
在深入研究了很多 GitHub 答案等之后,终于...
在您的 eslintrc 文件中...添加以下别名
settings: {
'import/resolver': {
alias: {
map: [
['@components', '../../../components/'],
['@images', '../../../assets/images/'],
],
extensions: ['.js', '.jsx'],
},
},
},
并修复流量错误 在您的 flowconfig 文件中添加 name_mapper
module.name_mapper='^@components' ->'<PROJECT_ROOT>/../../../components'
module.name_mapper='^@images' ->'<PROJECT_ROOT>/../../../assets/images'
您还需要安装 npm i -D eslint-import-resolver-typescript
,然后将以下内容添加到 eslint 配置文件中:
"settings": {
"import/resolver": {
"typescript": {} // this loads <rootdir>/tsconfig.json to eslint
},
}
Reference: https://gourav.io/blog/nextjs-cheatsheet