Sublime Text 编辑器 安装插件 / 快捷键介绍
Sublime Text编辑器的使用:
官网:https://www.sublimetext.com/3
1、在Sublime Text 编辑器安装插件前的配置:
- 安装Packet controls插件,方法一通过View->Show Console菜单打开命令行,粘贴如下代码运行:
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())
完成后重启sublime,可以在Preferences菜单下看到Package Settings和Package Control两个子菜单。
直接下载Packet controls >> https://packagecontrol.io/installation#st3,下载好之后拷贝到Installed Packages这个文件夹里。可以通过Sublime Text “首选项”——“浏览插件目录“去查找Installed Packages文件夹。
- 如果做完以上操作之后,“Ctrl + shift+P”输入“install Package”还会报错,那就开启VPN,选择全局模式即可。
2、编辑器汉化插件:
如上已经安装了Package Control。
在sublime界面按Ctrl + Shift + P组合键,弹出输入框输入Install Package在敲回车键,然后输入ChineseLocalizations这个安装插件,等待安装完成就可以了。
3、安装Emmet插件:
Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发工具,可以大幅度提高前端的开发效率,
Emmet的使用方法也非常简单,以sublime text为例,直接在编辑器中输入HTML或CSS的代码的缩写,然后按tab键就可以拓展为完整的代码片段。
安装方法:在sublime界面按Ctrl + Shift + P组合键,弹出输入框输入Install Package在敲回车键,然后输入emmet找到 Emmet Css Snippets,点击就可以自动完成安装。
语法示例:
1、后代:>
缩写:nav>ul>li
<nav><ul><li></li></ul>
</nav>
兄弟:+
缩写:div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>
上级:^
缩写:div+div>p>span+em^bq
<div></div>
<div><p><span></span><em></em></p><blockquote></blockquote>
</div>
缩写:div+div>p>span+em^^bq
<div></div>
<div><p><span></span><em></em></p>
</div>
<blockquote></blockquote>
分组:()
缩写: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>
缩写:(div>dl>(dt+dd)*3)+footer>p
<div><dl><dt></dt><dd></dd><dt></dt><dd></dd><dt></dt><dd></dd></dl>
</div>
<footer><p></p>
</footer>
乘法:*
缩写:ul>li*5
<ul><li></li><li></li><li></li><li></li><li></li>
</ul>
自增符号:$
缩写: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">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
缩写:ul>li.item$$$*5
<ul><li class="item001"></li><li class="item002"></li><li class="item003"></li><li class="item004"></li><li class="item005"></li>
</ul>
缩写: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>
ID和类属性
缩写:#header
<div id="header"></div>
缩写:.title
<div class="title"></div>
缩写:form#search.wide
<form id="search" class="wide"></form>
缩写:p.class1.class2.class3
<p class="class1 class2 class3"></p>
自定义属性
缩写:p[title="Hello world"]
<p title="Hello world"></p>
缩写:td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>
缩写:[a='value1' b="value2"]
<div a="value1" b="value2"></div>
文本:{}
缩写:a{Click me}
<a href="">Click me</a>
缩写:p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</p>
隐式标签
缩写:em>.class
<em><span class="class"></span></em>
缩写:ul>.class
<ul><li class="class"></li>
</ul>
缩写:table>.row>.col
<table><tr class="row"><td class="col"></td></tr>
</table>
HTML
缩写:!
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body></body>
</html>
缩写:meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
缩写:form:post
<form action="" method="post"></form>
缩写:input:h
<input type="hidden" name="" />
缩写:input:search
<input type="search" name="" id="" />
缩写:input:color
<input type="color" name="" id="" />
缩写:btn:s
<button type="submit"></button>
Emmet示例参考:https://blog.csdn.net/xiaozhi_2016/article/details/52415897
使用方法
跳转 Go to anything(Ctrl+P)
- 跳转到具体行数:输入 : + 数字
- 跳转到项目内的文件: 输入 文件名,出现搜索结果时可以点击上下方向键预览代码,回车进入
- 跳转到具体函数 / CSS 位置:输入 @ + 名
- html文件内跳转 :输入 # + 名
修改语法模式,启动命令模式 (Ctrl + shift +P)
- 可以按上下方向键选择语法模式,也可以输入搜索。
比如说要隐藏/显示右上角的文档地图 可以输入 Toggle Minimap。
- 点击编辑器右下方的语法展示区,选择。
多行游标(Ctrl + D )取消选中的游标(Ctrl + K)
- 使用单词选择产生多行游标:用鼠标选中 一个参数值,按 Ctrl + D,游标会出现在和这个参数值一样的值后面。
- 在所有和选中项一致的词后面出现游标:Alt+F3
- Ctrl + shift + L
- 默认情况下,使用 shift + 鼠标右键点击 可以产生多行游标
新增一行(Ctrl + 回车)
快速生成多个子元素(父元素标签>子元素类名/id名$*数量)
举个例子:在ul标签里生成5个类名依次排序的li
ul >.item$*5
h1~h6:
h1~6{内容},回车即可生成标题
缩进:
向左缩进:Ctrl + [
向右缩进:Ctrl+]
z粘贴代码时保持缩进(Ctrl+shift+V)
未完待续~
Sublime Text 编辑器 安装插件 / 快捷键介绍相关推荐
- Sublime Text 2安装插件的方法
中文原文:一些必不可少的sublime text 2插件 整理自:Essential Sublime Text 2 Plugins and Extensions 请尊重版权,转载请注明来源,多谢! S ...
- 解决sublime text无法安装插件问题
安装Sublime Text3 之后要安装一些外置的工具包, 1.先用快捷键 Ctrl + ` 后面那个就是键盘上面数字1旁边的那个键,打开工作的控制台. 2.打开下图所示的设置,设置:"d ...
- Sublime Text 中文版安装和插件安装
Sublime Text 中文版安装:http://www.sublimetext.cn/ 插件安装: 1.配置package control 下载:https://github.com/wbond/ ...
- sublime html整理阶梯,sublime text 之添加插件 并使用
通过package controll install 安装各种插件: 1:AdvancedNewFile,安装完毕后 快捷键:ctr+alt+n:输入框中输入你要创建的文件夹和文件,就创建好了. ...
- VS Code 和 Sublime Text 3 安装及常用插件安装
大家可以加我的个人微信,一起在学习交流群,交流学习,我的微信号:woainivery VS Code 1. Auto Close Tag 自动添加HTML / XML关闭标签 2. Auto Rena ...
- Sublime Text 3 安装及插件推荐
本篇介绍跨平台编辑器Sublime Text 3的安装和其插件推荐. 目录: 1.介绍 2.下载安装 3.插件 4.参考资料 1.介绍 Sublime Text具有漂亮的用户界面和强大的功能,例如代码 ...
- Sublime Text 3安装常用插件的方法及使用报错方法总结
常用安装方法 Sublime必备插件 必备的:Alignment,JsFormat,CSSComb,CTags,DocBlockr,Emmet,FileDiffs,SASS,LESS,SASS Bui ...
- Sublime Text 3安装,使用技巧及快捷键笔记
一,简介 sublime3是轻量级文本编辑器,可跨平台启动且速度快. 可以打开各种格式的文件(html,js,xml,txt等) 二,安装 sublime text 3的安装及汉化等按正常软件安装即可 ...
- 【后续还会补充】Sublime Text 4 常用插件安装及配置方法
目录 一.安装 Package Control 组件 二.通用的插件 1. AutoFileName 2. Bracket Highlighter 3. DocBlockr 三.Web 前端开发的插 ...
最新文章
- 《Java编程思想》学习笔记4——集合容器
- Apache开源项目
- 使用 ABAP 读取每个月的月份名称和编号
- Linux监控命令之 top
- sparksql一些指标
- vbs脚本延时_Wincc的脚本进程执行问题
- Mybatis中(#{ })模糊查询like(使用oracle的concat函数嵌套拼接SQL)
- ACS——网管的九阳神功
- 【图文说明】屏幕录像专家如何安装、录制小文件的录像
- 东营市初中计算机考试查询系统,东营市初中学业水平考试管理平台2021年东营中考成绩查询系统入口...
- [Excel函数] 逻辑判断函数
- 关于 打印页面 图片被截断
- 手把手教你实现嵌入式SNMP代理第1部分-熊健-专题视频课程
- 王者荣耀苹果微信哪个服务器最强,王者荣耀:国服最高战力!这三个英雄最高战力比拼ios微信区完胜...
- Android使用Bugly实现静默安装/自动安装app
- 怎么把视频做成高清的GIF动态图?简单又快的方法
- 自动弹图片html,HTML图片预览弹出层实现
- 数据库设计之冗余字段
- C++:this指针的简单理解
- 西西吹雪:从程序员到项目经理(二)