ESLint respecting VS Code jsconfig.json baseUrl and paths

Question

I've got a jsconfig.json file in my VS Code:

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

Having paths helps me to have shorter import statements. My code builds just fine, however how do I tell eslint to respect these settings?

import React from 'react';

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

and my ./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;

However my second line has a red squiggly. How do I configure my eslint to respect jsonfig.json? Disabling this rule would be last resort.

Basically I want to have working absolute imports as in this tutorial: https://itnext.io/create-react-app-with-vs-code-1913321b48d

So that ESLint doesn't complain about it.

Screenshot of my IDE:

Answer 1

install:

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

add to .eslintrc:

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

add to webpack.config.js:

const path = require('path')

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