Sublime插件支持Sass编译和Babel解析ES6 .sublime-build文件初探
用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了..
同事说,他的WebStorm简直太方便,自身集成了很多方便的工具,不用配置太多
哈哈哈哈但我还是更喜欢用ST
如果要将Sass编译成css文件,安装相应的编译工具就行,然后在命令行直接sass a.scss:b.css 编译就行了
要将ES6解析成ES5的语法形式,同样的安装好babel工具,命令行执行 babel a.js -o b.js 即可
但始终是要先打开命令行手动打命令,略为麻烦,对此可以使用相应的 watch 参数来监听文件的改变,即时编译
但更好的方案似乎是:不用另外打开cmd命令行,直接即时地在编辑器/IDE中解析编译
搭飞机前往:Sass支持 Babel支持 Sublime-build 其他小tips
一、Sass支持
要让ST支持Sass,第一步应该是支持Sass的语法,Ctrl+Shift+P --> install --> Sass 安装Sass插件
第一个是语法渲染的支持,下面那个就是 Sass Build 。也安装了,用来编译成CSS
(其实Sass Build插件的实现不难,下方会稍微介绍;要实现编译,首要的条件是机子本身已经配好了Sass环境,插件做的只是调用)
安装好这个插件之后,将Scss文件保存后,按快捷键 Ctrl+B 即可将其编译成CSS文件,默认路径为当前目录下
看看Tools下的Build System,可以发现多了两个build配置,即为Sass Build工具提供的,第一个为简单地编译,第二个在编译之后还进行了压缩
想选下面那个,可以手动勾选,或者想编译时按快捷键 Ctrl+Shift+B 选择选项即可
默认是CSS文件被解析到当前目录下,我们可以自定义路径或文件名
点击新建一个New Build System,放上这个配置
{"cmd": ["sass", "--update", "${file_base_name}.scss:./css/${file_base_name}.css", "--style", "expanded"],"selector": "source.sass, source.scss","line_regex": "Line ([0-9]+):","windows":{"shell": "true"}}
cmd中即为命令与参数的结合,类似一般的Sass编译命令,通过使用一些内置的变量,我们就能自定义CSS文件的生成路径及文件名
很好,能在ST编辑器中好好编译了,但还缺了点什么。目前保存文件之后还得手动按快捷键编译
再装个插件 SublimeOnSaveBuild ,提供保存即执行命令的支持
装好插件之后最好重启一下ST,然后保存文件时,即可按照你Build System中的配置,执行配置中的命令
可以看看它的配置信息
{"filename_filter": "\\.(css|js|sass|less|scss)$","build_on_save": 1 }
定义了对某些文件进行监听,如果不想保存时即构建,就将值设为0即可(注意,作者 对Default选项设为了只读,想更改就在User配置项中更改覆盖即可)
二、Babel支持
一般使用Babel解码器将ES6语法解析成ES5语法,在ST编辑器中装个插件 babel-sublime 即可支持Babel
这个插件首先识别了ES6或JSX的语法形式进行渲染,其次还特别建议使用这个主题插件做更好的代码着色
除此之外,它还提供了Babel的转码,不过这个功能有些缺陷。先看其配置项
注意要将这里的路径配好,设置成环境变量的路径,让插件可以在次寻找 babel或babel-core 命令,否则就会报错 Couldn't find babel or babel-core
然后,类似在命令行中执行babel命令的前提:先在当前目录配置好.babelrc文件,定义转码规则,在当前目录放置好依赖包(因为这里找不到全局的)
比如我使用了三个规则,就在当前路径下npm 装好 babel-preset-es2015、babel-preset-react、babel-preset-stage-3
{"presets": ["es2015","react","stage-3"],"plugins": [] }
然后在es6.js下快捷键Ctrl+Shift+P,输入babel,选择 babel transform 执行即可
如果顺利的话,就能看到es6文件已经转换为es5语法,然而然而,只是生成了匿名文件,不符合我们的预期
我已经查了很久,始终不知道应该在哪里设置生成文件的路径,所以这是个大缺陷呀,况且还得另外打命令
所以,自己配置Build选项吧,类似Sass那样
要注意的是,我们的目标:要智能,在Scss文件下保存就即时编译成CSS文件,在ES6语法文件下保存就即时解析成ES5语法格式
三、sublime-build
所以还是先好好去看 Sublime-build的文档 吧
在这里,首要关注三个配置就行
1. cmd 上文好像已经提过了,其实就是一般的命令拼接
2. selector 可用来智能过滤,即在匹配的文件才执行该build规则
前提是开启了自动匹配的规则,即
如上文提到的SASS的build配置,匹配到才执行
"selector": "source.sass, source.scss",
为了解析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:\Users\Administrator\AppData\Roaming\Sublime Text 3\Installed 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的配置跟这个有相似之处
Sublime插件支持Sass编译和Babel解析ES6 .sublime-build文件初探相关推荐
- 安装Sublime Text 支持Go插件
1.安装GO 进入GO的国内网站,下载安装 https://golang.google.cn/ 2.环境变更配置 重要的是GOROOT 和 GOPATH, 一般安装在C:\GO目录下, 会自动配置GO ...
- Sublime text代码补全插件(支持Javascript、JQuery、Bootstrap框架)
Sublime text代码补全插件(支持Javascript.JQuery.Bootstrap框架) 插件名称:javascript-API-Completions 支持Javascript.J ...
- HBuilderX 安装 scss/sass编译 插件报错 binding.node 解决方案windows版
HBuilderX 安装 scss/sass编译 插件报错 binding.node 解决方案windows版 官方给出的解决方案 让我们在命令行执行下面三行代码 [0;31m--> LibSa ...
- Sublime插件安装
1.Package Control 插件管理器 1)在Sublime中打开View --> Show Console,将以下代码复制到输入框中后按回车键 import urllib.reque ...
- 实用的sublime插件集合 – sublime推荐必备插件
Sublime Text 3 安装Package Control 原来Subl3安装Package Control很麻烦,现在简单的方法来了 一.简单的安装方法 使用 Ctrl+`快捷键或者通过 Vi ...
- 最全的sublime插件整理
Package Control 1.插件管理器 1)在Sublime中打开View –> Show Console,将以下代码复制到输入框中后按回车键 import urllib.reques ...
- sublime插件配置说明文档
clone地址: git clone git://github.com/bxcn/sublime_plugins_config.git 安装Sublime Package Control 安装步骤 第 ...
- sublime mysql插件_开发者最常用的8款Sublime text 3插件
Sublime Text作为一个尽为人知的代码编辑器,其优点不用赘述.界面整洁美观.文本功能强大,且运行速度极快,非常适合编写代码,写文章做笔记.Sublime Text还支持Mac.Windows和 ...
- sublime Text3下sass环境配置(windows)
导语: 由于准备学习 Sass,并且我习惯使用sublime编辑器,折腾了下sublime下如何配置 sass,记下遇到的坑,有什么问题欢迎交流. 一.安装Ruby环境 Sass依赖于ruby环境,所 ...
最新文章
- webdriver Google-chrome crashed
- 动态代理机制之查看一个类或接口中有哪些方法
- 重新复习一下JDK14的9大重磅特性
- 报录比2比1计算机学校,比报录比更值得关注的,是推免率!内含20考研985院校推免数据...
- FindBugs和JSR-305
- Linux 文件颜色含义
- LeetCode 900. RLE 迭代器(模拟/二分查找)
- 计算机的发展英语600词,程序员必备的600个英语词汇
- c语言 取随机字符串,C语言之获取32字节随机数的字符串
- linux6磁盘绑定,关于Linux 6使用udev绑定共享磁盘的测试
- android腾讯微博吹一吹实现原理
- MATLAB把型线图画静水力曲线,静水力曲线计算与绘制指导书
- Python制作一个科学计算器
- SiteMesh框架
- 如何免费下载百度文库,豆丁网等付费文章
- VS2015密钥 VS2017密钥
- lwj_C#_homework 攻城车 攻击 WASD移动
- 如何保留5个有效数字输出c不4舍5入_好吃好喝不发胖,这样过年才健康团
- UVA 10451 Ancient Village Sports UVA 11909 Soya Milk UVA 11152 Colourful Flowers
- 品牌制造商做电子商务的成本结构分析
热门文章
- 有关采用SMIv2 Internet协议的SNMPv2 MIB
- the more wites of color
- 一部IT电影,《反托拉斯行动》,主角加里-文斯顿(蒂姆·罗宾斯饰)影射比尔·盖茨...
- - -(我最近的开发..)
- AVS 通信模块之HTTP2Transport
- centos7 安装 mysql5.7
- 201521123070 《JAVA程序设计》第2周学习总结
- java中finally与return的测试方法
- Getting Started with Node.js LoopBack Framework and IBM Cloudant
- BigMemroy系列文章--11. BigMemory中的SizeOf问题