时间戳

首页 > 解决方案 > Make WebStorm use alias for HTML tags in JSX

reactjs - Make WebStorm use alias for HTML tags in JSX

问题描述

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.

标签： reactjswebpackwebstorm

解决方案

Webpack 解析规则目前仅适用于导入，不支持 HTML/CSS 中的路径别名。请关注WEB-38331获取更新

推荐阅读