Webstorm ES6 Syntax Support settings

ECMAScript 6 is the next-generation standard for JavaScript, which was officially released in June 2015. Mozilla will launch JavaScript 2.0 on the basis of this standard.
The goal of ES6 is to make JavaScript languages available for writing large, complex applications that become enterprise-level development languages.

As a monkey, I also want to try to ES6 what new features, so began the road of learning.

Write down this code in Webstorm, experience the convenience of ES6 grammar, but a lot of error

Various grammatical errors
What the fuck

believe that every program monkey does not want to code in such circumstances, anyway, this monkey does not want to

1 Syntax support settings

Preferences > Languages & Frameworks > JavaScript

Just configure the ECMAScript version here

After configuration

2 Automatic transcoding to ES5

File Watcher + Babel (ES6 transcoding)

You may want to have better compatibility with your code, but the current ES6 is definitely not supported by all browsers, so we'll use the ES6 transcoding device.
Babel is a widely used ES6 transcoding device that converts ES6 code into ES5 code, which can be executed in a browser or other environment. This means that you can write your program in a ES6 way without worrying about whether your existing environment supports it.

And you want to be able to automatically transcode every time you change your code, so you'll also need to use Webstorm's file Watcher (and of course other solutions)

• npm install -g babel
• Preferences > Tools > File watchers
• Click on the "+" button

File Watcher Configuration Interface

File type: Configures the types of files that the listener listens on, which can be configured in Preferences > Editor > File Types
Scope: Configure the listener's listening range to customize the new range, or use Preferences > Appearance & Behavior > Scopes
Installation location of Program:babel
Arguments: Command execution parameters, see Babel CLI
Working the location where the Directory:babel command executes, default to the directory where the file is located

Making changes to the files will generate the files compiled into ES5 and the Sourcemap files at any time.

After compilation

Webstorm ES6 Syntax Support settings