这是我的项目结构:
-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上看到了这个问题:
VSCode 智能感知不适用于 webpack + 别名
我让它与:
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"target": "es6",
"module": "commonjs",
"paths": {
"@components/*": ["./src/components/*"]
}
}
}
但是 eslint 现在抱怨它没有解决,即使它编译得很好。
埃斯林特错误:
无法解析模块"@components/SocialMedia"的路径.eslint(import/no-unsolve(
注意:
我不想禁用 eslint。我也想让它理解这种路径。
方法,假设你已经安装了eslint-plugin-import
(在你的devDependencies中(。只需在.eslintrc.json
文件中添加此"设置"即可。
eslintrc.json
{
"settings": {
"import/resolver": {
"node": {
"moduleDirectory": ["node_modules", "src/"]
}
}
}
}
jsconfig.json
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
然后你可以打电话给
import SomeComponent from 'components/SomeComponent';`
我已经安装了:
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/')
}
}
对于 lerna 用户:
埃斯林特克
{
"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"
]
}
}
}
}