Emacs与JavaScript、CSS、Html

ChongQingJin28 2013-05-25 05:56:11

用Emacs结合auto-complete写了点小工具

主要是针对自动补全的（应该是最基础的工具了吧）

图片的顺序和我写工具的顺序是相反的。
html的工具是比较完善的，所以他的图片会多一些。
而JavaScript最晚，所以功能还比较简单。
但是，只要html能有的功能，JavaScript同样是可以有的。

说明如下：

图片 1 ：JavaScript ，当你输入“writ”的时候会补全。不用再多输入一个“document了”

图片 2 ：JavaScript ，你可以用“app”直接得到 navigator.appName。
（这是很简单的，但他不能根据 a = document 而知道a也可以有write）
（动态的补全就不是这么简单了好像需要语法分析但是好像JS2-mode有语法分析的）
（语法分析好像也不能解决eval的问题所以实际上只是静态的分析而已）
（分析的结果对于补全来说，应该是一个替换规则，比如说会把 a 替换成 document）
（应该先把JS2-mode看明白再说。（好像同样适用于Lua的！））

图片 3 ：CSS ，你输入font之后会得到的。（很一般的功能基本上任何的ide都有的）

图片 4 ：CSS ，在可选值之间的切换（不是补全值，是切换值）。比如 align-text ，要么是left、要么是right、center。

图片 5 ：Html ，对html标记的补全（同图片 3）

图片 6 ：Html ，补全html之后的。他不是给你一个<html></html> 。而是一个有《head》、《title》、《body》的《html》（你可以改，而且超简单 Alt+d 即可。）

图片 7 ：Html ，补全 a 之后，让你可以在两个string之间做选择。

图片 8 ：Html ，在图片 7 中选择了第一个之后。补全 a 的属性（因为我的数据库不全，所以属性很少。但是因为数据库是文本文件，所以想要修改数据库是非常方便的。（哪怕是用sqlite我都会觉得不好））

图片 9 ：Html ，与CSS的联合。你可以在一个tag上按快捷键，然后会在另一个文件里列出tag的路径。
（应该会有点用处的吧）

图片10 ：Html的数据库修改，图片6中提到的Alt+d。（其实是非常简单的只是doc、example、attribute）
（如果你想加入别的元素也是一样的，我还没有想好要加上什么东西）

你可以在 github.com/zhouchongzxc 上看到源码及相应的数据库文本文件（还没有JS的，因为现在与Html有冲突）

...全文

305 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

ChongQingJin28 2013-06-05

打赏
举报

回复2楼 —————————— |楼主涉猎很广啊 | |js和css也玩 | ——————————— 因为我想看看mongodb 他是用js的

ChongQingJin28 2013-06-04

打赏
举报

jslint 可以检查js文件中的错误。写了几行代码，可以根据jslint的错误信息自动修改代码。主要是加空格与代码缩进行。

ChongQingJin28 2013-06-01

打赏
举报

谢楼上的回复。
关于用Pycharm或是Apatana对JS的自动补全的比较（我没有用过~只是做了点简单的测试~可能测试的不够完整）
说明：#“~”其实是代码中的空格

比较1.

对于代码~：
var~zx~;
zx~=~"";
var~zxc~=~zx;
var~zxcv~=~zxc;
var~zxcvb~=~zxcv;

zxcvb.~在Apatana中是可以补全的~但是在Pycharm中就没有那么有用了（或许我这个例子根本就没有什么用~有谁样定义变量呢？）

比较2.

对于代码~：
var~zx~=~document.URL("");
zx.~~~~在Aptana中好像就不行了~但是在Pycharm中却可以~（这一个功能比上面的功能要有用的多~由此可见Pycharm比Aptana应该更好）
（由此我们可以知道Pycharm能够记住函数调用的返回类型~而Aptana却做不到这一点）

比较3.

对于代码~：
function~f(){
~~~~zxc.~在Aptana与Pycharm中都是可以补全的~好像也可以说的过去（因为他的确可以使用变量zxc）
}
var~zxc~=~90;

但是如果代码是这样的话~：
function~f(){
~~~~zxc.~在Aptana与Pycharm中还是可以补全的~，但是正确的方法应该是提示你他是undefined~（所以Aptana与Pycharm都不对）
~~~~var~zxc~=~"";~//他会将zxc定义为局部变量~所以说上面的zxc是没有经过初始化的（更不能存取全局变量的值）
}
var~zxc~=~90;
（由此我们可知~这两个工具并没有能很好的处理变量的scope~，但是好像也没有人会写这样的代码）

在Emacs的js2-mode中~，可以分析JS文件~，并生成AST树~，但是他的作用只是检查语法错误~，对代码补全并没有提供一点帮助~。
（而且分析的速度不是很快~比如分析以便jlint的话需要好几秒（可能是我的电脑不够好~，但Pycharm打开jlint的速度都比他快）
还有一点就是不能够动态的分析（我的意思是~只分析你刚刚写的代码~然后加入到已经有的AST树中~或将你删除的代码对应的AST树元素一并删除
如果想让js2-mode的ast树对自动补全提供支持~，好像有不少的代码需要写~，应该是我自己所不能及的~，
（比如说用C++替换elisp代码以便加快分析的速度~，增加动态分析的功能~，各种对象、函数的数据库信息）
还是以后再说吧（不知道还有没有以后）））

最近看了看JQuery（一个javascript的库）
好像如果用JQuery的话~，自动补全就简单的多了（因为他里面只有一种类型~不用再区分String、Number、Function、Document、Navagator了）
Emacs中有一个JQuery-doc的el文件~，好像是不错的（把他改的更好我还是可以做的到~，应该从他开始）
JQuery相对于JavaScript~，就像是python相对于C~。python用C实现~，但却比C更容易使用。