为什么 .eslintrc 可能看不到 .babelrc.js 的别名？

Question

我在 .babelrc 中有一些别名.js 和 .eslintrc 与 eslint-import-resolver-babel-module 插件一起从 babel 配置中获取别名。 但无论如何，eslint 都无法解析别名。

.babelrc.js， .eslintrc， package.json in the gist： https://gist.github.com/SilentImp/4d005064063701faa04c29b02114d0df

.babelrc.js

const fs = require('fs');
const path = require('path');
const projectPath = path.resolve(__dirname, './');
const pathToSrc = path.resolve(projectPath, 'src');
const stats = fs.statSync(pathToSrc);
const env = process.env.NODE_ENV || 'dev';
const envAppConfigURL = path.resolve(__dirname, `../app/${env}.js`);
const devAppConfigURL = path.resolve(__dirname, 'dev.js');
const localAppConfigURL = path.resolve(__dirname, 'local.js');
const sampleAppConfigURL = path.resolve(__dirname, 'local.sample.js');
const isEnvConfig = fs.existsSync(envAppConfigURL);
const isDevConfig = fs.existsSync(devAppConfigURL);
const isLocalConfig = fs.existsSync(localAppConfigURL);
const isSampleConfig = fs.existsSync(sampleAppConfigURL);
let ConfigURL;
if (isEnvConfig) {
ConfigURL = envAppConfigURL;
} else if (isLocalConfig) {
ConfigURL = localAppConfigURL;
} else if (isSampleConfig) {
ConfigURL = sampleAppConfigURL;
} else {
ConfigURL = devAppConfigURL;
}
module.exports = {
"presets": [
["@babel/preset-env", {
"targets": {
"uglify": true,
"node": "current",
"browsers": ["> 3%", "ie 11"]
},
"debug": false,
}],
"@babel/preset-react",
["@babel/preset-stage-0", {
"decoratorsLegacy": true,
}]
],
"plugins": [
["module-resolver", {
"root": ["/"],
"alias": {
Config$: ConfigURL,
Utils: path.resolve(projectPath, 'src/shared/utils/'),
Components: path.resolve(projectPath, 'src/shared/components/'),
Reducers: path.resolve(projectPath, 'src/shared/reducers/'),
Images: path.resolve(projectPath, 'src/shared/assets/images/'),
Icons: path.resolve(projectPath, 'src/shared/assets/icons/'),
Styles: path.resolve(projectPath, 'src/shared/assets/styles/'),
Shared: path.resolve(projectPath, 'src/shared/'),
}
}],
"react-css-modules",
"@babel/plugin-proposal-export-default-from",
["@babel/plugin-proposal-decorators", {
"legacy": true
}],
["@babel/plugin-proposal-class-properties", {
"loose" : true
}]
],
};

.eslintrc

{
"env": {
"browser": true,
"node": true,
"jest": true,
"worker": true,
"serviceworker": true,
"es6": true
},
"extends": "airbnb",
"parser": "babel-eslint",
"globals": {
"FontFaceObserver": true,
"fontFaceSet": true,
},
"plugins": [
"react",
"jsx-a11y",
"import",
"jest"
],
"rules": {
"jsx-a11y/anchor-is-valid": [ "error", { "components": [ "Link" ], "specialLink": [ "to" ] } ],
"no-underscore-dangle": ["error", { "allow": ["_id", "_insertCss", "_getCss","__REDUX_STATE__", "_meta"] }],
"no-restricted-syntax": ["error", "WithStatement", "BinaryExpression[operator='in']"]
},
"settings": {
"import/resolver": {
"babel-module": {}
}
}
}

Answer 1

好吧，似乎我需要在两个配置中复制所有别名。 我将 .eslintrc 重写为 .eslintrc.js：

const fs = require('fs');
const path = require('path');
const projectPath = path.resolve(__dirname, './');
const pathToSrc = path.resolve(projectPath, 'src');
const configPath = path.resolve(projectPath, 'config/app');
const stats = fs.statSync(pathToSrc);
const env = process.env.NODE_ENV || 'dev';
const envAppConfigURL = path.resolve(configPath, `${env}.js`);
const devAppConfigURL = path.resolve(configPath, 'dev.js');
const localAppConfigURL = path.resolve(configPath, 'local.js');
const sampleAppConfigURL = path.resolve(configPath, 'local.sample.js');
const isEnvConfig = fs.existsSync(envAppConfigURL);
const isDevConfig = fs.existsSync(devAppConfigURL);
const isLocalConfig = fs.existsSync(localAppConfigURL);
const isSampleConfig = fs.existsSync(sampleAppConfigURL);
let ConfigURL;
if (isEnvConfig) {
ConfigURL = envAppConfigURL;
} else if (isLocalConfig) {
ConfigURL = localAppConfigURL;
} else if (isSampleConfig) {
ConfigURL = sampleAppConfigURL;
} else {
ConfigURL = devAppConfigURL;
}
module.exports = {
"env": {
"browser": true,
"node": true,
"jest": true,
"worker": true,
"serviceworker": true,
"es6": true
},
"extends": "airbnb",
"parser": "babel-eslint",
"globals": {
"FontFaceObserver": true,
"fontFaceSet": true,
},
"plugins": [
"react",
"jsx-a11y",
"import",
"jest"
],
"rules": {
"jsx-a11y/anchor-is-valid": [ "error", { "components": [ "Link" ], "specialLink": [ "to" ] } ],
"no-underscore-dangle": ["error", { "allow": ["_id", "_insertCss", "_getCss","__REDUX_STATE__", "_meta"] }],
"no-restricted-syntax": ["error", "WithStatement", "BinaryExpression[operator='in']"]
},
"settings": {
"import/resolver": {
"babel-module": {
"alias": {
Config$: ConfigURL,
Utils: path.resolve(projectPath, 'src/shared/utils/'),
Components: path.resolve(projectPath, 'src/shared/components/'),
Reducers: path.resolve(projectPath, 'src/shared/reducers/'),
Images: path.resolve(projectPath, 'src/shared/assets/images/'),
Icons: path.resolve(projectPath, 'src/shared/assets/icons/'),
Styles: path.resolve(projectPath, 'src/shared/assets/styles/'),
Shared: path.resolve(projectPath, 'src/shared/'),
}
}
}
}
};