威尼斯888_www.wns888.com_威尼斯wns888官网
做最好的网站
威尼斯888 > 计算机网络 / Web前端 > 对于代码的编写效率是否有比较大的进步

原标题:对于代码的编写效率是否有比较大的进步

浏览次数:139 时间:2020-03-02

作为一个WEB前端工作者,是否思考过这个问题:对于代码的编写效率是否有比较大的进步,也许对于大部分人来说都有一个瓶颈,如何突破它,如何提高工作效率,需要我们自己深入研究了。

编写 HTML、CSS 代码始终占据了很大的工作比例,特别是手动编写 HTML 代码,效率特别低下,因为需要敲打各种“尖括号”、闭合标签等,时间一长感觉枯燥无比,脑壳发胀啊。工作之余无意中在某个交流群里发现有人提到过一个插件:Emmet;然后研究了下,发现它其实就是Zen Coding升级版了,只不过换了个“马甲”而已,接下来就详细介绍下Emmet。

Emmet目前支持的编辑器:

DreamweaverSublime Text 2Sublime Text 3 TextMate 1.xEclipse/AptanaCoda 1.6 and 2.xEspressoChocolat (可以通过 “Install Mixin” 对话框安装)Komodo Edit/IDE Notepad++PSPad

CodeMirror2/3Brackets

安装Emmet:

我目前使用的是Dreamweaver CS6和Sublime text3,看大家习惯了。我就讲讲如何在Dreamweaver CS6中使用emmet。

Emmet官方下载地址: 。

如果你已经安装了Adobe的Extension Manager,直接双击安装就可以啦!如果木有,点击这里下载。

一路“是”和“接受”到底,装完重启DW,然后点击顶部导航“命令”就可以看到Emmet啦。如下图:

快捷键的设置:

没有快捷键在写代码的时候不是很方便,下面的简单的介绍下:

1、点击“编辑”》“快捷键”,然后在“当前设置”里选择“Emmet”,如图:

2、点击“命令”》“Emmet”,然后选中“Expand Abbreviation”,然后在下面的快捷键里就可以设置了,如图:

至于应该怎么设置快捷键,在这里就不啰嗦了,相信大家可以搞定。一般设置的是“TAB”,看个人习惯了。

准备工作搞定了,先看一个实例:

我们在DW里面输入 Emmet 的指令:#page>div.logo+ul#navigation>li*5>a{Item $}

然后按下我们写的快捷键“TAB”,发现神奇的一幕出现了,发现这行指令变成了下面的 HTML 结构:

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

本文由威尼斯888发布于计算机网络 / Web前端,转载请注明出处:对于代码的编写效率是否有比较大的进步

关键词:

上一篇:介绍下PageSpeed Insights的使用方法以及功能

下一篇:选择器字符串用于过滤出被选中的元素中能触发