sublime与Emment
sublime与Emment
作为一个开发者,想必用过sublime和Emment 的无不大快朵颐,这两者结合在一起简直是天合之作。它不仅仅提高编码的速度而且令开发者感到编码的乐趣和舒适感,今天准备写一下关于这两者的一点最基础和最常用的使用!仅仅用做于新手的学习(大神请自行下车)。
1.sublime
(1)下载官网:http://www.sublimetext.com
安装插件:
(2)使用 [Ctrl + `] (或View > Show Console menu) 打开Sublime Text控制台,将下面的Python代码粘贴到控制台里:
import urllib2,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
注意:随着版本的不同上面的代码会有差异最好是在官网去下载代码:
https://packagecontrol.io/installation#st3
如果在Perferences->package settings中看到package control这一项,则表明安装成功。
用Package Control安装插件的方法
1. 按下Ctrl+Shift+P调出命令面板。
2. 输入install 调出 Install Package 选项并回车。
3. 在列表中选中要安装的插件,或者输入插件名(比如要安装IMESupport插件,则输入IMESupport,它会实时过滤筛选结果),根据命令面板中的过滤结果,选择要安装的插件。
用Package Control查看已安装的插件
如果想看一下Sublime Text 3中已经安装了什么插件,可以按照下面的方法操作。
1. 按下Ctrl+Shift+P调出命令面板
2. 输入"package",在下拉列表找到"Package Control: list packages",选中后回车,全部的插件就会显示出来了。
用Package Control删除已安装的插件
1.Ctrl+Shift+P
2.输入remove package,回车,在列出来的插件中选中回车即可删除!
下面介绍一下本人经常用的插件:
IME 中文输入法跟随
Emment 开发必备可以大大提高编码速度和质量。
Alignment 这个插件让你能对齐你的代码,包括 PHP、CSS 和 Javascript。代码看起来更简洁和可读,便于编辑。
Colorpicker 如果你经常要查看或设置颜色值,这个插件可以很方便地调用你本机的调色板应用。(译者扩充:)这是一个双向的功能,你既可以在调色板中选择一个颜色,然后按“确定”按钮把该值填写到 SublimeText 中活动文档的当前位置,也可以在活动文档中选择一个颜色的值,按此插件的快捷键就会在显示的调色板中定位到该值所对应的颜色。
View in browers 可以快速的用快捷键跳转到浏览器
BracketHighlighter 语法高亮
感兴趣的可以自行去搜索sublime text的插件根据你的实际情况下载你最适合的插件,使自己工作起来更加顺手即可!
资料参考:http://www.oschina.net/translate/20-powerful-sublimetext-plugins
安装错误情形
下面汇总了安装过程中可能出现的一些常见问题:
情形一:Package Control:There are no packages available for installation
据StackOverflow上说是IPv6造成,如果我们的Intent服务提供者(ISP)不支持IPv6就会引发上述错误,原文如下:
This error is happened with IPv6 problem. If yourInternet Service Provider (ISP) does not support for IPv6 you got this error.
如果IPV6有问题,curl就会打印类似这样的错误:
curl: (7) Failed to connect to xxxxx...
找到了问题原因,下面着手解决它。
第一步:取得sublime.wbond.NET的IPv4地址。在命令提示符中输入以下命令:
ping sublime.wbond.Net
第二步:打开C:\Windows\system32\drivers\etc\hosts
文件,增加如下对应关系:{IPv4 address}sublime.wbond.net
保存文件,然后再打开Package Control(快捷键Ctrl+Shift+P)开始安装即可。
具体参考:http://blog.csdn.net/freshlover/article/details/44261229
单用户设置
1. sublime Text 3的默认设置文件无法修改 (Preferences/Settings - Default)
2. 如果你想修改配置(比如字体等),需要修改User下的配置文件(Preferences/Settings - User),将如下代码copy进去【2】【3】
{
"color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
// 设置Courier New等宽字体,以便阅读
"font_face": "Courier New",
"font_size": 12.0,
// 使光标闪动更加柔和
"caret_style": "phase",
// 高亮当前行
"highlight_line": true,
// 高亮有修改的标签
"highlight_modified_tabs": true, "ignored_packages":
[
"Vintage"
]
}
想要学习更多关于sublime 的知识:
References
【1】Package Control: Installation (https://sublime.wbond.net/installation)
【2】Sublime Text 全程指引 by Lucida (http://www.cnblogs.com/figure9/p/sublime-text-complete-guide.html)
【3】sublime text2怎么修改字体?(http://jingyan.baidu.com/article/95c9d20d9d9f71ec4f756177.html)
【4】打造便携版sublime text2(http://etosun.com/post/123)
【5】How to install a Sublime Text theme(http://colorsublime.com/how-to-install-a-theme)
【6】Colorsublime-Plugin(https://github.com/Colorsublime/Colorsublime-Plugin)
--------------------------------------------------------------------------------------------------------------------------------------------------
2.Emment
Emment的使用
1.后代
div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
2.兄弟
div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>
3.上级
div+div>p>span+em^^bq
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
4.分组
div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
5.自增
ul>li.item$*5
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
h$[title=item$]{header$}*3
<h1 title="item1">header1</h1>
<h2 title="item2">header2</h2>
<h3 title="item3">header3</h3>
ul>li.item$@-*5
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
ul>li.item$@3*5
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
6.ID和类属性
#header
<div id="header"></div>
.title
<div class="title"></div>
form#search.wide
<form action="" id="search" class="wide"></form>
p.class1 class2 class3
<p class="class1 class2 class3"></p>
7.自定义属性
p[title=item]
<p title="item"></p>
[a=value1 b=value2]
<div a="value1" b="value2"></div>
8.内容
P>{Click here}+a{to}+{continue}
<p>Click here<a href="">to</a>continue</p>
9.隐式缩写
link:print
<link rel="stylesheet" href="print.css" media="print">
10.
meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
form:get
<form action="" method="get"></form>
input:password
<input type="password" name="" id="">
<input type="checkbox" name="" id="">
html:xml
<html xmlns="http://www.w3.org/1999/xhtml"></html>
html:xt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body> </body>
</html>
html:4s
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body> </body>
</html>
若想学习关于更多关于Emment的知识:
References:
http://www.iteye.com/news/27580
http://www.w3cplus.com/tools/emmet-cheat-sheet.html
sublime与Emment的更多相关文章
- webstorm基础使用
因为需要用到sass自动编译,从sublime转到了webstorm.现在自我感觉sublime需要的插件太多,而webstorm很多功能都帮你及成,不需要你去找插件和安装插件. webstorm的好 ...
- sublime text 2安装Emment插件
写个自己看的 1. 命令行模式 ctrl+` 可以调出命令行模式(view->show console),主要支持python语法等,没试用过只知 quit()可以退出 ..不过sublime的 ...
- Sublime Text 3 配置和使用方法
下载: Sublime Text 3 官方下载地址 Sublime Text 3 汉化破解版 资料: Sublime Text 非官方文档 技巧 -用户或-User后缀的菜单项,其对应的配置文件都 ...
- Sublime text3 常用插件 安装
1 安装插件前的准备工作 首先确保你的Sublime Text3编辑器为官方版(非破解版),建议下载官网的便携版本(好处多多). 然后安装插件管理工具(Package Control) 1.1 打开S ...
- Sublime Text 介绍、用法、插件等
个人常用插件: AlignmentBracket Highlighter 此插件能完成括号高亮匹对DocBlockrEmmentNodejsPackage ControlPrefixr CSS3中 ...
- Sublime Text 有哪些使用技巧
1. 更改变量名的几种方法<img src="https://pic4.zhimg.com/d93cf0e8987e0117f3a3187cfe8e53fb_b.jpg&quo ...
- 神器-Sublime Text 3 代码编辑器安装与使用
一.软件获取 1.软件下载地址:http://www.sublimetext.com/3. 2.注册机和汉化下载:http://files.cnblogs.com/files/1312mn/subli ...
- sublime Text 3常用Html/Css基础插件安装
前言 sublime以其简洁明了的外观,干脆利落的编辑方式,再加上丰富的功能插件,深受广大开发者的喜爱.今天,我就来介绍几款基于Html/Css开发的sublime插件. 1.Package Cont ...
- 打造一款便携版的Sublime Text
https://segmentfault.com/a/1190000000707661 https://www.cnblogs.com/52cik/p/sublime-diy.html 直接安装Sub ...
随机推荐
- iOS 生产证书 分类: ios相关 app相关 2015-05-22 14:49 175人阅读 评论(0) 收藏
首先登陆https://developer.apple.com(99美元账号) 选择iOS Developer program 板块下的 Certificates,Identifiers & ...
- springMVC+Hibernate配置
本文描述下 sypro 项目中使用 springMVC+Hibernate配置,初学SpringMVC做下简单整理解. 1.web项目首先我们要使用 web.xml文件将 spring配置引入进来 & ...
- JUCE_FIFO实现分析
JUCE_FIFO代码简单剖析,此处的剖析就是给自己留一个方便查询的内容:不做太多内容的要求,只做简单的记录:本文以初学者的角度来些,大牛请飘过O(∩_∩)O FIFO的功能在博客的其他帖子里面已经有 ...
- Unity3D ——强大的跨平台3D游戏开发工具(六)
第十一章 制作炮台的旋转 大家知道,炮台需要向四周不同的角度发射炮弹,这就需要我们将炮台设置成为会旋转的物体,接下来我们就一起制作一个会旋转的炮台. 第一步:给炮台的炮筒添加旋转函数. 给炮台的炮筒部 ...
- 2)Java学习笔记:匿名内部类
为什么要使用匿名内部类 ①如果以前的类有一些缺陷,只是想在某一个模块进行修复,可以在引用该类的地方使用匿名内部类,在overRide方法进行修复. ②如果一个类,需要派生出很多类,而且这些类大多只是在 ...
- java系列--类和对象
一.成员属性,构造方法,成员方法 1.类名首字母一般大写 2.方法名的首字母一般是小写,使用驼峰法(匈牙利法) myCry, 下划线法 my_cry 3.方法的声明没有函数体(接口,抽象类),数据类型 ...
- Nodejs之目录介绍及app.js说明
nodejs目录说明,app.js简单介绍及如何设置app.js启动项目. 新建的项目结构应该是这样 bin:项目的启动文件,也可以放其他脚本. node_modules:用来存放项目的依赖库. pu ...
- margin的简单应用
今晚学了盒模型的marg部分,简单仿下京东的官网首页部分 第一次制作,尽管看来实在惨不忍睹,毕竟娘不嫌儿丑,之后多加努力吧,这几天尽量加快学习进度,能单独制作一张精美的网页最好 附上代码 <!D ...
- CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器
CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...
- 第一个Servlet程序及分析
第一个Servlet程序: package cc.openhome; import java.io.IOException; import java.io.PrintWriter; import ja ...