V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
P233
V2EX  ›  JavaScript

各位用 Sublime Text 写 JavaScript 的同学,对默认的高亮效果满意吗?

  •  
  •   P233 · 2014-05-09 18:01:37 +08:00 · 11025 次点击
    这是一个创建于 3850 天前的主题,其中的信息可能已经有所发展或是发生改变。
    很早就有疑问 Sublime Text 默认的 JavaScript 高亮效果有点怪异,比如 函数名/参数/属性/方法 等等在同一 js 文件中的高亮效果并不统一。也许是我菜,搞不懂结构(刚啃了一个星期的犀牛书,正在借助各种源码学习)。打算写个新高亮包深入理解 JS 的语言结构,并且设计更智能的自动补完提示。

    如果大家有同样的需求,能否说说不满意的地方。如果大家都说是完美高亮,那就是我的问题了。
    第 1 条附言  ·  2014-05-10 03:18:49 +08:00
    一口气花了三个多小时打的草稿,距离目标还很遥远,先敲定高亮效果,再尝试智能提示

    https://github.com/P233/Syntax-highlighting-for-JavaScript

    欢迎吐槽 :)
    第 2 条附言  ·  2014-05-12 03:50:38 +08:00
    40 条回复    2014-05-12 22:02:53 +08:00
    zzNucker
        1
    zzNucker  
       2014-05-09 18:05:39 +08:00
    高亮效果确实不咋地。。。。
    notcome
        2
    notcome  
       2014-05-09 18:06:20 +08:00 via iPhone
    NodeJS 受不了……
    P233
        3
    P233  
    OP
       2014-05-09 18:15:42 +08:00
    @zzNucker
    @notcome 这个周末折腾一下,目测难度不大,如果能提供一些建议就更好了 :)
    zythum
        4
    zythum  
       2014-05-09 18:24:56 +08:00
    @P233 欢迎开发!!
    MForever78
        5
    MForever78  
       2014-05-09 18:47:06 +08:00
    @notcome 同。 NodeJS 简直痛苦。 module.exports 都不支持高亮。
    notcome
        6
    notcome  
       2014-05-09 19:01:32 +08:00
    @P233 啊没注意到你说要开发高亮包……
    好吧自从侥幸得到了 Atom 的 key 之后就一直用 Atom 了,因为无弹窗哈哈。不过越用越感觉不如 Sublime Text。考虑迁移回来。
    jsonline
        7
    jsonline  
       2014-05-09 19:05:34 +08:00
    写 JS 居然不用 WebStorm?
    P233
        8
    P233  
    OP
       2014-05-09 19:10:21 +08:00
    @zythum 多谢朱一大大支持

    @MForever78 把 module 作为关键词,exports 作为属性高亮怎么样?

    @notcome 其实 TextMate/Sublime 高亮文件转 Atom 只需要一个命令
    zythum
        9
    zythum  
       2014-05-09 19:11:34 +08:00
    @notcome 买个授权就不弹窗了 ...嘻嘻
    其实 Chocolat也是不错的。 js的语法提示杠杠的 现在貌似也能装插件了。
    zythum
        10
    zythum  
       2014-05-09 19:13:06 +08:00
    @P233 - -. 这个不用谢吧... 我只是说了句欢迎..
    hanai
        11
    hanai  
       2014-05-09 19:37:34 +08:00
    Chocolat 写 JavaScript 不错哦
    wuyazi
        12
    wuyazi  
       2014-05-09 19:53:08 +08:00
    支持支持,最近学node中
    teddy1004
        13
    teddy1004  
       2014-05-09 20:27:16 +08:00 via iPhone
    Sublime Text 写js太不爽,补全特别拙计!
    jiyinyiyong
        14
    jiyinyiyong  
       2014-05-09 20:59:39 +08:00
    有个 ES6 的包, 比自带的 JS 好看些
    Artotria
        15
    Artotria  
       2014-05-09 21:07:57 +08:00
    还好吧,有高亮插件的
    P233
        16
    P233  
    OP
       2014-05-10 03:19:55 +08:00
    @zzNucker
    @notcome
    @zythum
    @MForever78
    @hanai
    @wuyazi
    @teddy1004
    @Artotria

    打好了草稿,明天继续折腾
    P233
        17
    P233  
    OP
       2014-05-10 03:20:26 +08:00
    @jsonline 尝试过,不太习惯
    P233
        18
    P233  
    OP
       2014-05-10 03:26:52 +08:00
    @jiyinyiyong 这个吧 https://github.com/Benvie/JavaScriptNext.tmLanguage 尝试了一下,离想象中的还差一点
    rekey
        19
    rekey  
       2014-05-10 12:36:11 +08:00
    买个webstorm吧。貌似也就200多。。。
    jsonline
        20
    jsonline  
       2014-05-10 13:54:59 +08:00 via Android
    再尝试WebStorm吧,世上没有更好的 JS IDE
    P233
        21
    P233  
    OP
       2014-05-10 16:04:09 +08:00
    @rekey
    @jsonline 有点慢,敲几个字 CPU 就飙升了 :(

    目前草稿的高亮效果已经跟 WebStorm 差不多了。打算加入智能补完,比如输入 Math 后紧跟的自动补完只有 round() random() 等等,以及代码跳转等功能。好好挖掘一下,Sublime Text 能够实现很多 WebStorm 的功能。

    另外,写高两包的乐趣在于熟悉语言的各种用法 :)
    MForever78
        22
    MForever78  
       2014-05-10 20:41:12 +08:00
    加油!支持一个
    yibuyisheng
        23
    yibuyisheng  
       2014-05-11 11:21:10 +08:00
    说sublime不好的,应该都是没有深入使用过的吧。。。sublime编辑js很爽的,函数名/参数/属性/方法 高亮不一样不影响开发吧。。。ctrl+r可以直接搜索当前文件的函数。sublime的go anywhere用过吗?比较过sublime和其他编辑器打开几十兆文本文件的性能吗?喜欢js智能提示的人,要么是对js不熟悉的,要么是强大IDE重度依赖者吧?
    P233
        24
    P233  
    OP
       2014-05-12 03:50:23 +08:00
    @MForever78 Thanks
    @yibuyisheng sublime text 的 goto 功能非常好用
    yangff
        25
    yangff  
       2014-05-12 07:45:50 +08:00
    话说我在Linux下用sublime经常崩溃,似乎是自动完成引起的,有人有类似情况吗》
    karthao
        26
    karthao  
       2014-05-12 08:21:35 +08:00 via Android
    还得考虑js混合在html里的情况。
    lingyired
        27
    lingyired  
       2014-05-12 09:02:11 +08:00
    怎么没有截图。。
    WildCat
        28
    WildCat  
       2014-05-12 10:09:21 +08:00 via iPhone
    古人云:

    曾经沧海难为水,除却WS不是云。

    楼主,快到碗里来!
    learnshare
        29
    learnshare  
       2014-05-12 10:28:56 +08:00
    我觉得 IDE 略重,Sublime 完成一般的工作效率还是可以的。建议楼主写一个配色生成工具,一次性解决问题
    jsonline
        30
    jsonline  
       2014-05-12 10:36:56 +08:00
    @yibuyisheng Sublime Sublime没有令人满意的重构功能,就凭这一点就无法满足我的需求。另外我还遇到过由于项目目录太深Sublime无法显示的问题,还有Ubuntu下Sublime里无法输入中文的问题。
    JS智能提示?哪个编辑器没有这功能?用IDE不是为了提示,是为了代码质量。我用WebStorm的时候我故意关闭智能提示我会乱说?
    http://www.zhihu.com/question/20936155 WebStorm 有哪些过人之处?
    WebStorm 有很多功能 Sublime 是永远无法提供的?为什么?因为一旦Sublime提供了这些功能,它就不是编辑器,而是一个IDE了。那么它的「快速」的特点就没有了。
    sectic
        31
    sectic  
       2014-05-12 13:08:51 +08:00 via iPhone
    jetbrain的ide真是没得说
    hkongm
        32
    hkongm  
       2014-05-12 14:14:43 +08:00
    monokai很赞的~个人觉得无二
    P233
        33
    P233  
    OP
       2014-05-12 17:59:59 +08:00
    @yangff 是不是插件造成的,一个一个排查一下?

    @karthao 如果自带的能够实现,这个也不是问题,HTML 包里应该有留给 JS 以及 CSS 的 scope

    @lingyired scope 命名还在调整中,调整完毕后再截图吧。

    贴一下昨天写完的插件功能录像

    https://dl.dropboxusercontent.com/u/4218559/2014-05-12%2008_25_17.gif

    这里用到了 Emmet,Emmet CSS Snippets,以及 Syntax Highligthing for Sass

    几个显著的改进是,不需要自动补完的地方不会提示,提示完属性后,只提提示属性值,将多余的提示降低到最少。只要要敲 2-4 个字母就可以 trigger 需要的代码,熟练之后哪里会出现哪些提示都很清楚了,想不起来也只需要扫一眼。

    顺便一说, Emmet CSS Snippts 原名是 Zen Coding Snippets,几乎跟 Emmet 是同时发布,然后跟 Emmet 作者沟通过几次,之后 Emmet 也加入了提示功能,不知道是作者本来有这个计划,还是这个包给了他灵感。

    但是 Emmet 的补完有几处不足让我坚持用 Sublime 原生的 snipptes:1. 会覆盖自定义 Snippets 如果有大量的自定义补完就很不方便了, 2. 略影响性能, 3. 对 scope 的判定跟高亮包不一致

    @jsonline 请看上图,我是自动补完的重度用户,倒不是因为记不住,而是提高效率。

    WebStorm 机器带不动
    P233
        34
    P233  
    OP
       2014-05-12 18:02:30 +08:00
    @WildCat 忘了 @ 了,看上一句 机器带不动


    @learnshare 还真写过配色工具,很久以前的,已经很久没管了 https://github.com/P233/Blank-Color-Scheme
    P233
        35
    P233  
    OP
       2014-05-12 18:05:07 +08:00
    @jsonline 求指点重构功能,菜鸟略不懂
    learnshare
        36
    learnshare  
       2014-05-12 18:08:41 +08:00
    @P233 配色工具可以模仿一下各种 IDE,然后多种配置文件导出,就 OK 了,再复杂的功能也不必要,毕竟不是用来折腾的
    P233
        37
    P233  
    OP
       2014-05-12 18:17:04 +08:00
    @learnshare 也不算太折腾把,庖丁解牛把 JS 语言的结构拆分一下,当做学习了
    learnshare
        38
    learnshare  
       2014-05-12 18:54:36 +08:00
    @P233 入过此坑,琢磨了一个半残废的 highlight 功能
    P233
        39
    P233  
    OP
       2014-05-12 19:24:10 +08:00
    @learnshare 求参考
    learnshare
        40
    learnshare  
       2014-05-12 22:02:53 +08:00
    @P233 很烂的代码,已经丢掉了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1496 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 17:15 · PVG 01:15 · LAX 09:15 · JFK 12:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.