In this blog post we will cover the following important steps: If you created your application with a project template, such as create-react-app, or Babel is already installed and configured and works out of the box without any additional setup. This approach is good for compiling files on the fly for some experiments and debugging, though for client-side code you may still need some additional tools, such as module bundlers.įor production-ready code, it might be better to supplement Babel in your build process with webpack, Parcel, Rollup.js, Snowpack, or npm – and WebStorm can also help you here too. With this setting, WebStorm provides smart coding assistance for ES6 and some of the latest proposals, including proper syntax highlighting, code completion, on-the-fly inspections, navigation for modules and classes, and more.īabel, the most commonly used transpiler, can be configured and used via WebStorm’s File Watchers. This setting will work for React applications as well. In this blog post, we’ll take a look at some of the options that WebStorm offers to help you with this task.ĮCMAScript 6+ is set as the default JavaScript version in Preferences / Settings | Languages & Frameworks | JavaScript. This support includes ECMAScript 2015 and later standards and even some proposals to the language, such as nullish coalescing operators, private fields, optional chaining, and more.īut even as ECMAScript 6+ features get more and more support in modern browsers and runtimes (see the Kangax compatibility table), to deploy your ES6 code you still often need to compile it to ES5.1, the JavaScript version supported by all browsers.

WebStorm supports the ECMAScript 6+ syntax. Note: This post was updated in September 2021.

Jetbrains react js