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

Question

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

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

拥有路径可以帮助我拥有更短的导入语句。我的代码构建得很好，但是我如何告诉 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
]}