Make WebStorm use alias for HTML tags in JSX

Question

I need solution for WebStorm (WS); setup webpack aliases works for html attributes like src; that's my webpack.config.js for example:

const path = require('path');

module.exports = {
    resolve: {
        extensions: ['scss', 'html', 'jsx'],
        root: path.resolve(__dirname),
        alias: {
            components: path.resolve(__dirname, 'components'),
            layout: path.resolve(__dirname, 'layout'),
            static: path.resolve(__dirname, 'static'),
            js: path.resolve(__dirname, 'static/js'),
            media: path.resolve(__dirname, 'static/media'),
            sass: path.resolve(__dirname, 'static/sass'),
            vendors: path.resolve(__dirname, 'static/vendors'),
        },
    },
};

for example look on alias settings, and I want to use it like

<img src="media/logo/medium.png">

not like

<img src="static/media/logo/medium.png">

Autocomplete for this does not work, it does not use webpack config for html attribute like src, only for import.

P.S. I already know about make folder as "resource root", but it gives autocomplete from resource directory only.

Answer 1

Webpack resolution rules only work in imports currently, path aliases in HTML/CSS are not supported. Please follow WEB-38331 for updates