博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
notepad++配置Zen Coding
阅读量:5889 次
发布时间:2019-06-19

本文共 2484 字,大约阅读时间需要 8 分钟。

hot3.png

Notepad++ 是一款无比轻巧便捷的代码编辑工具。它无可挑剔的启动速度,优秀的语法高亮,干净整齐的代码缩进,便捷的括号高亮匹配赢得了无数人的喜爱。 但,其代码自动补全很“鸡肋”,或者说Notepad++根本就没有代码补全功能。平时改点源代码很方便,但是想单独的写点源代码就比较麻烦了,难道要一点点的都敲吗?先上段视频:

lebang,欢乐邦,zen Coding
怎么样?惊呆了吧。Zen Coding–一款使用仿CSS选择器的语法来快速开发HTML和CSS的插件。它无视了编辑器的自动提示和自动完成,秒杀了你自定义的各种快捷键或者 AHK 的热字符串,以智能简洁高效的缩短输入,带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验。

先举一个复杂的例子:zen-coding 可以把这样的代码:div#header>ul.navigation>li*4>a,变成下面的 HTML 代码:

看到这熟悉的语法结构,会 CSS 的朋友一定会惊声尖叫!最妙的是那个“*4”,直接生成 4 个 li 代码了。没错,Zen Coding 就是这样牛叉的东西。为Notepad++安装 Zen Coding 插件, 下载 解压将解压所得的文件放入 Notepad++ 程序的安装目录下的plugins文件夹。重启Notepad++,即可开始使用 Zen Coding

首先,我们先学习一下 Zen Coding 的缩写规则 (其实就是CSS选择器)

  • E
    元素名 (div, p);
  • E#id
    带id的元素 (div#content, p#intro, span#error);
  • E.class
    带class的元素 (div.header, p.error.critial). id 和 class 可以连写,如: div#content.column.width;
  • E>
    N 子元素 (div>p, div#footer>p>span);
  • E+N
    兄弟元素 (h1+p, div#header+div#content+div#footer);
  • E*N
    多项元素 (ul#nav>li*5>a);
  • E$*N
    带序号的元素 (ul#nav>li.item-$*5);

接下来,我们来熟悉 Zen Coding for Notepad++ 的快捷键,也是 Zen Coding 的精髓

【Ctrl+E】 展开缩写(Expand Abbreviation)

比如写下div#page>div.logo+ul>li*3>a ,按一下 Ctrl+E,立马就可以转化成:

【Ctrl+Shift+A】 嵌套代码(Wrap with Abbreviation)

比如,我们想让写好的 hello world,想在外层再套一个div,只需按下【Ctrl+Shift+A】,在弹出的对话框中输入: div.wrap,回车。此标签就能自动被嵌套。

甚至,我们可以玩的更炫一些,写好三行列表内容,全裸,此时没有任何标签。只需按下【Ctrl+Shift+A】,输入 ul>li* ,回车。这三行内容就能自动被ul li 嵌套起来。(不仅限于 li 列表哦)

【Ctrl+Shift+D】选中代码块(Balance Tag Inward/Outward)

选中当前光标所在的代码块,长按可依次选中父块

【Ctrl+Alt+[ , Ctrl+Alt+]】 转到上一个/下一个编辑点(Go to Next/Previous Edit Point)

按下可以依次跳到可输入内容的编辑点,省去了不停按方向键或鼠标来定位编辑点的麻烦。

【Ctrl+Alt+M 】合并行(Merge Lines)

将选中的多行代码合并为一行。压缩css、js代码为一行时,这个很方便。Ctrl+A,然后Ctrl+Alt+M,两下即可搞定,免去了动用压缩工具的麻烦。(当然这个只是简单地将代码合并为一行,并不能做更深入的代码压缩)

【Alt+/ 】添加、移除注释(Toggle Comment) 注释掉光标所在的代码块

(Notepad++ 自带的Ctrl+Shift+Q也可以用来注释代码)

【Ctrl+’ 】空标签转化(Split/Join Tag)

比如将<div class="test"></div>转化为<div class="test"/>,反向亦可。

【Ctrl+Shift+’ 】移除标签(Remove Tag)

比如将<div class="test">hello world</div>移除div标签,留下hello world。

目前 Notepad++ 的 Zen Coding 只有这几个快捷键。下面给出一个HTML和CSS的缩写列表:

也可以自己编写缩写规则:pluginsNppScriptingincludesZen Coding.js为规则设定文件,

在其中对应位置仿照已有规则添加自己的缩写规则。也可以修改缩写规则更符合自己的习惯。即使你不编写自己的缩写规则,也强烈建议你阅读此文件,熟悉 Zen Coding 自带的一些缩写规则,让代码书写更加事半功倍~

最后, 分为 Zen HTML 和 Zen CSS 两部分。这两部分功能是以插件的形式来实现的。如果你用 NetBeans、SlickEdit、Sublime、TextMate、TopStyle、UltraEdit、WebIDE and IntelliJ IDEA、Dreamweaver、Aptana 都可以在找到相关的插件。

转载于:https://my.oschina.net/yangphere/blog/70981

你可能感兴趣的文章
js判断checkbox是否选中
查看>>
Eclipse中修改代码格式
查看>>
关于 error: LINK1123: failure during conversion to COFF: file invalid or corrupt 错误的解决方案...
查看>>
Linux 进程中 Stop, Park, Freeze【转】
查看>>
PHP盛宴——经常使用函数集锦
查看>>
重写 Ext.form.field 扩展功能
查看>>
Linux下的搜索查找命令的详解(locate)
查看>>
android app启动过程(转)
查看>>
安装gulp及相关插件
查看>>
如何在Linux用chmod来修改所有子目录中的文件属性?
查看>>
高并发环境下,Redisson实现redis分布式锁
查看>>
Hyper-V 2016 系列教程30 机房温度远程监控方案
查看>>
笔记:认识.NET平台
查看>>
cocos2d中CCAnimation的使用(cocos2d 1.0以上版本)
查看>>
【吉光片羽】短信验证
查看>>
gitlab 完整部署实例
查看>>
GNS关于IPS&ASA&PIX&Junos的配置
查看>>
影响企业信息化成败的几点因素
查看>>
SCCM 2016 配置管理系列(Part8)
查看>>
struts中的xwork源码下载地址
查看>>