关闭 x
IT技术网
    技 采 号
    ITJS.cn - 技术改变世界
    • 实用工具
    • 菜鸟教程
    IT采购网 中国存储网 科技号 CIO智库

    IT技术网

    IT采购网
    • 首页
    • 行业资讯
    • 系统运维
      • 操作系统
        • Windows
        • Linux
        • Mac OS
      • 数据库
        • MySQL
        • Oracle
        • SQL Server
      • 网站建设
    • 人工智能
    • 半导体芯片
    • 笔记本电脑
    • 智能手机
    • 智能汽车
    • 编程语言
    IT技术网 - ITJS.CN
    首页 » UI前端 »前端工程师的神器Sublime Text使用介绍

    前端工程师的神器Sublime Text使用介绍

    2014-12-23 00:00:00 出处:Lucida
    分享

    Sublime Text算是前端开发中最常使用的文本编辑器之一,对于前端工程师来说熟悉手中的编辑器就像熟悉筷子一样重要。Sublime Text的入门文章网上已经太多了,本文只关注能提升前端工程师工作效率的技巧和插件。

    ninjas on sublime text

    语法高亮

    一晃已经接近2015年,过去数年里前端开发的发展日新月异:浏览器里充斥着新增加的CSS特性(以及这些特性的N种实现),JavaScript也不像原来那样只用作给单一页面加点特效或者提交Ajax请求这么简单,我们手边有了Jade,Sass,TypeScript等等一打甚至更多种能生成HTML,CSS,JavaScript的语言,默认安装的Sublime Text已经完全无法提供这些新的语言、新的特性所需要的语法高亮和智能感知。这一节介绍了一些Package来辅助Sublime Text实现更好地语法高亮。

    JavaScript Next

    JavaScript Next 提供了比默认JavaScript Package更好的语法高亮,而且他完美支持ECMAScript 6,假如你知道ECMAScript 6,或许也感受过默认安装的Sublime Text不支持modules,succinct methods, arrow functions, classes, generators, and accessors 带来的不便。

    javascript next

    CSS3

    嗯是的,就是CSS3,默认安装的Sublime Text对CSS3的支持让人抓狂,帧动画?别开玩笑了你只会看到一片白色的纯文本一样的代码。事实上不光CSS3,我建议用CSS3 Package完全替代原来的CSS Package来完成语法高亮。

    css3

    SCSS

    Sass的开发人员们,我建议你们使用SCSS Package,是的我也觉得有.sass和.scss是很脑残的设定,但是我想大多数Sass开发人员实际上写的都是.scss,毕竟.scss更“像”我们熟悉的原生CSS。

    scss

    当然Stylus和LESS也是写CSS的好工具,事实上我更喜欢LESS。

    其他Package

    CoffeeScript的开发人员少不了Better-Coffescript,这个Package比Package Control里官方的CoffeeScript Package要好得多,后者已经很久没有维护更新了。嗯,TypeScript也是个不错的选择,当然我想visual Studio或许是更好地TypeScript工具。

    Haml Package为默认的工具增加了嵌套语言的支持,包括JavaScript,CSS,Sass等等,语法高亮比以前更方便。Slim和Jade也提供了各自的语法高亮支持,这两种语言我还不是非常了解,假如有更好的插件提供请一定分享出来。

    插件

    Sublime Text有无数有趣又有用的插件,社区的支持也是我一直用Sublime Text的原因。假如我们找一打工程师坐下来讨论Sublime Text的插件,哦算了我们还是聊聊宇宙和平吧…… 前端工程师常用的插件比如CTag不再赘述,这里说几个有趣的。

    Color Highlighter

    这个插件我等了很久了,我最早用Sublime Text写CSS时候就在想“这堆颜色码谁知道是什么颜色”… Color Highlighter这个插件会检测CSS文件中的颜色码,不论是Hex码或者RGB码都能很好的显示。Color Highlighter能够设置成用背景色或者边框提示颜色,我一般在Settings里做这样的设置:

    language-http" { "ha_style": "filled", "icons": false }

    这样设置之后的效果是这样的:

    color highlighter

    更赞的是最近这个插件也支持了Sass、LESS以及Stylus,这也使他成为我的必备插件之一。

    Emmet

    嗯,我个人不喜欢Emmet这个名字,反倒是以前他叫做Zen Coding的时候更容易被人记住。大量使用Emmet只有一个坏处,那就是你可能会忘记把标签成对打两遍的好习惯。

    用Emmet写HTML很快,真的很快。简单的把标签和需要的class名称写清,嵌套结构和闭合标签他会帮你搞定的。Jade、Slim或者Haml的支持也很好。

    emmet html

    Sublime Linter

    经常对代码做lint是个好习惯,这不一定是为了检测语法错误,还能减少潜在的冲突、不兼容等。后端工程师有CLint一类的工具,Sublime Text中对JavaScript的Lint支持也很好。Sublime Linter可以在编译时就很方便的帮助我们lint代码。虽然我们通过grunt等构建工具,也可以在构建网站时强制进行lint检测,但是在编辑时的实时监测总是方便很多。

    主题/配色

    我想合适的主题和配色是能够潜在提高工程师效率的重要工具,虽然用白底黑字的记事本也能写出稳固高效的代码,但是为了我们的心情和眼睛,还是选几款好的配色比较好。前端工程师对设计和美学更加敏锐,虽然不是设计师,但我们知道“什么是美的”。在Sublime Text中改变视觉效果有两部分设置,分别是代码高亮的“配色”以及编辑器本身的“主题”(包括了Tab栏、侧边栏以及Command窗口等)。顺便插播一下,最新版本的Sublime Text 3能够指定侧边栏的文件图标了~

    记得知乎上有为什么大部分程序员都喜欢用黑色界面这样的问题,嗯…… 不管你使用亮色系还是暗色系的主题(事实上我在不同的编辑器分别用了这两种),下面这几种都非常值得推荐:

    Solarized Dark

    Solarized在事实上设计了一套配色的标准,而非单纯的几个编辑器配色文件。我们可以在官网上找到大量流行IDE的Solarized配色方案,在GitHub等开源网站上更多!几乎所有数的出来的编辑器、终端工具等都可以找到Solarized风格的配色。很多顶级工程师的工具和博客也使用了这一套配色。

    solarized dark

    Cobalt2

    Cabalt2这套主题是本文原作者Wes Bos推荐的主题,这套主题经过了5年以上的修改和演进。它的特点在于通过高对比度的方案吸引使用者的眼球,把注意力放在需要注意的地方。

    cabalt2

    Seti UI

    黑,很黑,用来形容Seti UI不算过分,这套主题的蓝色很挑眼,我推荐这款主题只是因为该文太长了需要点儿亮色~

    setiui

    Goto Anything

    假如你之前用过Coda、Textmate或者Dreamweaver你可能对侧边栏上的文件导航及其依赖。Sublime Text带来了Goto Anything特性,只需要按下简单的 (Ctrl on Windows) + P 就可以前往任何你想到达的位置,这是你能想到的打开文件的最快的方法。智能感知的提示框提供了模糊匹配,我们不需要记住准确的文件名,也不需要记住他在哪层文件夹里。

    Goto Anything不光支持文件名,事实上他还支持前往某行,你可以使用“jquery.js:205:15”来前往jquery.js文件的205行15列。使用“@”可以前往文件里的函数、方法等等成员,再方便不过。

    goto anything

    上一篇返回首页 下一篇

    声明: 此文观点不代表本站立场;转载务必保留本文链接;版权疑问请联系我们。

    别人在看

    hiberfil.sys文件可以删除吗?了解该文件并手把手教你删除C盘的hiberfil.sys文件

    Window 10和 Windows 11哪个好?答案是:看你自己的需求

    盗版软件成公司里的“隐形炸弹”?老板们的“法务噩梦” 有救了!

    帝国CMS7.5编辑器上传图片取消宽高的三种方法

    帝国cms如何自动生成缩略图的实现方法

    Windows 12即将到来,将彻底改变人机交互

    帝国CMS 7.5忘记登陆账号密码怎么办?可以phpmyadmin中重置管理员密码

    帝国CMS 7.5 后台编辑器换行,修改回车键br换行为p标签

    Windows 11 版本与 Windows 10比较,新功能一览

    Windows 11激活产品密钥收集及专业版激活方法

    IT头条

    无线路由大厂 TP-Link突然大裁员:补偿N+3

    02:39

    Meta 千万美金招募AI高级人才

    00:22

    更容易爆炸?罗马仕充电宝被北京多所高校禁用,公司紧急回应

    17:19

    天衍”量子计算云平台,“超算+量算” 告别“算力孤岛时代”

    18:18

    华为Pura80系列新机预热,余承东力赞其复杂光线下的视频拍摄实力

    01:28

    技术热点

    MySQL基本调度策略浅析

    MySQL使用INSERT插入多条记录

    SQL Server高可用的常见问题

    3D立体图片展示幻灯片JS特效

    windows 7上网看视频出现绿屏的原因及解决方法

    windows 7 64位系统的HOSTS文件在哪里?想用它加快域名解析

      友情链接:
    • IT采购网
    • 科技号
    • 中国存储网
    • 存储网
    • 半导体联盟
    • 医疗软件网
    • 软件中国
    • ITbrand
    • 采购中国
    • CIO智库
    • 考研题库
    • 法务网
    • AI工具网
    • 电子芯片网
    • 安全库
    • 隐私保护
    • 版权申明
    • 联系我们
    IT技术网 版权所有 © 2020-2025,京ICP备14047533号-20,Power by OK设计网

    在上方输入关键词后,回车键 开始搜索。Esc键 取消该搜索窗口。