首页 web前端 前端问答 webstorm不识别es6怎么办

webstorm不识别es6怎么办

Oct 17, 2022 pm 06:29 PM
javascript es6 webstorm

解决方法:1、依次点击导航栏的“File”-“Preferences”-“Languages & Frameworks”-“JavaScript”,将版本设置为“ECMAScript 6”即可。2、执行“npm install -g babel”命令安装Babel工具,打开“File watchers”并点击“+”按钮,在弹窗中配置Babel即可。

webstorm不识别es6怎么办

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。
ES6的目标,是使得JavaScript语言可以用来编写大型的复杂的应用程序,成为企业级开发语言。

我也想尝试一下ES6有什么新特性,于是开始了学习之路。

在webstorm写下了这段代码,体验一下ES6语法的便利,但是一大堆报错

1.png
各种语法错误

解决方法

1、语法支持设置

 File > Preferences > Languages & Frameworks > JavaScript
登录后复制

这里只要配置ECMAScript版本即可

2.png

配置之后

3.png

2、自动转码为ES5

file watcher + babel(ES6转码器)
登录后复制

你可能希望你写的代码有更好的兼容性,但目前的ES6肯定不是所有浏览器都支持的,所以我们要用到ES6转码器。
Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在浏览器或其他环境执行。这意味着,你可以用ES6的方式编写程序,又不用担心现有环境是否支持。

而且你还希望每次修改代码时能自动转码,所以还要用到webstorm的file watcher(当然还有其他解决方案)

  • npm install -g babel

  • Preferences > Tools > File watchers

  • 点击“+”按钮

4.png
file watcher配置界面

File Type:配置该监听器监听的文件类型,可以在Preferences > Editor > File types中配置

Scope:配置该监听器的监听范围,可自定义新的范围,也可以使用Preferences > Appearance & Behavior > Scopes中定义的范围

Program:babel的安装位置

Arguments:命令执行参数,参见Babel CLI

Working directory:babel命令执行的位置,默认为文件所在目录

这样对文件做修改会随时生成编译成ES5的文件以及sourceMap文件

5.png
编译后

【相关推荐:javascript视频教程编程视频webstorm教程

以上是webstorm不识别es6怎么办的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1663
14
CakePHP 教程
1419
52
Laravel 教程
1313
25
PHP教程
1264
29
C# 教程
1237
24
webstorm闪退怎么解决 webstorm闪退怎么解决 Apr 08, 2024 pm 02:24 PM

解决 WebStorm 闪退问题的步骤:检查更新;重新启动计算机;禁用插件;重置设置;清除缓存;检查防火墙和防病毒软件;重新安装 WebStorm;联系支持团队。

webstorm怎么连接数据库 webstorm怎么连接数据库 Apr 08, 2024 pm 03:42 PM

可以通过以下步骤使用 WebStorm 连接数据库:1. 打开数据库工具窗口;2. 创建数据源;3. 连接到数据源;4. 查询数据库;5. 浏览表和数据;6. 编辑数据库对象;7. 管理用户和权限。

webstorm怎么自动换行 webstorm怎么自动换行 Apr 08, 2024 pm 03:48 PM

WebStorm 提供自动换行功能,可将代码分行提高可读性。其规则包括:1. 分行长表达式和语句;2. 分行方法调用;3. 分行函数和类定义。用户可自定义设置,如最大行长、缩进类型和快捷键。不过,自动换行可能不适用于单行注释或字符串字面值,且会影响代码格式,建议在应用前仔细审查。

webstorm怎么运行jsp项目 webstorm怎么运行jsp项目 Apr 08, 2024 pm 03:39 PM

可以通过以下步骤在 WebStorm 中运行 JSP 项目:创建一个 Java Web 项目。配置项目,添加 Web 和 Java EE facet。在 "src/main/webapp" 目录中创建 JSP 文件。编写 JSP 代码,包括 HTML、Java 和 JSP 标签。部署并运行项目。在浏览器中输入应用程序上下文根目录访问 JSP 页面。

如何重启webstorm 如何重启webstorm Apr 08, 2024 pm 07:15 PM

要重启 WebStorm,请按照以下步骤操作:使用快捷键:Windows/Linux:Ctrl + Shift + A,macOS:Cmd + Shift + A。在搜索字段中输入“重新启动”,然后选择“重新启动”。使用菜单:点击“文件”菜单,选择“重新加载”下的“重新启动”。使用任务管理器:在任务管理器或强制退出应用程序窗口中,选择 WebStorm 进程,然后点击“重启”或“重新启动”。

webstorm和vscode哪个好用 webstorm和vscode哪个好用 Apr 08, 2024 pm 07:33 PM

对于专注于 Web 开发,追求深度功能的开发者,WebStorm 是更佳选择;而重视可定制性、轻量级和多语言支持的用户则更适合 VSCode。

webstorm怎么登录 webstorm怎么登录 Apr 08, 2024 pm 04:45 PM

登录 WebStorm 的步骤:1. 打开 WebStorm;2. 选择 GitHub 或 JetBrains 账户登录;3. 输入凭据;4. 授权访问账户;5. 完成登录。

webstorm自动换行在哪 webstorm自动换行在哪 Apr 08, 2024 pm 08:09 PM

WebStorm 中可以通过以下步骤设置自动换行:勾选 "Wrap lines" 复选框并设置最大行宽。选择自动换行规则:无、任意位置换行、关键字后换行。可选设置:保留手动换行、回车后自动换行。应用设置并关闭设置窗口。注意:此设置适用于所有文件类型,特定文件类型可单独设置。

See all articles