zoukankan      html  css  js  c++  java
  • 在 sublime text 3 中添加 Emmet (ZenCoding )

    http://www.cnblogs.com/matchless/archive/2013/04/09/3010293.html

    Sublime text 2 是获得了盛赞的编辑器,而其中的 zen coding 插件也为人所津津乐道!

    如今,这两款软件都有了新的版本,Sublime text 3 beta 版已经发布了,zen coding 也改名为 Emmet,其安装方法也与之前有所不同

    下面就来介绍一下【如何在 Sublime Text 3 中安装 Emmet 插件】:

    首先,安装 sublime text 3:

    sublime text 3 的官方下载地址为:http://www.sublimetext.com/3 ,截止本篇博文发布的日期,最新版本为 3021关于汉化和注册,请自行百度谷歌。

    我下载的是 portable version  便携版直接解压到文件夹中就可以用了,我解压在 D:Program FilesSublime Text 3文件夹中,下面的示例均以此为准,请根据自己的情况修改示例中的指令对于下载了 安装版  的朋友,也请将示例中的文件夹修改为具体的安装位置。

    其次,安装 sublime text 3 的 Package Control:

    由于升级为 sublime text 3,原来 sublime text 2 中直接用指令安装 Package Control 的方式已经不能使用了,报如下错误:

    解决方式是使用 git 直接下载安装,windows 下 git 可以使用 msysgit,下载地址为 Git-1.8.1.2-preview20130201.exe ,或者使用 TortoiseGit,下载地址为 http://code.google.com/p/tortoisegit/wiki/Download 

    对于使用 git 命令行方式,进入控制台(在“运行”中,输入 cmd 回车),转到 D:Program FilesSublime Text 3DataPackages,输入如下指令:

    D:Program FilesSublime Text 3DataPackages>git clone https://github.com/wbond/sublime_package_control.git "Package Control"
    
    D:Program FilesSublime Text 3DataPackages>cd Package Control
    
    D:Program FilesSublime Text 3DataPackages>git checkout python3

    重新启动 Sublime Text 3,可以在 Preferences 菜单下看到 Package Settings 和 Package Control 菜单项,表明 Package Control 安装成功

    对于安装了 TortoiseGit 的朋友,在“我的电脑”或“计算机”中打开 D:Program FilesSublime Text 3DataPackages 文件夹,在空白处右击,选择 Git Clone...,弹出如下对话框:

    在URL中输入:https://github.com/wbond/sublime_package_control.git,在Directory中将路径修改为 D:Program FilesSublime Text 3DataPackagesPackage Control,如下图所示:

    或者使用git bash : D:Program FilesSublime Text 3DataPackages>git clone https://github.com/wbond/sublime_package_control.git "Package Control"

    单击 OK

    单击 OK,Sublime Text 3 的 Package Control 安装成功

    再次,安装 Emmet 插件:

    启动 Sublime Text 3,选择 Preferences>Package Control,点选 Package Control:Install Package:

    输入 Emmet 并回车:

    界面最下方显示:

    表明 Emmet 插件正在安装

    在 Emmet 安装完成后,会显示如下屏幕:

    请注意红框内的文字,和左下角绿色框内的提示:

    红框内的文字是说“这个插件会自动下载和安装 PyV8,请看状态条信息”,而左下角的绿色框内的提示就是正在下载安装和载入 PyV8。

    在PyV8安装完成后,重启 Sublime Text 3

    最后,运行 Emmet:

    重启 Sublime Text 3,会看到左下角再次出现 Loading PyV8 的提示,待其载入完毕,打开一个新文档,按下 Control + Alt + Enter,会弹出如下提示框:

    直接关闭它(我没有发现这个错误对 Emmet 插件的使用有什么影响)

    在下方的命令窗口输入 ZenCoding 指令就可以了。

    或者也可以直接在文本区输入 Emmet (ZenCoding) 指令,再按下 Ctrl + E,如:

    table.MyTable>tr.MyTableTr*3>td.MyTableTr*5,按下 Ctrl+E,生成如下表格:

    <table class="MyTable">
        <tr class="MyTableTr">
            <td class="MyTableTrTd"></td>
            <td class="MyTableTrTd"></td>
            <td class="MyTableTrTd"></td>
            <td class="MyTableTrTd"></td>
            <td class="MyTableTrTd"></td>
        </tr>
        <tr class="MyTableTr">
            <td class="MyTableTrTd"></td>
            <td class="MyTableTrTd"></td>
            <td class="MyTableTrTd"></td>
            <td class="MyTableTrTd"></td>
            <td class="MyTableTrTd"></td>
        </tr>
        <tr class="MyTableTr">
            <td class="MyTableTrTd"></td>
            <td class="MyTableTrTd"></td>
            <td class="MyTableTrTd"></td>
            <td class="MyTableTrTd"></td>
            <td class="MyTableTrTd"></td>
        </tr>
    </table>
  • 相关阅读:
    Python正课132 —— Vue 进阶5
    Python正课131 —— Vue 进阶4
    Python正课130 —— Vue 进阶3
    logging模块
    作业20
    suprocess模块
    configparser模块
    hashlib模块
    shutil模块
    序列化模块
  • 原文地址:https://www.cnblogs.com/strikebone/p/3472717.html
Copyright © 2011-2022 走看看