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

问题描述

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

I have some aliases inside .babelrc.jsAnd .eslintrc with eslint-import-resolver-babel-module plugin to get aliases from babel config.But eslint anyway can't resolve aliases.

.babelrc.js，.eslintrc，package.json要点：

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

.babelrc.js

.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

.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": {}
    }
  }
}

推荐答案

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

Well it seems that I need to duplicate all aliases in both configs.I have rewrite .eslintrc as .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/'),
        }
      }
    }
  }
};

这篇关于为什么.eslintrc可能看不到.babelrc.js的别名？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！