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.
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.
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.
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.
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.
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.
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.
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
Bryan Migliorisi says:
June 9, 2017Great stuff – What are the chances of CSS-in-JS (like styled-components) support landing in Webstorm?
Ekaterina Prigara says:
June 9, 2017No, sorry, no plans for that at the moment: it’s not possible to implement a general solution that will work for any CSS-in-JS library.
You can configure code highlighting for Styled Components via TextMate Bundles (Preferences | Editor | TextMate Bundles). The required files are in the PR mentioned here: https://github.com/styled-components/styled-components#sublime-text
Luciano says:
August 23, 2017Ekaterina, is there a place where I can upvote this feature?
This is a major issue for out team
Thanks
Ekaterina Prigara says:
August 24, 2017If you’re using Styled Components, feel free to vote for this feature request: https://youtrack.jetbrains.com/issue/WEB-24148
If you’re using a different CSS-in-JS library, please submit a new request. Thank you!
cdanyl says:
June 10, 2017As always, awesome features 🙂
derekdon says:
July 21, 2017Will the webpack support include support for:
@import “~normalize.css/normalize.css”
etc. where the tilde is used?
lena_spb says:
July 24, 2017can be expected in 2017.3 – see https://youtrack.jetbrains.com/issue/WEB-25321 and linked tickets
Steven Silvestri says:
July 31, 2017The 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:
July 31, 2017Can 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.
Muhammad Adeel says:
August 14, 2017great 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.
lena_spb says:
August 14, 2017What does your webpack config look like (is it a single file, or a merged one)? Can you provide your config(s) plus your idea.log (https://intellij-support.jetbrains.com/hc/en-us/articles/207241085-Locating-IDE-log-files)?
Tomek says:
August 28, 2017Unfortunately 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:
August 28, 2017Thanks 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:
August 28, 2017Thank 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;
Bill Guan says:
September 26, 2017Resolving 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
Ekaterina Prigara says:
October 2, 2017Can you please report us an issue about that on https://youtrack.jetbrains.com/issues/WEB
Would really appreciate if you attach a sample project that uses webpack with TypeScript. Thank you!
Marius Virbičianskas says:
October 11, 2017Hey,
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
lena_spb says:
October 11, 2017Not sure I follow you… WebStorm looks at the config you select in
Settings | Languages & Frameworks | JavaScript | Webpack. Do you miss a possibility to choose multiple configs instead of a single one?jy_moon says:
February 20, 2018Hello,
I want choose multiple configs instead of a single one.
Could you leave a reply?
lena_spb says:
February 20, 2018Not currently possible, please vote for https://youtrack.jetbrains.com/issue/WEB-29578 to be notified on any progress with it
anon says:
November 29, 2017Webpack is not under `Settings | Languages & Frameworks | JavaScript`.
Ekaterina Prigara says:
November 29, 2017What WebStorm version do you use? Make sure that you are in (project) Preferences and not in the Default Preferences.
Juno says:
January 9, 2018Alias seems not work when webpack config file return a promise like what vue-cli generate…
Ekaterina Prigara says:
January 9, 2018That has been already fixed: https://youtrack.jetbrains.com/issue/WEB-30214 The fix will land in the upcoming WebStorm 2017.3.3. Sorry for the inconvenience!
Marco B says:
April 12, 2018But 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’;
Ekaterina Prigara says:
April 13, 2018Hello Marco,
Can you please share with us your webpack config file? You can send it to our tech support using this form: https://intellij-support.jetbrains.com/hc/en-us/requests/new
Thank you!
Ignacio Durand says:
May 3, 2018Sorry 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
Ekaterina Prigara says:
May 3, 2018Hi Ignacio,
Thank you for your comment! What was the initial issue?
Issa says:
May 21, 2018I 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?
Ekaterina Prigara says:
May 21, 2018Please contact our tech support and provide your webpack configuration files and the IDE version: https://intellij-support.jetbrains.com/hc/en-us/requests/new Thank you!
Brian HVB says:
June 12, 2018I 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.
Ekaterina Prigara says:
June 12, 2018Please try using
@import "~ag-grid/src/styles/ag-grid.scss"in your SCSS files instead. This is the recommended way for the webpack’s sass-loader. More info here https://webpack.js.org/loaders/sass-loader/#imports and here https://stackoverflow.com/questions/34717203/webpack-with-sass-loader-scss-file-import-does-not-recognize-resolve-aliasBrian HVB says:
June 12, 2018That worked, perfectly. Thanks!
Chigozirim Eze says:
August 14, 2018Is 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:
August 16, 2018Not 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:
October 6, 2018So 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:
October 8, 2018I 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:
October 9, 2018It 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:
October 22, 2018webpack.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:
October 23, 2018`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`
Ekaterina Prigara says:
October 23, 2018Hello Andrey,
We’ve reproduced the problem and reported an issue that you can follow: https://youtrack.jetbrains.com/issue/WEB-35445
Paul Han says:
September 8, 2018“`
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.
Ekaterina Prigara says:
September 11, 2018You have a mistake in your config file: it should be `exports` and not `export`.
Andrey says:
October 6, 2018Is 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
Ekaterina Prigara says:
October 10, 2018We have reported an issue that you can follow for the updates: https://youtrack.jetbrains.com/issue/WEB-35236
John Lovén says:
February 6, 2019The 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”;
Ekaterina Prigara says:
February 6, 2019What IDE version do you use?
John Lovén says:
February 6, 2019Currently I use 2018.3.4 but this broke a couple of versions back for me.
Ekaterina Prigara says:
February 6, 2019Can you please send the IDE logs (menu Help – Compress Logs) to our tech support for the investigation. Thanks!
John Lovén says:
February 6, 2019Done.
Serge K says:
March 5, 2019I 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:
March 5, 2019Hi 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:
March 5, 2019Thanks for the help. Unfortunately that did not resolve the issue so I’ll reach out to tech support. Thanks again