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

Question

我的VS代码中有jsconfig.json个文件：

{
  "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
]}