zencoding自从2009年因html,css的扩展而风靡业界,而webstorm自从2.0之后就已经集成。 无意中被不断输入的console.log,console.dir搞的很恼火,所以才有了今天的js之webstorm。由于其它编辑器对zencoding的外延不是做的很好,现下流行的编辑器里边,只有webstorm才可以扩展以下提到的命令。当然,他除了扩展js之后,还可以扩展:xml,php(phpstorm),xsl,用户也可以自定义添加:JSP,SQL,Haml或者其它的。只是提供一个思路,抛砖引玉,具体的还要看每个人自己的code习惯。webstorm比eclipse,aptana中的更改zencoding方便之处,不用重启。而比其它ide的好处在于,他可以更改。 1. File -> Settings -> Live Templates (即可手动添加, 也可以下载我添加好的文件,下载后放在:C:\Users\用户名\.WebIde10\config\templates) 这里提几个比较重要简单的扩展原则。 2. 上面文件,左边即为输入部分,右边为扩展后,如果手动添加,还需要在下方 : No applicable contexts yet. Define Define中选择你的类型:
//zencoding-js // C:\Users\jikey\.WebIde10\config\templates //core try: trycatch ae: addEventListener at: attachEvent rn: return null p: prototype c: constructor ag: arguments ri: return this; l: length; v: var tg: tagName() rfa: return false; del: delete rtr: return true; re: removeEventListener det: detachEvent lh:location.href lo: location tr: true; fa: false; st: setTimeout() stf: setTimeout(function(){}); si: setInterval(); sif: setInterval(function(){}); r: return; // dom相关 w: window d: document db: document.body di: document.getElementById($END$); dn: document.getElementsByName($END$); dw: document.write($END$); dct: document.createTextNode de: documentElement; gt: getElementsByTagName df: document.createDocumentFragment() dc: document.createElement(); qs: querySelectorAll // function 相关 bb: (function(){ $END$ })(); f function $END$(){ } fc: // 创建一个对象 function $INDEX$(){ } $INDEX$.prototype = { name: function (){ } } mf: $END$: function(){ } va:var $END$ = []; vf: var $END$ = function(){ } vo: var $END$ = { name: function(){ } } rm: return { $end$: function(){ } } // 流程控制 fi: for (var $VAR$ in $ARRAY$) { $END$ } for: for(var i=0,len=arr.length; i<len; i++{ $END$ } if: if($END$){ } ifel: if($END$){ } else { } while: while($END$){ } ifif: if($end$){ } else if(){ } el: else{} elif: else if(){} ib: insertBefore ap: appendChild dba: document.body.appendChild // jQuery #: $('#$END$') j: $('$END$') >: $('.$END$') fn: (function($){ $.fn.$END$ = function(options){ var defaults = { }; opts = $.extend({}, defaults, options); return this.each(function(){ }); } })(jQuery); ji:$(this) jfl:$().filter() t.:that.me = me; i.:this.me = me; i: this t that jc: $().click jh: $().hover jl: $().live('click', function(){ }); jd: $().delegate('click', function(){ }); // 其它 fu:function wd;width() h:height(); $src: <script type="text/javascript" src="https://ajax./ajax/libs/jquery/1.7.1/jquery.min.js"></script> // firebug debug cl: console.log($END$); cti:console.time('1'); cte:console.timeEnd('1');
|
|