#webpack resolver

When developing with webpack is common to add your source root folders into his resolver, so you can access your dependencies without caring about relative path.

This is excelent as is, but if you're using eslint and you want to check statically if you didn't have a typo, it'll throw false negatives because eslint doesn't know about webpack and his resolver by default.

So, what we do?

We need two eslint plugins:

npm i --save-dev eslint-plugin-import eslint-import-resolver-webpack

Add this to our .eslintrc file (mine is in YAML extension because is simpler than the JSON version:

settings: import/resolver: webpack: config: 'eslint-webpack.js'

The main point is the eslint-webpack.js file. In my case, appart of my webpack files (who are inside of dev-tools/webpack folder, I have this one in my root proyect only for linting porpouse. This is because my webpack files has dependencies and the eslint-import-resolver-webpack doesn't work if it has a lot of them.

And Fill our eslint-webpack.js file like this:

module.exports = { resolve: { root: __dirname, alias: { app: 'app', applicationStyles: 'app/styles/app.scss', }, extensions: ['', '.js', '.jsx'], }, };

Add as much aliases as you want. The root with the alias properties are used by the eslint plugin to know your correctly paths.

In my app/app.jsx file I have this two dependencies:

import Main from 'app/components/Main'; // App css import 'applicationStyles';

And eslint doesn't say anything. Instead, if I would have had import 'applicationStylesWrong'; it would have complained about.

BUT, this approach has one downside: you'll have duplicated resolve information (in your webpack file and eslint-webpack file). Also, doesn't work if you use the "modules" approach: modules: ['app'], instead of "alias" attribute.