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
Great stuff – What are the chances of CSS-in-JS (like styled-components) support landing in Webstorm?
No, 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
Ekaterina, is there a place where I can upvote this feature?
This is a major issue for out team
Thanks
If 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!
As always, awesome features :)
Will the webpack support include support for:
@import “~normalize.css/normalize.css”
etc. where the tilde is used?
can be expected in 2017.3 – see https://youtrack.jetbrains.com/issue/WEB-25321 and linked tickets
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);}
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.
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.
What 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)?
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
:(
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
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;
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
Can 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!
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
Not 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?Hello,
I want choose multiple configs instead of a single one.
Could you leave a reply?
Not currently possible, please vote for https://youtrack.jetbrains.com/issue/WEB-29578 to be notified on any progress with it
Webpack is not under
Settings | Languages & Frameworks | JavaScript.What WebStorm version do you use? Make sure that you are in (project) Preferences and not in the Default Preferences.
Alias seems not work when webpack config file return a promise like what vue-cli generate…
That 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!
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’;
Hello 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!
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
Hi Ignacio,
Thank you for your comment! What was the initial issue?
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?
Please 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!
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.
Please 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-aliasThat worked, perfectly. Thanks!
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.
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
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
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 bugIt 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?
webpack.config.babel.js: https://pastebin.com/rAxw3pJm
babel.config.js: https://pastebin.com/A4WgHwVL
Without
asyncit works. Withasyncthere 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 withasyncin the configrequire('@babel/polyfill');at the top ofwebpack.config.babel.jsyieldsModule resolution rules from webpack.config.babel.js are now used for coding assistance.in the event log. Butresolve.aliasstill not recognized by webstorm while webpack config function isasyncHello Andrey,
We’ve reproduced the problem and reported an issue that you can follow: https://youtrack.jetbrains.com/issue/WEB-35445
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.
You have a mistake in your config file: it should be
exportsand notexport.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
We have reported an issue that you can follow for the updates: https://youtrack.jetbrains.com/issue/WEB-35236
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”;
What IDE version do you use?
Currently I use 2018.3.4 but this broke a couple of versions back for me.
Can you please send the IDE logs (menu Help – Compress Logs) to our tech support for the investigation. Thanks!
Done.
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!
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!
Thanks for the help. Unfortunately that did not resolve the issue so I’ll reach out to tech support. Thanks again