WebStorm 2017.2 EAP 172.2827: Better Webpack Support, Convert to Export & Breadcrumbs for JS

This week WebStorm 2017.2 EAP build (172.2827.22) brings lots of new features that we’d like you to try. Download the EAP build on this page or by using Toolbox App. A patch update from the last week EAP build is also available.

Please share your feedback and report issues on our tracker. Thank you!

Support for webpack enhanced module resolution

This update brings a huge improvement in working with projects using webpack. WebStorm now analyzes the webpack configuration and provides coding assistance that respects the webpack module resolution. That means that now all the import statements in the code that use enhanced module resolution will be properly resolved.

WebStorm runs webpack under the hood when you open a project or change webpack.config.js and, thanks to the information it gets, WebStorm now properly understands the project resolve roots and resolve aliases.

Now you don’t have to manually mark the directories as Resource roots in Preferences | Directories to fix the unresolved imports – they will just work fine.

In this project react-color is an alias for the path './src/index.js'. Now WebStorm is able to properly resolve the import from react-color, provide navigation to it and completion for the exported symbols.

webpack-alias

By default WebStorm will analyze the webpack configuration file in the root of the project, but you can select another file in Preferences | Languages & Frameworks | JavaScript | Webpack.

Working with Version Control: inspections for commit message, Reword and Revert Commit actions

Many projects have commit message guidelines. WebStorm now allows you to configure the format of the commit message for the project. The IDE will show whether the message satisfies it and will suggest quick-fixes. You can do that in Preferences | VCS | Commit Dialog.

commit-dialog

We’ve added a Revert commit action for Git. As the name suggests, it will help you revert a commit that’s already been pushed. To find it, right-click on the commit in the Log.

revert-commit

Also in the log you can find the new Reword action. It lets you change the commit message for any commits that are not pushed yet.

The Shelf tab has been redesigned and now offers you a Preview.

Breadcrumbs in JavaScript and TypeScript files

WebStorm now shows your location in the JavaScript and TypeScript file, with the breadcrumbs at the bottom of the editor. They show names of classes, variables, functions, and methods. Click on the name on the breadcrumb to jump to the parent object.

breadcrumbs

Another great way to navigate around the file structure is by using the Structure view. You can open it as a tool window or use it as a popup (press Cmd-F12 on macOS or Ctrl+F12 on Windows & Linux).

Converting module.exports into ES6 export

For the past year we’ve been adding various inspections that help you migrate your code to ES6. These include converting function to arrow function, var declarations to let and const, require calls to import statements, and strings to template strings.

The new quick-fix can convert module.exports into export default and exports. into export,  if that’s possible. To use it, press Alt-Enter on the module.exports and select Convert to export.

convert-to-export

Please note that the inspection doesn’t ensure that name exports are imported with the correct ES6 syntax.

You can also run the inspection called “module.exports is used instead of export” for a bunch of files using Inspect code… action and apply the fix for all of the files.

By default the inspection “module.exports is used instead of export” only provides a quick-fix and doesn’t highlight module.exports statements in your code. If you want highlighting, you can enable it in Preferences | Editor | Inspections.

Don’t forget that the project JavaScript version has to be set to ES6, JSX or Flow in Preferences | Languages & Frameworks | JavaScript.

Nested files in Project view

Some time ago we started visually grouping together generated files in the Project view, e.g. generated .js and .js.map files were grouped with the .ts file in the same folder with the same name.

Now you can configure what files are visually grouped together. Click the gear icon in the Project view, select File nesting… and add your own patterns. For example, you can group together .ts, .html and .css files of an Angular component.

nesting

For the full list of issues addressed in this EAP build, see the Release notes.

Please report your feedback to our issue tracker. To get notifications of new EAP builds as they become available, subscribe to the EAP channel in Preferences | Appearance & Behavior | System Settings | Updates.

Your WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Early Access Preview and tagged , , . Bookmark the permalink.

