ESLint 尊重 VS Code jsconfig.json baseUrl 和路径

Question

jsconfig.json我的 VS Code 中有一个文件：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./src/",
    "paths": {
      "*": ["*"],
      "components/*": ["components/*"]
    }
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

有paths帮助我有更短的导入语句。我的代码构建得很好，但是我如何告诉 eslint 尊重这些设置？

import React from 'react';

export default () => <div>Hello guys</div>;

和我的./src/App.js：

import React from 'react';
import HelloWorld from 'components/HelloWorld';

const App = () => (
  <div className="App">
    <header className="App-header">
      <h1 className="App-title">Welcome to React</h1>
    </header>
    <p className="App-intro">
      To get started, edit <code>src/App.js</code> and save to reload.
    </p>
    <HelloWorld />
  </div>
);

export default App;

然而，我的第二行有一个红色的波浪线。我如何配置我的 eslint 以尊重jsonfig.json？禁用此规则将是最后的手段。

基本上我想在本教程中使用绝对导入：https : //itnext.io/create-react-app-with-vs-code-1913321b48d

所以 ESLint 不会抱怨它。

我的 IDE 的屏幕截图：

Answer 1

安装：

npm i -D eslint-import-resolver-webpack eslint-plugin-import

添加.eslintrc：

"settings": {
  "import/resolver": {
   "webpack": {
     "config": "webpack.config.js"
   }
  }
}

添加webpack.config.js：

const path = require('path')

resolve: {
  modules: [
   'node_modules',
   path.resolve('./assets'),  //your path
   path.resolve('./constans'), //your path
]}

Answer 2

将其添加到 .eslintrc

  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    }
  }