What should I do if webstorm does not recognize es6?

Solution: 1. Click "File" - "Preferences" - "Languages ​​& Frameworks" - "JavaScript" on the navigation bar, and set the version to "ECMAScript 6". 2. Execute the "npm install -g babel" command to install the Babel tool, open "File watchers" and click the " " button to configure Babel in the pop-up window.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

ECMAScript 6 is the next generation standard for the JavaScript language and was officially released in June 2015. Mozilla will launch JavaScript 2.0 based on this standard.
The goal of ES6 is to enable the JavaScript language to be used to write large and complex applications and become an enterprise-level development language.

I also wanted to try out the new features of ES6, so I started learning.

I wrote this code in webstorm to experience the convenience of ES6 syntax, but a lot of errors were reported

Various syntax errors

Solution

1. Grammar support settings

 File > Preferences > Languages & Frameworks > JavaScript

Just configure the ECMAScript version here

After configuration

2. Automatically transcode to ES5

file watcher + babel（ES6转码器）

You may want you The code written has better compatibility, but the current ES6 is certainly not supported by all browsers, so we need to use the ES6 transcoder.
Babel is a widely used ES6 transcoder that can convert ES6 code into ES5 code for execution in browsers or other environments. This means that you can write programs in ES6 without worrying about whether the existing environment supports it.

And you also want to automatically transcode every time you modify the code, so you also need to use webstorm's file watcher (of course there are other solutions)

• npm install -g babel

• ##Preferences > Tools > File watchers

• Click the " " button

file watcher configuration interface

File Type: Configure the file type that the listener monitors, which can be found in Preferences > Editor > File types Configuration

Scope: Configure the listening scope of the listener. You can customize a new scope or use the scope defined in Preferences > Appearance & Behavior > Scopes

Program: babel Installation location

Arguments: Command execution parameters, see

Babel CLI

Working directory: The location where the babel command is executed, the default is the directory where the file is located

Modifying the file in this way will generate files compiled into ES5 and sourceMap files at any time

After compilation

[Related recommendations:

javascript video tutorial、Programming video、webstorm tutorial】

The above is the detailed content of What should I do if webstorm does not recognize es6?. For more information, please follow other related articles on the PHP Chinese website!