babin-plugin-root-import路径未被ESlinter解析

Question

我正在使用babel-plugin-root-import解析亲属路径，并且工作正常，而且我正在遵循airbnb标准并使用eslint-plugin-import检查进口，但我仍在尝试删除import规则。我已经尝试配置解析器，但是它一直抛出错误。

。babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    plugins: [
      [
        'babel-plugin-root-import',
        {
          "paths": [
            {
              "rootPathSuffix": "./",
              "rootPathPrefix": "@root/"
            },
            {
              "rootPathSuffix": "./assets",
              "rootPathPrefix": "@asset/"
            },
            {
              "rootPathSuffix": "./src/helpers",
              "rootPathPrefix": "@help/"
            },
            {
              "rootPathSuffix": "./src/components",
              "rootPathPrefix": "@comp/"
            },
            {
              "rootPathSuffix": "./src/styles",
              "rootPathPrefix": "@styles/"
            }
          ]
        }
      ]
    ],
    presets: ['babel-preset-expo'],
  };
};

package.json

{
  "main": "./src/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "lint:check": "./node_modules/.bin/eslint -c .eslintrc --ext .js src",
    "lint:fix": "./node_modules/.bin/eslint -c .eslintrc --ext .js src --fix"
  },
  "dependencies": {
    "expo": "~36.0.0",
    "expo-cli": "^3.11.2",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-splash-screen": "^3.2.0",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "babel-plugin-root-import": "^6.4.1",
    "babel-preset-expo": "~8.0.0",
    "eslint": "^6.7.2",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.17.0"
  },
  "private": true
}

。eslintrc

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "rules": {
    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }]
  },
  "settings": {
    "import/resolver": "babel-plugin-root-import"
  }
}

Answer 1

要使用此babel插件运行eslint，我必须进行一些额外的安装：

yarn add eslint-import-resolver-babel-plugin-root-import -D

并修改了我的.eslint.js文件：

并添加：

settings: {
     'import / resolver': {
       'babel-plugin-root-import': {
         rootPathSuffix: 'src',
       },
     },
   },

就我而言，我使用的是eslint〜/模式来引用“ src”文件夹。

希望我的技巧对您有所帮助