各位用 Sublime Text 写 Javascript 的同学，对默认的高亮效果满意吗？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

Meteor

JSLint - a Javascript code quality tool

jsFiddle

D3.js

WebStorm

推荐书目

Javascript 权威指南第 5 版

Closure: The Definitive Guide

这是一个创建于 4247 天前的主题，其中的信息可能已经有所发展或是发生改变。

很早就有疑问 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

刚刚更新了两款 Sublime Text 插件：

https://sublime.wbond.net/packages/Emmet%20Css%20Snippets
https://sublime.wbond.net/packages/Syntax%20Highlighting%20for%20Sass

下周开始专心写这个插件

高亮

Text

Sublime

40 条回复 2014-05-12 22:02:53 +08:00

zzNucker

2014-05-09 18:05:39 +08:00

高亮效果确实不咋地。。。。

notcome

2014-05-09 18:06:20 +08:00 via iPhone

NodeJS 受不了……

P233

2014-05-09 18:15:42 +08:00

@zzNucker
@notcome 这个周末折腾一下，目测难度不大，如果能提供一些建议就更好了 :)

zythum

2014-05-09 18:24:56 +08:00

@P233 欢迎开发!!

MForever78

2014-05-09 18:47:06 +08:00

@notcome 同。 NodeJS 简直痛苦。 module.exports 都不支持高亮。

notcome

2014-05-09 19:01:32 +08:00

@P233 啊没注意到你说要开发高亮包……
好吧自从侥幸得到了 Atom 的 key 之后就一直用 Atom 了，因为无弹窗哈哈。不过越用越感觉不如 Sublime Text。考虑迁移回来。

jsonline

2014-05-09 19:05:34 +08:00

写 JS 居然不用 WebStorm？

P233

2014-05-09 19:10:21 +08:00

@zythum 多谢朱一大大支持

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

@notcome 其实 TextMate/Sublime 高亮文件转 Atom 只需要一个命令

zythum

2014-05-09 19:11:34 +08:00

@notcome 买个授权就不弹窗了 ...嘻嘻
其实 Chocolat也是不错的。 js的语法提示杠杠的现在貌似也能装插件了。

zythum

2014-05-09 19:13:06 +08:00

@P233 - -. 这个不用谢吧... 我只是说了句欢迎..

hanai

2014-05-09 19:37:34 +08:00

Chocolat 写 Javascript 不错哦

wuyazi

2014-05-09 19:53:08 +08:00

支持支持，最近学node中

teddy1004

2014-05-09 20:27:16 +08:00 via iPhone

Sublime Text 写js太不爽，补全特别拙计！

jiyinyiyong

2014-05-09 20:59:39 +08:00

有个 ES6 的包, 比自带的 JS 好看些

Artotria

2014-05-09 21:07:57 +08:00

还好吧，有高亮插件的

P233

2014-05-10 03:19:55 +08:00

@zzNucker
@notcome
@zythum
@MForever78
@hanai
@wuyazi
@teddy1004
@Artotria

打好了草稿，明天继续折腾

P233

2014-05-10 03:20:26 +08:00

@jsonline 尝试过，不太习惯

P233

2014-05-10 03:26:52 +08:00

@jiyinyiyong 这个吧 https://github.com/Benvie/JavascriptNext.tmLanguage 尝试了一下，离想象中的还差一点

rekey

2014-05-10 12:36:11 +08:00

买个webstorm吧。貌似也就200多。。。

jsonline

2014-05-10 13:54:59 +08:00 via Android

再尝试WebStorm吧，世上没有更好的 JS IDE

P233

2014-05-10 16:04:09 +08:00

@rekey
@jsonline 有点慢，敲几个字 CPU 就飙升了 :(

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

另外，写高两包的乐趣在于熟悉语言的各种用法 :)

MForever78

2014-05-10 20:41:12 +08:00

加油！支持一个

yibuyisheng

2014-05-11 11:21:10 +08:00

说sublime不好的，应该都是没有深入使用过的吧。。。sublime编辑js很爽的，函数名/参数/属性/方法高亮不一样不影响开发吧。。。ctrl＋r可以直接搜索当前文件的函数。sublime的go anywhere用过吗？比较过sublime和其他编辑器打开几十兆文本文件的性能吗？喜欢js智能提示的人，要么是对js不熟悉的，要么是强大IDE重度依赖者吧？

P233

2014-05-12 03:50:23 +08:00

@MForever78 Thanks
@yibuyisheng sublime text 的 goto 功能非常好用

yangff

2014-05-12 07:45:50 +08:00

话说我在Linux下用sublime经常崩溃，似乎是自动完成引起的，有人有类似情况吗》

karthao

2014-05-12 08:21:35 +08:00 via Android

还得考虑js混合在html里的情况。

lingyired

2014-05-12 09:02:11 +08:00

怎么没有截图。。

WildCat

2014-05-12 10:09:21 +08:00 via iPhone

古人云：

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

楼主，快到碗里来！

learnshare

2014-05-12 10:28:56 +08:00

我觉得 IDE 略重，Sublime 完成一般的工作效率还是可以的。建议楼主写一个配色生成工具，一次性解决问题

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

2014-05-12 13:08:51 +08:00 via iPhone

jetbrain的ide真是没得说

hkongm

2014-05-12 14:14:43 +08:00

monokai很赞的~个人觉得无二

P233

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

2014-05-12 18:02:30 +08:00

@WildCat 忘了 @ 了，看上一句机器带不动

@learnshare 还真写过配色工具，很久以前的，已经很久没管了 https://github.com/P233/Blank-Color-Scheme

P233

2014-05-12 18:05:07 +08:00

@jsonline 求指点重构功能，菜鸟略不懂

learnshare

2014-05-12 18:08:41 +08:00

@P233 配色工具可以模仿一下各种 IDE，然后多种配置文件导出，就 OK 了，再复杂的功能也不必要，毕竟不是用来折腾的

P233

2014-05-12 18:17:04 +08:00

@learnshare 也不算太折腾把，庖丁解牛把 JS 语言的结构拆分一下，当做学习了

learnshare

2014-05-12 18:54:36 +08:00

@P233 入过此坑，琢磨了一个半残废的 highlight 功能

P233

2014-05-12 19:24:10 +08:00

@learnshare 求参考

learnshare

2014-05-12 22:02:53 +08:00

@P233 很烂的代码，已经丢掉了