2013年10月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。5312人阅读
软件应用（20）
& &&& &&& &&& &&& &&& & & & &&& &&& &&& &&&
1 代码格式化
1.1 快速格式化
1.1.1 C/C++/Java/C#
&&& 对于C/C++/Java/C#语言，预定义有十种风格选项，如下各种风格：
①Ansi/Allman/Bsd风格（格式缩进从下一行开始括号）
int&Foo(bool&isBar)&&
&&&&if&(isBar)&&
&&&&&&&&bar();&&
&&&&&&&&return&1;&&
&&&&else&&
&&&&&&&&return&0;&&
②Java风格（格式缩进直接紧接后面括号）
int&Foo(bool&isBar)&{&&
&&&&if&(isBar)&{&&
&&&&&&&&bar();&&
&&&&&&&&return&1;&&
&&&&}&else&&
&&&&&&&&return&0;&&
③Kernighan_Ritchie风格（格式缩进使用Linux方式括号）
int&Foo(bool&isBar)&&&
&&&&if&(isBar)&{&&
&&&&&&&&bar();&&
&&&&&&&&return&1;&&
&&&&}&else&&
&&&&&&&&return&0;&&
④Stroustrup风格（格式缩进使用stroustrup方式括号，缩进使用5个空格）
int&Foo(bool&isBar)&&&
&&&&&if&(isBar)&{&&
&&&&&&&&&&bar();&&
&&&&&&&&&&return&1;&&
&&&&&}&else&&
&&&&&&&&&&return&0;&&
⑤Whitesmith风格（格式缩进使用下一行且缩进的括号）
int&Foo(bool&isBar)&&&
&&&&if&(isBar)&&
&&&&&&&&{&&
&&&&&&&&bar();&&
&&&&&&&&return&1;&&
&&&&&&&&}&&
&&&&else&&
&&&&&&&&return&0;&&
⑥Banner风格（格式缩进使用直接紧接和缩进的括号）
int&Foo(bool&isBar)&{&&
&&&&if&(isBar)&{&&
&&&&&&&&bar();&&
&&&&&&&&return&1;&&
&&&&&&&&}&&
&&&&else&&
&&&&&&&&return&0;&&
⑦GNU风格（格式缩进使用下一行括号，语句块括号缩进两个空格）
int&Foo(bool&isBar)&&
&&if&(isBar)&&
&&&&&&bar();&&
&&&&&&return&1;&&
&&&&return&0;&&
⑧Linux风格（格式缩进使用Linux方式括号，语句块里面缩进8个空格）
int&Foo(bool&isBar)&&
&&&&&&&&if&(isBar)&{&&
&&&&&&&&&&&&&&&&bar();&&
&&&&&&&&&&&&&&&&return&1;&&
&&&&&&&&}&else&&
&&&&&&&&&&&&&&&&return&0;&&
⑨Horstmann风格（格式缩进使用horstman方式，括号紧接语句块）
int&Foo(bool&isBar)&&
{&&if&(isBar)&&
&&&{&&bar();&&
&&&&&&return&1;&&
&&&}&else&&
&&&&&&return&0;&&
⑩1tbs/otbs风格（格式缩进使用Linux方式括号，自动补全单行语句块括号）
int&Foo(bool&isBar)&&
&&&&if&(isBar)&{&&
&&&&&&&&bar();&&
&&&&&&&&return&1;&&
&&&&}&else&{&&
&&&&&&&&return&0;&&
&&& 也可以自定义格式化参数，在“高级”→“配置设置”下的“快速格式化”输入自定义参数，如默认的参数“-A1pNYk3”。详细的可设置参数如下：
&&&&&&& ①制表和括号选项
default indent option
默认4个空格
--indent=spaces / --indent=spaces=# / -s#
指定#个空格，#在1~20之间
--indent=tab / --indent=tab=# / -t#
使用制表符，指定#个空&#2)
--indent=force-tab / --indent=force-tab=# / -T#
强制使用制表符，指定#个空格，#在1~20之间
default brackets option
默认不改变括号
--brackets=break / -b
括号改为下行( e.g. ANSI C / C++ style )
--brackets=attach / -a
括号在语句后( e.g. Java / K&R style )
--brackets=linux / -l
括号如linux风格
--brackets=stroustrup / -u
括号如stroustrup风格
--brackets=horstmann / -g
括号如horstmann 风格
&&&&& ②缩进选项
--indent-classes / -C
缩进class和struct块后面的public等
--indent-switches / -S
缩进switch块后面的case块
--indent-cases / -K
缩进case块后面的括号
--indent-brackets / -B
--indent-blocks / -G
括号缩进，函数缩进
--indent-namespaces / -N
命名空间后缩进
--indent-labels / -L
额外的标签缩进
--indent-preprocessor / -w
多行反斜杠定义缩进
--indent-col1-comments / -Y
允许注释跟随代码一起缩进
--max-instatement-indent=# / -M#
在连续声明中缩进最大#个空格(#小于80，默认为40)
--min-conditional-indent=# / -m#
在多行中设置最小缩进(#小于40，默认为当前两倍缩进)
&&&&& ③填充选项
--break-blocks / -f
在循环语句前后加空行
--break-blocks=all / -F
在循环语句前后、else、catch前加空行
--pad-oper / -p
运算符前后加空格
--pad-paren / -P
在括号内外都加上空格
--pad-paren-out / -d
在括号外加上空格
--pad-paren-in / -D
在括号内加上空格
--pad-header / -H
只在括弧头部添加一个空格
--unpad-paren / -U
移除括号内外的空格
--delete-empty-lines / -x
删除函数方法里多余的空行
--fill-empty-lines / -E
以空格对齐填充前一行空行
&&&&& ④格式化选项
--break-closing-brackets / -y
让else语句块下起一行
--break-elseifs / -e
让else if 语句拆开缩进
--add-brackets / -j
自动补充括号，默认在条件语句后紧接括号
--add-one-line-brackets / -J
自动补充括号，并且保持括号与语句在一行
--keep-one-line-statements / -o
维持一行里的多条语句不变
--keep-one-line-blocks / -O
不破坏一行里面的块
--convert-tabs / -c
转换TAB 为空格
--align-pointer=type / -k1
--align-pointer=middle / -k2
--align-pointer=name / -k3
使指针或者引用符靠近变量类型
使指针或者引用符在变量类型和变量名称中间
使指针或者引用符靠近变量名称
--mode=java
指定为C/C++代码格式化
指定为C#代码格式化
指定为JAVA 代码格式化
参数命令样式，请参考Artistic Style 1.24说明文档：
1.1.2 HTML/XML
&&& 可以将HTML转换成标准的XHTML格式化，风格如下：
&html&xmlns=&http://www.w3.org/1999/xhtml&&&
&&&title&&/title&&
&&& 格式化XML时，缩进其子元素，风格如下：
&&&to&George&/to&&
&&&from&John&/from&&
&&&heading&Reminder&/heading&&
&&&body&Don't&forget&the&meeting!&/body&&
1.1.3 JavaScript
&&& 支持JavaScript格式化，以逗号、分号进行换行缩进，风格如下：
function&prod(a,&b)&{&
&&&&x&=&a&*&b;&
&&&&return&x;&
&&& 在支持PHP格式化的同时，若有语法错误也会弹出提示，缩进风格如下：
function&add($x,&$y)&
&&&&$total&=&$x&+&$y;&
&&&&return&$&
echo&&1&+&16&=&&&.&add(1,&16);&
&&& 换行缩进SQL语句，风格如下：
&&LastName,&
&&FirstName&
&&Persons&
&&FirstName='Bush'&
1.2 批量格式化
&&& 支持指定后缀名格式添加，或者自动寻找文件，最好在备份好个人重要文件后，再进行“批量格式化”。见截图：
2 代码网页高亮
2.1 支持多种语言
&&& 编辑器语法高亮支持ASM、BAT、C、C++、C#、Fortran、HTML、Java、JavaScript、JSP、Pascal、Perl、PHP、Python、Ruby、SQL、VB、VHDL、XML等等。
2.2 自定义高亮主题
2.2.1 编辑器主题
&&& 可以自定义编辑器主题，在“高级”→“配置设置”下的“编辑器设置”设置特定语言的编辑器主题颜色，比如可以设置Twilight主题模式：背景色RGB(20,20,20)，注释色RGB(95,90,96)，语法色RGB(205,168,105)，正常色RGB(255,255,255)，字符色RGB(143,157,106)，数字色RGB(207,106,76)，字符串色RGB(143,157,106)，行号色RGB(238,238,236)，行号背景色RGB(46,52,54)，当前行号色RGB(249,238,152)，分割线色RGB(85,87,83)，被选背景色RGB(128,0,255)，效果如下：
2.2.2 边框显示
&&& 在“高级”→“显示设置”→“边框”里面可以设置“实线边框”、“虚线边框”和“无边框”三种方式，在此同时还可以自定义高亮时边框的大小和颜色，在“高级”→“配置设置”下的“高亮设置”，设置“边框大小”和“边框颜色”，如下图所示：
2.2.3 背景色显示
&&& 在“高级”→“显示设置”→“显示背景”，然后在“背景颜色”设定高亮时的背景颜色，默认背景实线边框的高亮效果如下：
if&(isBar)&
&&&&bar();&
2.2.4 行号显示
&&& 在“高级”→“显示设置”→“显示行号”，即可显示行号高亮，而且复制代码时不会复制到行号，效果如下：
if&(isBar)&
&&&&bar();&
常见问题解答
①在含有中文语句中，光标不正确？
原因：这是因为所设定的字体是英文字体，在含有中文情况下，未能较为准确的识别当前行的长度。
解决：可以设置“字体”为Fixedsys、Inconsolata、微软雅黑等等，推荐使用等宽字体。附上一些编程字体，下载链接：。
②高亮时没有显示等宽效果？
原因：这是因为高亮是采用Consolas字体的，这在Vista和Win7中是自带的，在XP下需要安装字体包。同理，在网页、博客上看到代码高亮时没有显示等宽效果，亦是缺少此字体。
解决：下载Consolas字体放到系统Fonts目录下即可。下载链接：。
下载页面：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：2891299次
积分：31338
积分：31338
排名：第127名
原创：386篇
转载：88篇
评论：3325条
联系方式：
(1)(1)(1)(1)(1)(1)(3)(1)(1)(1)(1)(1)(1)(1)(2)(1)(1)(1)(1)(1)(3)(1)(1)(1)(1)(2)(1)(3)(3)(3)(1)(1)(3)(1)(1)(8)(1)(3)(2)(2)(3)(2)(3)(2)(1)(1)(2)(3)(6)(1)(4)(3)(1)(3)(5)(5)(5)(5)(1)(3)(5)(4)(4)(4)(5)(5)(1)(13)(11)(7)(5)(2)(5)(4)(5)(2)(7)(14)(18)(23)(19)(5)(35)(22)(21)(8)(10)(42)(49)前一篇分享了《 25款代码高亮工具、插件之Javascript篇及WordPress篇 》，这一篇接着分享 IDE编辑器相关的扩展包和代码高亮插件。 IDE扩展包这一节我们主要关注三个非常流行的IDE：Sublime Text、Brackets 和 Atom。我们这里不涉及这些编辑器内置的语法高亮功能，而是介绍每一个的IDE的语法高亮扩展包。如果你觉得IDE自带的语法高亮功能不适合你，你可以从这里面选择你需要的。Sublime Text 插件是时间介绍一些Sublime Text语法高亮的插件了，我们这里提供了一些，首先以 MarkDown 语法高亮开始。注：下面所有的截图都是使用的 Spacegray 主题。10.&Markdown Extended这是一款我个人在 Sublime Text 中使用的，因为它能保持代码的一致性。
Package Control 11.&MarkdownLightMarkdownLight 把你的文件变为白色，但除了颜色和斜体外，不改变你的Markdown代码。
Package Control 12.&MarkdownEditingMarkdownEditing 和上面两款插件不同，它把代码放在页面中间位置，并且会做一些处理：如把 & 转化成了宽的左边框。它使得你的IDE看起来像是文章的编辑器，如果你想把Sublime Text当作内容写作工具的话，它将非常适合你。
Package Control 13.&Handlebars这个插件也适用于 Atom，如果你即使用 Atom 又使用 Sublime Text,你可以使它们看起来一样。
Package Control 4. JadeJade 提供了一些代码高亮的改进功能。
Package Control 15.&CSS3这个插件提升了一些额外的CSS代码高亮功能，它取代了Sublime Text 2中CSS3_Syntax插件。
Package Control 16.&Stylus
Package Control 17. Sass这个插件提供Sass及SCSS的代码高亮功能，同时支持Emmet的自动补全功能。
Package Contorl 18.&Syntax Highlighting for Sass这个插件和上面那个的区别从截图上看不出什么区别，因为区别主要在于它们自动补全的方式上，如果你经常写SASS代码，推荐你使用下这两款插件，然后选择一款适合你的。
Package Control 19. LESS
Package Control 20.&Better CoffeeScript
Package Control Brackets扩展包Brackets有很多很多的代码高亮插件，然后它们主要是程序开发语言而非WEB设计语言的。非常悲哀，主要是因为编辑器已经内置了很多语言的代码高亮功能，包括你可能会用到的WEB设计语言。但是很少关于Handlebars, Jade, CoffeeScript and Stylus的。前三个我们已经在下面列出来了，然而到现在还没发现Stylus相关的扩展包。下面的截图都是使用的Brackets默认主题。21.&brackets-handlebars-templates安装这个插件前后你可能看不出很明显的区别，因为它们被淹没在HTML标签中。如果你只比较Handlebars代码的话，就可以看出区别了。
GitHub 22.&jade-brackets这个是官方的Jade高亮插件，由维护Jade的人员维护。
GitHub 23.&Brackets CoffeeScript
GitHub Atom扩展包Atom可能是我们今天提到的三款IDE中代码高亮支持最强的了。对于WEB设计语言，IDE内置的功能已经够用了。然而对于Jade 和 Stylus，我们推荐下面两款。24.&language-jade
官网 25. Stylus
官网 总结对于JavaScript和WordPress代码高亮插件，最好的办法是先查看支持的语言列表，然后比较你要使用的语言的效果及特性来做决定。对应IDE的扩展包，因为它们已经被广泛使用了，所以你不必有太多顾虑。如果之前你对于网站或者IDE要使用的代码高亮插件还不是很明确，希望上面的链接能够帮你更加明确。 via: tutsplus
最新教程周点击榜
微信扫一扫Emmet：HTML/CSS代码快速编写神器 - Web前端 - ITeye资讯
相关知识库：
Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示：
Zen coding下的编码演示
去年年底，该插件已经改名为Emmet。但Emmet不只改名，还带来了一些新特性。本文就来直观地演示给你。
一、快速编写HTML代码
1.& 初始化
HTML文档需要包含一些固定的标签，比如&html&、&head&、&body&等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键：
html:5 或!：用于HTML5文档类型
html:xt：用于XHTML过渡文档类型
html:4s：用于HTML4严格文档类型
2.& 轻松添加类、id、文本和属性
连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo：
连续输入类和id，比如p.bar#foo，会自动生成：
&p class="bar" id="foo"&&/p&
下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#]，就可以自动生成如下代码：
&h1&foo&/h1&
&a href="#"&&/a&
现在你只需要1行代码就可以实现标签的嵌套。
&：子元素符号，表示嵌套的元素
+：同级标签符号
^：可以使该符号前的标签提升一行
效果如下图所示：
你可以通过嵌套和括号来快速生成一些代码块，比如输入(.foo&h1)+(.bar&h2)，会自动生成如下代码：
&div class="foo"&
&div class="bar"&
5.& 隐式标签
声明一个带类的标签，只需输入div.item，就会生成&div class="item"&&/div&。
在过去版本中，可以省略掉div，即输入.item即可生成&div class="item"&&/div&。现在如果只输入.item，则Emmet会根据父标签进行判定。比如在&ul&中输入.item，就会生成&li class="item"&&/li&。
下面是所有的隐式标签名称：
li：用于ul和ol中
tr：用于table、tbody、thead和tfoot中
td：用于tr中
option：用于select和optgroup中
6.& 定义多个元素
要定义多个元素，可以使用*符号。比如，ul&li*3可以生成如下代码：
7.& 定义多个带属性的元素
如果输入 ul&li.item$*3，将会生成如下代码：
&li class="item1"&&/li&
&li class="item2"&&/li&
&li class="item3"&&/li&
二、CSS缩写
比如要定义元素的宽度，只需输入w100，即可生成
width: 100
除了px，也可以生成其他单位，比如输入h10p+m5e，结果如下：
height: 10%;
单位别名列表：
p 表示%
e 表示 em
x 表示 ex
2.& 附加属性
可能你之前已经了解了一些缩写，比如 @f，可以生成：
@font-face {
font-family:;
src:url();
}
一些其他的属性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项，可以通过“+”符号来生成，比如输入@f+，将生成：
@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style:
font-weight:
3.& 模糊匹配
如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：
4.& 供应商前缀
如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入trs，则会生成：
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
你也可以在任意属性前加上“-”符号，也可以为该属性加上前缀。比如输入-super-foo：
-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;
如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀：
-webkit-transform: ;
-moz-transform: ;
transform: ;
前缀缩写如下：
w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-
5.& 渐变
输入lg(left, #fff 50%, #000)，会生成如下代码：
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);
三、附加功能
生成Lorem ipsum文本
Lorem ipsum指一篇常用于排版设计领域的拉丁文文章，主要目的是测试文章或文字在不同字型、版型下看起来的效果。通过Emmet，你只需输入lorem 或 lipsum即可生成这些文字。还可以指定文字的个数，比如lorem10，将生成：
引用Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.
你还可以定制Emmet插件：
添加新缩写或更新现有缩写，可修改文件
更改Emmet过滤器和操作的行为，可修改文件
定义如何生成HTML或XML代码，可修改文件
五、针对不同编辑器的插件
Emmet支持的编辑器如下（链接为针对该编辑器的Emmet插件）：
（通过“Install Mixin”对话框添加)
（通过Tools → Add-ons菜单添加)
相关文档：（其中包含了一个Demo，你可以试验文中所提到的这些缩写）
这么酷炫，赞
不支持ftl文件吗 只支持扩展名为html的文件？
效率是成功的10%
神器啊。。。
在MyEclipse 2013下试过,与hibernate插件有冲突.
特意登陆顶神器。
神器，MARK一下。
见识过！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
wangguo 写道yjc2020 写道eclipse 插件 403Go to Help & Install New Software… in your Eclipse IDEAdd http://emmet.io/eclipse/updates/ in update sitesCheck Emmet for Eclipse group in available plugins list, click Next button and follow the installation instructionsRestart Eclipse
yjc2020 写道eclipse 插件 403
eclipse 插件 403
freezingsky 写道。。。这种编码很是神奇，但对于开发者而言，相当于学多门语言。。。语法很简单，会基本css语法基本可以在非常短的时间就可以把常用的语法掌握。
。。。这种编码很是神奇，但对于开发者而言，相当于学多门语言。。。
$符号得到加强，不过支持最好是SublimeText. DW等真没支持。