直接进入正文吧。
安装Babel
1 |
$ npm install -g babel |
好了,没什么好说的。
创建Sublime Text编译系统
选择菜单Tools –> Build System –> new Build System…
中文版的话是工具 –> 编译系统 –> 新建编译系统…
然后写如下配置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "working_dir": "${project_path:${folder}}", "selector": "source.js", "encoding": "utf-8", "shell": true, "windows": { "cmd": ["taskkill /f /im node.exe >nul 2>nul & babel-node $file"] }, "osx": { "cmd": ["killall node >/dev/null 2>&1; babel-node $file"] }, "linux": { "cmd": ["killall node >/dev/null 2>&1; babel-node $file"] } } |
接着保存为javascript.sublime-build,保存位置默认即可。
好了,现在你可以写 es6 的代码测试下了,下面是运行效果。
mac 效果
win 效果
运行失败处理
当然也有运行不了的情况,不过大体就分为下面2种。
一. 环境变量
如果执行不了,而是报错,错误类似xxx babel-node: command not found这样的,那么就是环境变量的问题。
只要添加下node和babel-node的路径到环境变量里。
如果是mac下,我推荐添加path属性到你的javascript.sublime-build里,会更方便。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "path": "/usr/local/bin", "working_dir": "${project_path:${folder}}", "selector": "source.js", "encoding": "utf-8", "shell": true, "windows": { "cmd": ["taskkill /f /im node.exe >nul 2>nul & babel-node $file"] }, "osx": { "cmd": ["killall node >/dev/null 2>&1; babel-node $file"] }, "linux": { "cmd": ["killall node >/dev/null 2>&1; babel-node $file"] } } |
就类似这样,mac 下就可以运行了。 win 下安装 node 默认就添加到环境变量了,所以不需要考虑这样的问题。
二. 含有中文路径 (仅win)
当路径里出现中文的时候,win 下什么都不会输出,好奇怪,我也不知道为什么,但 mac 下可以正常运行。
他们唯一区别只是环境字符集一个默认是 gbk,一个是 utf-8,难道只是这个问题?
如果有哪位大神知道,还望指点一二。
三. 中文用户名 (仅win)
如果你的系统用户名是中文的,我指的是系统登录的用户名,如果是中文的,那么怎么都运行不了,奇怪了。
一开始我以为是C:Users用户名AppDataRoamingnpm这个问题,但是我修改了 npm 安装目录,问题依旧。
暂时没想到好的处理方法,最直接有效的解决方法就是换英文用户名。
相关推荐
在Sublime Text中,可以通过安装如SublimeLinter、SublimeLinter-eslint这样的插件来实现对JavaScript语法的实时检查,或者使用Package Control安装Babel插件支持ES6以上的语法。 "sublime-text-master"这个文件名...
这个“SublimeText3开箱即用”压缩包旨在提供一个预配置的环境,让用户能够立即开始进行React、ES6语法的编程工作,并且内置了Eslint检查工具,确保代码质量。 首先,让我们详细了解一下Sublime Text 3的核心特性:...
现在,当你在JavaScript代码中输入对象的属性或者方法时,Sublime Text 3会立即显示一个下拉菜单,列出所有可能的选项,包括来自Node.js库、Babel、ES6等的函数和变量。这将显著减少开发者查找和记忆API的时间,提高...
在Sublime Text中,Babel插件的作用是提供对JSX语法(React组件的主要语法)的高亮支持。 首先,我们需要解决“install packages下载报错”的问题。Sublime Text的Package Control是一个非常方便的插件管理工具,但...
巴别升华仅支持Sublime Text 3 。 不再支持Sublime Text 2。 具有扩展的语言定义。安装通过找到它作为 。设置为默认语法要将其设置为特定扩展名的默认语法: 打开具有该扩展名的文件, 从菜单中选择View , 然后...
5. **JavaScriptNext - ES6 Syntax**:为Sublime Text添加对ES6语法的支持。 6. **SideBarEnhancements**:增强侧边栏功能,比如右键菜单中的文件操作选项。 **快捷键和命令面板**: Sublime Text支持自定义快捷键...
- **Babel**:将ES6+语法转换为ES5,确保浏览器兼容性。 - **VS Code或Atom**:也是流行的代码编辑器,它们也有丰富的插件生态系统,可以与Sublime Text相媲美。 4. **使用技巧** - **快捷键**:掌握Sublime ...
例如,配置 Node.js 运行环境,或者使用 Babel 转换 ES6+ 代码。 11. **插件管理**: `Package Control` 是 Sublime Text 3 的一个必备插件,它使得安装、更新和管理其他插件变得极其方便。你可以通过它找到并安装...
JavaScript是一种广泛使用的高级编程语言,而Sublime Text是一款流行的跨平台文本和源代码编辑器,它以其速度、简洁性和插件生态系统而闻名。对于JavaScript开发者而言,利用Sublime Text的插件能够极大地提高编码...
- 配置可能包括自定义的构建系统,使得运行 JavaScript 代码(如 Babel 转译 ES6 代码,或 Node.js 运行脚本)变得简单。 以上就是关于 "my-sublime-settings" 压缩包文件中可能包含的一些 Sublime Text 3 配置...
- **Babel**:支持ES6及更高版本的JavaScript语法高亮和代码提示。 3. **配置SublimeCodeIntel** 安装SublimeCodeIntel后,需要对其进行配置以支持JavaScript。打开`Preferences > Package Settings > Sublime...
Sublime Text 3的增强语法定义。包含什么配色方案糖果人语法CSS 3+; JavaScript; ; ; ; ; 完全支持 ; HTML 5+; MQL4(更新); 开玩笑的快照; PHP 7+(正在更新); SCSS(更新);增强的转到符号Windows或Linux ...
对于JavaScript,它可以配置为使用Node.js执行脚本,或者配合Babel转换ES6+代码。 3. **插件**:Sublime Text通过Package Control可以安装大量第三方插件,增强其功能。例如,SublimeLinter可以进行实时代码检查,...
3个步骤: 选择Sublime Text主题文件(在“ example”文件夹中有示例) 更改亮度和对比度的值保存结果**它是使用以下技术构建的:** gulp,react es6,babel es7批注,redux,node-webkit 示范影片 ...
1.emmet 2.jQuery 3.sublimecodeintel 4.ColorHighlighter显示颜色 ...6.AlignTab正则对其 7.Sidebarenhancements侧边栏 8.DeleteBlankLines 删除空行 9.All Autocomplete-自动补全css...18.Babel es6高亮 19.bootstrap
- **选择代码编辑器**: 选择一个支持ES6语法高亮和代码提示的代码编辑器,如Visual Studio Code或Sublime Text,可以显著提高开发效率。 - 下载并安装你选择的代码编辑器。 - 安装ES6语法支持的插件或扩展。 通过...
使用 Gulp、Babel 和 Browserify 使用 ES6 的简单工作流 安装 进入正确的文件夹并运行npm install 。 要构建应用程序,只需运行gulp 。 您可以“监视”项目以使用gulp watch自动构建代码。 要测试包,您可以在...
ES6 沙盒 用于测试一些 ES6 代码和示例的小沙盒项目。... subl es6.sublime-project 这将在您的崇高中打开项目。 你现在应该有额外的构建系统Babel compile ,选择它。 现在当你想重新编译你的文件时,只需点击<CMD> 。
- **文本编辑器**:对于代码编辑,可以选择Visual Studio Code、Sublime Text、Atom等流行的开源编辑器,它们都具有丰富的插件支持和代码提示功能,可以极大地提高开发效率。 2. **本地服务器**: - **Node.js**...
Ecmascript崇高语法Ecmascript / Javascript / ES6 / ES2015 / Babel或您拥有的东西的崇高语法语言定义。 Sublime语法仅在Sublime Text 3.0中可用。 1.6的新功能嵌套语法突出显示多行模板文字的常见用法是嵌入代码段...