zoukankan      html  css  js  c++  java
  • Sublime Text 2+Zen Coding

    自己长期使用editplus做代码编辑,使用过DW,还是习惯前者的使用环境。好友推荐,试试新的编码工具——Sublime Text 2。在代码制作过程中,最主要的是1)快速复制的模式化工作  2)零碎代码整理对齐  3)减少敲击键盘的次数。通过自己试用,Sublime Text 2+Zen Coding的组合能满足我这些需求,在配合其余插件。下文有详细叙述,本文主要从设计师的角度选择内容,可能有些浅显。

           建议使用官方版本,绿色版本容易出现一些莫名其妙的问题。

           官网地址:http://www.sublimetext.com/

    软件特性:

    • 自动完成:

      自动完成的快捷键是Tab,如果在html文件中,输入cl按下tab,即可自动补全为class=””;加上zencoding后,更是如虎添翼,后面再讲到

    • 多列编辑:

      按住ctrl点击鼠标,会出现多个闪烁的光标,这时可同时修改多处或者按住鼠标中键拖拽,

    • 代码注释功能:

      ctrl+/、ctrl+shift+/分别未行注释和块注释,再按一下就能去掉注释,ST2能够自动识别是html、css还是js文件,给出不同类型的注释。

    • 行操作:

      ctrl+alt+↑、ctrl+alt+↓向上或者向下交换两行,ctrl+enter,光标后插入空行,ctrl+d选择相似,可以参考后面的快捷键列表。

    • 右键功能:

      前3个,大家都知道,第4个,show unsaved changes,显示未保存的修改,红色减号表示删去的内容,绿色加号表示新增的内容

      Open Containing Folder…,打开包含此文件的文件夹,这个很方便找到相关的文件

      Copy File Path,复制文件路径,方便我们复制路径到浏览器中查看

      Auto-Format Tags on Selection 格式化选中的文档,方便我们更清晰的查看代码结构,虽然ST2有自动缩进功能,但是当我们粘贴进一段没有格式化过的代码,就需要这个能了,这个功能要安装了Tag这个插件才会出现。

    安装Sublime Text 2插件的方法:

    1.直接安装

    安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages)。

    2.使用Package Control组件安装

    也可以安装package control组件,然后直接在线安装:

    1. 按Ctrl+`调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入法属性设置-输入法管理-取消热键切换至QQ拼音)

    2. 粘贴以下代码到底部命令行并回车:
      import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

    3. 重启Sublime Text 2。

    4. 如果在Perferences->package settings中看到package control这一项,则安装成功。

    如果这种方法不能安装成功,可以到这里下载文件手动安装

    用Package Control安装插件的方法:

    1. 按下Ctrl+Shift+P调出命令面板

    2. 输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件。

    (在绿色x64版本中,调用不出插件列表。英文版就没问题,不清楚什么原因)

    GBK Encoding Support

    对应gb2312来说,Sublime Text 2 本生不支持的,我们可以通过插件GBK to UTF8或GBK进行转码工作。

    主要插件Zen Coding:

    Zen Coding

    不懂可以围观:《Zen Coding: 一种快速编写HTML/CSS代码的方法》

    输入 div.wrapper>div.header+div.main+div.footer 按下Tab,立刻变成

    或者按下ctrl+alt+enter,激发zencoding控制台,可看到整个动态的过程。

    Zen Coding代码写法:

    1)使用Ctrl + Alt + Enter 呼出ZenCoding

    2) div#content>ul>li*3>a[href="javascript:void(0);"]{Links$} 这样短短的一句话生成:

    <did id="content">

        <ul>

             <li><a href="javascript:void(0);">Links1</a></li>

             <li><a href="javascript:void(0);">Links2</a></li>

             <li><a href="javascript:void(0);">Links3</a></li>

        </ul>

    </did>

    PS:Zen Coding for Sublime Text 2插件的开发者已经停止了在Github上共享了,现在只有通过Package Control来安装。

     

    Sublime Text 中使用Zen Coding的一些技巧

    1、缩写扩展

        之前知道,通过Control + Alt + Enter可以在一个新行中输入ZC的缩写,来生成代码。同时,如果我们在编辑中直接书写了ZC缩写,比如 div#content>p 当光标放置在p之后时,可以通过Tab键来扩展,ZC会从光标处开始向左侧搜索到第一个空白处,之间的代码作为ZC缩写,这样不必每次打开新行输入,提高了效率,缺点就是不能够实时预览。

    2、嵌套代码

    如上图所示,可以实现在已经写好的代码外面嵌套其他的代码,实现方式是将光标放置到想要嵌套的标签上,然后使用Control + Alt + Enter 呼出ZC的命令行,就可以了。

    其实Zen Coding还提供了很多方便代码编写的操作,例如标签匹配、返回上一个/下一个编辑点、更新img标签、合并行等,但是因为在Sublime Text中没有提供完整的支持,所以这些特性还无法使用。

    其余插件:

    jQuery Package for sublime Text

    如果你离不开jQuery的话,这个必备~~

    Sublime Prefixr

    Prefixr,CSS3 私有前缀自动补全插件,显然也很有用哇

    JS Format

    一个JS代码格式化插件。

    Placeholders

    故名思意,占位用,包括一些占位文字和HTML代码片段,实用。

    Sublime Alignment

    用于代码格式的自动对齐。传说最新版Sublime 已经集成。

    Tag
    一些有代码洁癖的程序猿很适合这个插件,HTML代码格式化能使html代码更加漂亮整洁。

    使用的方法也很简单,选中一段Html代码后,按Ctrl+Alt+f即可

    JsMinifier

    该插件基于Google Closure compiler,自动压缩js文件。

    Sublime CodeIntel

    代码自动提示

    Bracket Highlighter

    类似于代码匹配,可以匹配括号,引号等符号内的范围。

    GBK to UTF8

    将文件编码从GBK转黄成UTF8,快捷键Ctrl+Shift+C

    主要快捷键

    Ctrl+L 选择整行(按住-继续选择下行)

    Ctrl+KK 从光标处删除至行尾

    Ctrl+Shift+K 删除整行

    Ctrl+Shift+D 复制光标所在整行,插入在该行之前

    Ctrl+J 合并行(已选择需要合并的多行时)

    Ctrl+KU 改为大写

    Ctrl+KL 改为小写

    Ctrl+D 选词 (按住-继续选择下个相同的字符串)

    Ctrl+M 光标移动至括号内开始或结束的位置

    Ctrl+Shift+M 选择括号内的内容(按住-继续选择父括号)

    Ctrl+/ 注释整行(如已选择内容,同“Ctrl+Shift+/”效果)

    Ctrl+Shift+/ 注释已选择内容

    Ctrl+Z 撤销

    Ctrl+Y 恢复撤销

    Ctrl+M 光标跳至对应的括号

    Alt+. 闭合当前标签

    Ctrl+Shift+A 选择光标位置父标签对儿

    Ctrl+Shift+[ 折叠代码

    Ctrl+Shift+] 展开代码

    Ctrl+KT 折叠属性

    Ctrl+K0 展开所有

    Ctrl+U 软撤销

    Ctrl+T 词互换

    Tab 缩进 自动完成

    Shift+Tab 去除缩进

    Ctrl+Shift+↑ 与上行互换

    Ctrl+Shift+↓ 与下行互换

    Ctrl+K Backspace 从光标处删除至行首

    Ctrl+Enter 光标后插入行

    Ctrl+Shift+Enter 光标前插入行

    Ctrl+F2 设置书签

    F2 下一个书签

    Shift+F2 上一个书签

  • 相关阅读:
    rabiitmq 消息丢失处理
    后端返回文件流和json格式的方式进行文件下载导出
    elasticsearch 安装
    docker-compose 命令
    艾孜尔江的部分影视作品
    游戏作品:万里同风
    Unity设置计时器
    Unity项目中VS Code部分功能出现问题解决思路
    Unity接收FFmpeg的UDP推流
    SVN Basics
  • 原文地址:https://www.cnblogs.com/simonryan/p/4132980.html
Copyright © 2011-2022 走看看