53 Responses to WebStorm 2017.2 EAP 172.2827: Better Webpack Support, Convert to Export & Breadcrumbs for JS

  1. Bryan Migliorisi says:

    Great stuff – What are the chances of CSS-in-JS (like styled-components) support landing in Webstorm?

  2. cdanyl says:

    As always, awesome features :)

  3. derekdon says:

    Will the webpack support include support for:

    @import “~normalize.css/normalize.css”

    etc. where the tilde is used?

  4. Steven Silvestri says:

    The webpack support for aliases doesn’t seem to work when you use webpack configuration by env. For example if your config file is just:

    module.exports = function(env) {
    return require(./webpack.${env}.js)(env);
    }

    • Ekaterina Prigara says:

      Can you please try specify the path to the configuration file you want to use currently in Preferences | Languages & Frameworks | webpack. WebStorm needs to run a specific webpack configuration file to build a project model.

  5. Muhammad Adeel says:

    great work.

    Problem with module directory support is that it doesn’t pick up the resolve/alias directories for module paths unless you change the webpack file.

    So on starting the editor I have to hit an empty space at the end of webpack.config.js file or remove one to trigger webpack configuration change update. Which then picks up the module directories.

  6. Tomek says:

    Unfortunately webpack support doesnt work for “composed” configurations like they recommend in a book https://survivejs.com/webpack/developing/composing-configuration/

    example repo: https://github.com/Tomekmularczyk/react-starter/tree/master/config

    :(

    • Ekaterina Prigara says:

      Thanks for the feedback! The support for such configurations will land in WebStorm 2017.3 (the early access preview will start quite soon). As a workaround please try the suggestion in the comment: https://youtrack.jetbrains.com/issue/WEB-28473

      • Tomek says:

        Thank for reply! Unfortunately solution from comment doesn’t work as expected for me. It still underlines imports with information about module not being installed. However I made another file only to help webstorm:

        idea.resolve.webpack.js

        const projectAliases = require(‘./webpack.parts’).resolveProjectDependencies;

        module.exports = projectAliases;

  7. Bill Guan says:

    Resolving Webpack alias works fine in Javascript file. However, when trying to import a file in typescript file by using alias, Intellij still doesn’t understand these alias.

    Could you please fix this?

    Thanks

  8. Marius Virbičianskas says:

    Hey,

    Any chance of adding an option to set roots for webpack configs? because in our project we have different bundles with different webpack configs but PhpStorm only looks at the root webpack config

  9. anon says:

    Webpack is not under Settings | Languages & Frameworks | JavaScript.

    • Ekaterina Prigara says:

      What WebStorm version do you use? Make sure that you are in (project) Preferences and not in the Default Preferences.

  10. Juno says:

    Alias seems not work when webpack config file return a promise like what vue-cli generate…

  11. Marco B says:

    But this doesn’t seem to work on 2018.1 MacOsx

    in Settings | Languages & Frameworks | JavaScript | Webpack the right webpack file is selected

    const defaults = {
    devtool: ‘source-maps’,
    entry: ‘./app/app.js’,
    output: {
    path: path.join(__dirname, ‘public’),
    filename: ‘main.js’
    },
    resolve: {
    root: path.resolve(__dirname),
    alias: {
    ‘@app’: ‘app’,
    ‘@actions’: ‘app/actions’,
    ‘@api’: ‘app/api’,
    ‘@components’: ‘app/components’,
    @common’: ‘app/components/common’,
    ‘@stylesheets’: ‘stylesheets’
    },
    extensions: [”, ‘.js’, ‘.jsx’]
    },
    ….

    When I include on the code, the IDE is not able to find the source

    import MyTable from ‘@common/table.js’;

  12. Sorry to post on a closed issue but for the record: I managed to solve this by creating a webpack.config.js file separately like:


    const path = require('path')
    const webpack = require('webpack')

    module.exports = {
    ...
    resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
    '~': path.resolve(__dirname, './resources/assets/js')
    }
    },
    ...
    }

    And then importing it in the webpack.mix.js like:

    const config = require('./webpack.config')
    ...
    mix.webpackConfig(config)

    Make sure the webpack configuration file is pointed correctly in the configuration of the PhpStorm in: Settings > Languages & Frameworks > Javascript > Webpack

  13. Issa says:

    I setting the webpack for a vue project, but I got an error like this:
    “Can’t analyse webpack.base.conf.js: coding assistance will ignore module resolution rules in this file.
    Possible reasons: this file is not a valid webpack configuration file or its format is not currently supported by the IDE.”
    What can I do?

  14. Brian HVB says:

    I know this is an old post, but hoping to get a response before opening a more detailed ticket. Is there a way to enable the enhanced module resolution for .scss @imports?

    I have a web pack config with:
    resolve: {
    modules: [
    path.resolve(__dirname, ‘node_modules’),
    path.resolve(__dirname, ‘./’),
    ]

    When I import something in a JS file like:
    import ‘node_modules/ag-grid/src/styles/ag-grid.scss’;
    everything works, and the software recognizes that this is a valid path.

    But the same import in a .scss:
    @import “node_modules/ag-grid/src/styles/ag-grid.scss”;
    file promptsa “Cannot resolve directory” error.

    I’m using PyCharm 2018.1.4, but I have the same issue in WebStorm.

  15. Chigozirim Eze says:

    Is there a plan to include support for webpack config written using es6?

    My webpack config is written using es6 syntax, therefore when I open webstorm, I am greeted with the following message:

    Can’t analyse webpack.config.js: coding assistance will ignore module resolution rules in this file.
    Possible reasons: this file is not a valid webpack configuration file or its format is not currently supported by the IDE.
    Error details: Unexpected identifier.

    I have setup a babel watcher which transpiles the webpack config in the IDE, but webstorm seems to not take the watcher into consideration.

    • Ekaterina Prigara says:

      Not at the moment, sorry. Right now WebStorm runs the config directly with the node version selected in the project settings. Please vote for this issue: https://youtrack.jetbrains.com/issue/WEB-31023

      • Andrey says:

        So WebStorm 2018.2 also can’t handle webpack.config.babel.js? I have webpack.config.babel.js which contains some ES6, and I get a message in the event log: “Module resolution rules from webpack.config.babel.js are now used for coding assistance.”, but in fact, the resolution is not working

        • Andrey says:

          I got it working. The reason webstorm didn’t handle this config was that the webpack config function was async. I think it’s probably a bug

          • Ekaterina Prigara says:

            It can if the config name has *.babel.* in it and babel is set up correctly.
            Can you please share your webpack.config.babel.js with us, as well as .babelrc?

      • Andrey says:

        webpack.config.babel.js: https://pastebin.com/rAxw3pJm
        babel.config.js: https://pastebin.com/A4WgHwVL

        Without async it works. With async there is an error in the event log: Can't analyse webpack.config.babel.js: coding assistance will ignore module resolution rules in this file.
        Possible reasons: this file is not a valid webpack configuration file or its format is not currently supported by the IDE.
        Error details: regeneratorRuntime is not defined

        If there is no .babel-part in the config name there is always an ok-message in the event log: Module resolution rules from webpack.config.babel.js are now used for coding assistance. But alias resolution still doesn’t work with async in the config

      • Andrey says:

        require('@babel/polyfill'); at the top of webpack.config.babel.js yields Module resolution rules from webpack.config.babel.js are now used for coding assistance. in the event log. But resolve.alias still not recognized by webstorm while webpack config function is async

  16. Paul Han says:


    const path = require('path');

    module.export = {
    resolve: {
    alias: {
    '~': path.resolve(__dirname, './src'),
    },
    },
    };

    Actually, there is no webpack work in my project(I use parcel), and I create a webpack.config.js with this code. Unfortunally I was jumped failed.

  17. Andrey says:

    Is there any plans to support webpack enhanced module resolution within regular CSS imports? I.e. @import url(~alias/file.css); In the current version of Webstorm (2018.2) it doesn’t seem to work, while sass imports are working

  18. John Lovén says:

    The alias resolving for auto imports used to work for me but no longer does.

    In webpack.config.dev.js:

    resolve: {
    alias: {
    common: path.resolve(path.resolve(__dirname, “..”, “common”))
    }
    }

    And marked

    /home/john/ProjectName/webpack.config.dev.js

    as the webpack configuration file in Webstorm.

    When using the auto import feature the import still resolves to:

    import Component from “../../../common/src/components/Component”;

  19. Serge K says:

    I imported settings from a colleague who is working on the same code as I am, but my Webstorm (2018.3.5) is unable to analyse the webpack.config.js, rendering all the aliases useless (as well as throwing lots of “unused exports” in the code).

    This had been plaguing me for a while, but I was unable to resolve on my own, so I hoped that importing the colleague’s settings would fix the issue but it did not. Please let me know what to provide and where so that I can move past this annoyance.

    Thanks!

    • Ekaterina Prigara says:

      Hi Serge,
      Can you please try running Invalidate caches and restart in the File menu and then reopening the project. If it doesn’t help to successfully analyse the config file, please send the IDE logs (menu Help – Compress Logs) to our tech support team – it might contain some clues why the analysis has not passed. Thanks!

      • Serge K says:

        Thanks for the help. Unfortunately that did not resolve the issue so I’ll reach out to tech support. Thanks again

Leave a Reply to Bryan Migliorisi Cancel reply

Your email address will not be published. Required fields are marked *