Sublime插件支持Sass编译和Babel解析ES6 .sublime-build文件初探

为了解析ES6语法，现在就来新建一个Build选项，输入内容，保存该.sublime-build文件至相应目录下

{

    "cmd": ["babel", "${file_base_name}.js", "-o", "./es5/${file_base_name}.js"],
    "selector": "source.js",
    "line_regex": "Line ([0-9]+):",

    "windows":
    {
        "shell": "true"
    }
}

比如这里，匹配了*.js文件才执行cmd中的命令，命令中自定义了路径与文件名，规则类似一般的babel命令规则

在SCSS文件下保存和JS文件下保存，触发的build命令是不同的

如果只想在这两种文件保存时才触发build规则，在 SublimeOnSaveBuild 的配置中配置一下即可

"filename_filter": ".(css|js|sass|less|scss)$",

3.  variants

就是说通过这个配置，我们可以在一个Build选项中定义不同的命令，在构建时我们可以自行选择，比如我加入这么一段variants 配置

{

    "cmd": ["babel", "${file_base_name}.js", "-o", "./es5/${file_base_name}.js"],
    "selector": "source.js",
    "line_regex": "Line ([0-9]+):",

    "windows":
    {
        "shell": "true"
    }
    ,

    "variants": [
        {
            "name": "one",
            "cmd": ["echo", "one"],
            "shell": true
        },
        {
            "name": "two",
            "cmd": ["echo", "two"]
        }
    ]

}

在*.js文件中保存，就会出现三个命令选项，选择name为two的命令，即可输出two

关于sublime的build system 就简单介绍到这儿了，更多的还是去文档中心看看比较好

顺带提一下，如果想在内网或离线环境下安装ST插件，就手动转移插件包即可

Windows一般在系统的这个路径下：C:UsersAdministratorAppDataRoamingSublime Text 3Installed Packages

这种后缀的文件即为插件包，将其放到相应的Installed Packages目录下即可

而插件的配置信息一般在这个Packages目录下

比如想安装了模版插件 SublimeTmpl之后，快捷键Ctrl+Alt+H/C/J/P 可直接新建HTML/CSS/Javascript/PHP模版文件

如果想更改模版文件，就进入目录更改即可

另外，ST的 Preferences 下的 Package Settings 也提供了一个插件配置的入口

而对于WebStorm，要支持ES6语法，需在 Preferences > Languages & Frameworks > JavaScript 配置版本后，保存

直接点击 Add watch或通过 Preferences > Tools > File watchers 新建一个监听规则，用 babel 进行即时解析语法

自定义设置好相应项保存即可

可以看到，其实WS也是调用了机子本身的babel工具，调用命令行执行。ST的配置跟这个有相似之处

（编辑：应用网_丽江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!