1、Package Control

  1. 按Ctrl+~调出console(或者view>show console)
  2. 粘贴以下代码到底部命令行并回车:
  3. import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read()) 
  4. 重启Sublime Text 3。
  5. 如果在Perferences->package settings中看到package control这一项,则安装成功。

2、js format 一个JS代码格式化插件。 

  1. 安装package control 菜单 View - Show Console 或者 ctrl + ~ 快捷键,调出 console。将以下 Python 代码粘贴进去并 enter 执行,不出意外即完成安装。以下提供   ST3 的安装代码:   

import urllib.reques,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path();
urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) );
open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

  2.打开菜单->首选项->插件控制,输入 install package

  3.等待程序进入插件管理功能,再输入插件名称:JS Format (默认快捷键Ctrl+Alt+F)

3、ConvertToUTF8 

  1. 按Ctrl+~调出console(或者view>show console)
  2. 粘贴以下代码到底部命令行并回车:
  3. import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
  4. 重启sublime text3。
  5. 按windows:Ctrl+Shift+P;mac:command+shift+P打开命令行,输入Install Package,回车,然后继续输入ConvertToUTF8,回车。

4、emmet HTML/CSS代码快速编写神器

  1、在前面已安装的Package Control的基础之上,首先

    

点击菜单Preference-->Package Control

点击Install Package

    

等待几秒后再弹出如下内容,敲键盘emmet,选择如下:

   

在 Emmet 安装完成后,会显示如下屏幕:然后会自动安装PyV8,安装完成,重启 Sublime Text 3。

  

5、emmet的基本使用方法

  HTML文档需要包含一些固定的标签,比如<html>、<head>、<body>等,现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”,然后按Tab键: 
  

  轻松添加类、id、文本和属性 

  连续输入元素名称和ID,Emmet会自动为你补全,比如输入p#foo: 
  
  连续输入类和id,比如p.bar#foo,会自动生成:   

<p class="bar" id="foo"></p>

  下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#],就可以自动生成如下代码:

01.<h1>foo</h1>
02.<a href="#"></a>

  

   嵌套 
   现在你只需要1行代码就可以实现标签的嵌套。

  • >:子元素符号,表示嵌套的元素
  • +:同级标签符号
  • ^:可以使该符号前的标签提升一行

  分组 
   你可以通过嵌套和括号来快速生成一些代码块,比如输入(.foo>h1)+(.bar>h2),会自动生成如下代码:  

01.<div class="foo">
02. <h1></h1>
03.</div>
04.<div class="bar">
05. <h2></h2>
06.</div>

  

  定义多个元素 
  要定义多个元素,可以使用*符号。比如,ul>li*3可以生成如下代码: 

01.<ul>
02. <li></li>
03. <li></li>
04. <li></li>
05.</ul>

  

  定义多个带属性的元素 
   如果输入
ul>li.item$*3,将会生成如下代码:

01.<ul>
02. <li class="item1"></li>
03. <li class="item2"></li>
04. <li class="item3"></li>
05.</ul>

  

  css缩写值 
  比如要定义元素的宽度,只需输入w100,即可生成 
  

sublime text3 常用插件安装的更多相关文章

  1. Sublime text3 常用插件 安装

    1 安装插件前的准备工作 首先确保你的Sublime Text3编辑器为官方版(非破解版),建议下载官网的便携版本(好处多多). 然后安装插件管理工具(Package Control) 1.1 打开S ...

  2. 前端神器Sublime Text3 常用插件&常用快捷键

    Sublime Text3常用插件 使用Package Control组件安装 也可以安装package control组件,然后直接在线安装: 按Ctrl+`调出console(注:安装有QQ输入法 ...

  3. Sublime Text3—常用插件Emmet

    摘要 安装请看上一篇Sublime Text-安装,和sublime自带快捷键一起用,写html简直快的飞起. 下面整理的是常用的,完整的可看emmet官方文档. 一.生成标签 1.快速生成文档结构 ...

  4. SubLime Text3 常用插件总结

    近来开始恶补前端知识,在一定的技能基础上,逐渐开始进阶的学习和使用.因此在这里罗列下,SubLime Text3 常用插件: 1.Emmet 提高HTML & CSS3编写速度. 2.Them ...

  5. 前端与php的sublime text3常用插件

    sublime text各种版本下载:http://sublimetext.iaixue.com/dl/ 1.安装Package Control 快捷键: ctrl+`     粘贴内容后Enter: ...

  6. sublime text3及插件安装过程

    本人安装的是sublime text3 1.安装 这个过程下一步下一步即可 2.激活 在help菜单中选择输入验证码,例如以下整个都是: ----- BEGIN LICENSE ----- Andre ...

  7. sublime text 常用插件安装

    一.安装方法 ctrl+ship+p —— 在弹出的地方输入 pci (package control: install pagckage)—— 再输入 要安装的包名 二.一步过慢或失败解决: 原因: ...

  8. Sublime Text3常用插件以及安装方法(实用)

    Package Control组件在线安装 按Ctrl+`调出console(注:避免热键冲突) 粘贴以下代码到命令行并回车: import urllib.request,os; pf = 'Pack ...

  9. Sublime Text3常用插件以及安装方法(实用)【转载】

    https://www.cnblogs.com/liuchaoH/p/6370008.html Package Control组件在线安装 按Ctrl+`调出console(注:避免热键冲突) 粘贴以 ...

随机推荐

  1. [LeetCode] Kth Smallest Element in a BST 二叉搜索树中的第K小的元素

    Given a binary search tree, write a function kthSmallest to find the kth smallest element in it. Not ...

  2. 关于 bind 你可能需要了解的知识点以及使用场景

    不看不知道,一看吓一跳,已经整整一个月没有更新 underscore 源码解读系列文章了.前面我们已经完成了 Object ,Array,Collection 上的扩展方法的源码剖析,本文开始来解读 ...

  3. modelsim实用教程--前言

    前言 Modelsim是一款专业的仿真软件,特别是在Quartus II 11.0之后的版本,都没有配套自身的仿真软件,所以Modelsim成了在FPGA设计流程中的进行功能仿真的首选仿真软件之一. ...

  4. asp.net webservice返回json问题

    使用jQuery $.ajax方法请求webservice 一.方法返回值为string,将json格式的字符串返回 设置contentType为"application/json;char ...

  5. js判断浏览器类型

    使用navigator.userAgent和来判断 PC端: <script type="text/javascript">var ua=navigator.userA ...

  6. Reactjs+Webpack+es2015 入门HelloWord(一)

    链接,自己很久前总结的blog. https://my.oschina.net/tangyuanyu/blog/730265

  7. c# json总结

    json确实很好用,但是网上写的很多都很复杂,不适合自己,然后每次写了又记不住,又要反复找,所以将其中的代码写下来.以后看这个就可以了 都引用了 Newtonsoft.Json 1.ashx,asmx ...

  8. 架构师养成记--15.Disruptor并发框架

    一.概述 disruptor对于处理并发任务很擅长,曾有人测过,一个线程里1s内可以处理六百万个订单,性能相当感人. 这个框架的结构大概是:数据生产端 --> 缓存 --> 消费端 缓存中 ...

  9. Mysql多表表关联查询 inner Join left join right join

    Mysql多表表关联查询 inner Join left join right join

  10. CSS样式基础总结

    首行缩进:text-indent:2em 行高:line-height:1.5em 1.5倍行距 也可以设置像素文字修饰:text-decoration:underline下划线 line-throu ...