{"id":22236,"date":"2015-05-07T14:00:50","date_gmt":"2015-05-07T14:00:50","guid":{"rendered":"https:\/\/blog.jetbrains.com\/webstorm\/?p=7497"},"modified":"2021-11-30T14:59:27","modified_gmt":"2021-11-30T13:59:27","slug":"ecmascript-6-in-webstorm-transpiling","status":"publish","type":"webstorm","link":"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2015\/05\/ecmascript-6-in-webstorm-transpiling","title":{"rendered":"ECMAScript 6 in WebStorm: Transpiling"},"content":{"rendered":"

Note: This post was updated in September 2021.<\/em><\/p>\n

WebStorm supports the ECMAScript 6+ syntax. This support includes ECMAScript 2015 and later standards and even some proposals to the language, such as nullish coalescing operators<\/a>, private fields<\/a>, optional chaining<\/a>, and more.<\/p>\n

But even as ECMAScript 6+ features get more and more support in modern browsers and runtimes (see the Kangax compatibility table<\/a>), to deploy your ES6 code you still often need to compile it to ES5.1, the JavaScript version supported by all browsers.<\/p>\n

In this blog post, we\u2019ll take a look at some of the options that WebStorm offers to help you with this task.<\/p>\n

ECMAScript 6+<\/em> is set as the default JavaScript version in Preferences \/ Settings | Languages & Frameworks | JavaScript<\/em>. This setting will work for React applications as well.<\/p>\n

\"Select<\/p>\n

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.<\/p>\n

\"Coding<\/p>\n

Babel<\/a>, the most commonly used transpiler, can be configured and used via WebStorm\u2019s File Watchers. 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.<\/p>\n

For production-ready code, it might be better to supplement Babel in your build process with webpack<\/a>, Parcel<\/a>, Rollup.js<\/a>, Snowpack<\/a>, or npm \u2013 and WebStorm can also help you here too.<\/p>\n

If you created your application with a project template<\/a>, such as create-react-app<\/a>, @angular\/cli<\/a>, or @vue\/cli<\/a>, Babel is already installed and configured and works out of the box without any additional setup.<\/p>\n

In this blog post we will cover the following important steps:<\/p>\n