Sublime Text 3 web 开发常用配置
前沿
Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim。是目前应用最广泛的编程工具之一,受到众多程序猿的追捧。网络上已有很多关于Sublime Text3的配置文章,但很多都不太适合本人的需求,很多插件在前端开发中很少会用到或者不能恰当的使用。由于每次重装一次Sublime Text3都需要在各种文章中搜寻适合自己的插件并安装,做了很多无用功,特写出本文总结一下,以备下次使用。
Sublime Text3 注册
Sublime Text3是一款收费软件,需要注册后才能使用。注册方式如下:
打开Sublime Text3-->Help-->Eenter License-->输入注册码。
限于国人知识产权的薄弱意思和贪婪心理,很少有人真会去买注册码,以下是3个注册码:
- —– BEGIN LICENSE —–
- Andrew Weber
- Single User License
- EA7E-855605
- 813A03DD 5E4AD9E6 6C0EEB94 BC99798F
- 942194A6 02396E98 E62C9979 4BB979FE
- 91424C9D A45400BF F6747D88 2FB88078
- 90F5CC94 1CDC92DC 8457107A F151657B
- 1D22E383 A997F016 42397640 33F41CFC
- E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D
- 5CDB7036 E56DE1C0 EFCC0840 650CD3A6
- B98FC99C 8FAC73EE D2B95564 DF450523
- —— END LICENSE ——
- —– BEGIN LICENSE —–
- K-20
- Single User License
- EA7E-940129
- 3A099EC1 C0B5C7C5 33EBF0CF BE82FE3B
- EAC2164A 4F8EC954 4E87F1E5 7E4E85D6
- C5605DE6 DAB003B4 D60CA4D0 77CB1533
- 3C47F579 FB3E8476 EB3AA9A7 68C43CD9
- 8C60B563 80FE367D 8CAD14B3 54FB7A9F
- 4123FFC4 D63312BA 141AF702 F6BBA254
- B094B9C0 FAA4B04C 06CC9AFC FD412671
- 82E3AEE0 0F0FAAA7 8FA773C9 383A9E18
- —— END LICENSE ——
- —– BEGIN LICENSE —–
- J2TeaM
- 2 User License
- EA7E-940282
- 45CB0D8F 09100037 7D1056EB A1DDC1A2
- 39C102C5 DF8D0BF0 FC3B1A94 4F2892B4
- 0AEE61BA 65758D3B 2EED551F A3E3478C
- C1C0E04E CA4E4541 1FC1A2C1 3F5FB6DB
- CFDA1551 51B05B5D 2D3C8CFE FA8B4285
- 051750E3 22D1422A 7AE3A8A1 3B4188AC
- 346372DA 37AA8ABA 6EB30E41 781BC81F
- B5CA66E3 A09DBD3A 3FE85BBD 69893DBD
- —— END LICENSE ——
Sublime Text 3安装插件的方法:
直接安装
安装Sublime text 3插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages)。
使用Package Control组件安装
也可以安装package control组件,然后直接在线安装:
- 按Ctrl+`调出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 Text 3。
- 如果在Perferences->package settings中看到package control这一项,则安装成功。
如果这种方法不能安装成功,可以进行手动安装:
- 先下载https://github.com/wbond/sublime_package_control中的zip文件,解压后将文件夹名更改为package control。
- 下载插件分支https://github.com/wbond/sublime_package_control/tree/python3中的zip文件,解压后覆盖到package control中,完成此插件API函数的更新。
- 将package control文件夹放入C:\Users\Mr.DenGo(你的电脑名)\AppData\Roaming\Sublime Text 3\Packages中,重启sublime text 3即可生效。
用Package Control安装插件的方法:
- 按下Ctrl+Shift+P调出命令面板
- 输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件。
常用插件列表
Emmet
Emmet绝对的节省时间。您可以轻松快速地编写HTML。
使用方法: ctrl
+ alt
+ enter
,并且开始输入Emmet风格的HTML.
详细使用方法可以参考 Emmet指南 。
DocBlockr
一个真正简单的方式来轻松地创建许多语言包括JavaScript,PHP和CoffeeScript的文档块。只要在函数的上面输入 /**
,按 Tab
就可以了。DocBlockr会观察函数需要的变量名和类型,并创建文档块。
Alignment (代码对齐)
一个非常简单和易于使用的插件,使你的代码组织和美观。当您重温代码时候非常有用。
使用方法:选中要调整的行,然后按 Ctrl
+ Alt
+ A。
BracketHighlighter
该插件提供行数列高亮的各种配对的语法符号。(注:就是将配对的括号等显示在行数列上)
Sublime Prefixr
Prefixr,CSS3 私有前缀自动补全插件,显然也很有用哇。
JS Format
一个JS代码格式化插件。
SublimeLinter
一个支持lint语法的插件,可以高亮linter认为有错误的代码行,也支持高亮一些特别的注释,比如“TODO”,这样就可以被快速定位。(IntelliJ IDEA的TODO功能很赞,这个插件虽然比不上,但是也够用了吧)
JsMinifier
该插件基于Google Closure compiler,自动压缩js文件。
jQuery
Sublime Text3支持jQuery。
CSSComb
这是用来给CSS属性进行排序的格式化插件。如果你想保持的代码干净整洁,并且希望按一定的顺序排列(是不是有点强迫症了?),那么这个插件是一种有效解决的方案。特别是当你和其他有自己代码编写风格的开发者一同协作的时候。
MarkDown Editing
SublimeText不仅仅是能够查看和编辑 Markdown 文件,但它会视它们为格式很糟糕的纯文本。这个插件通过适当的颜色高亮和其它功能来更好地完成这些任务。
DocBlockr
DocBlockr 可以使你很方便地对代码建立文档。它会解析函数,变量,和参数,根据它们自动生成文档范式,你的工作就是去填充对应的说明。
Git
Git插件,提供Git常用的命令集合。
FileDiffs
查找文档不同。
ColorPicker
如果你经常要查看或设置颜色值,这个插件可以很方便地调用你本机的调色板应用。这是一个双向的功能,你既可以在调色板中选择一个颜色,然后按“确定”按钮把该值填写到 SublimeText 中活动文档的当前位置,也可以在活动文档中选择一个颜色的值,按此插件的快捷键就会在显示的调色板中定位到该值所对应的颜色。
CanIUse
如果您想检查浏览器是否支持你包括在你的代码中的CSS和HTML元素,那么这是你需要的插件。所有您需要做的就是选择有疑问的元素,插件将为你做其余的事情。
附Sublime Text 3 快捷键列表:
精华版
- Ctrl+Shift+P:打开命令面板
- Ctrl+P:搜索项目中的文件
- Ctrl+G:跳转到第几行
- Ctrl+W:关闭当前打开文件
- Ctrl+Shift+W:关闭所有打开文件
- Ctrl+Shift+V:粘贴并格式化
- Ctrl+D:选择单词,重复可增加选择下一个相同的单词
- Ctrl+L:选择行,重复可依次增加选择下一行
- Ctrl+Shift+L:选择多行
- Ctrl+Shift+Enter:在当前行前插入新行
- Ctrl+X:删除当前行
- Ctrl+M:跳转到对应括号
- Ctrl+U:软撤销,撤销光标位置
- Ctrl+J:选择标签内容
- Ctrl+F:查找内容
- Ctrl+Shift+F:查找并替换
- Ctrl+H:替换
- Ctrl+R:前往 method
- Ctrl+N:新建窗口
- Ctrl+K+B:开关侧栏
- Ctrl+Shift+M:选中当前括号内容,重复可选着括号本身
- Ctrl+F2:设置/删除标记
- Ctrl+/:注释当前行
- Ctrl+Shift+/:当前位置插入注释
- Ctrl+Alt+/:块注释,并Focus到首行,写注释说明用的
- Ctrl+Shift+A:选择当前标签前后,修改标签用的
- F11:全屏
- Shift+F11:全屏免打扰模式,只编辑当前文件
- Alt+F3:选择所有相同的词
- Alt+.:闭合标签
- Alt+Shift+数字:分屏显示
- Alt+数字:切换打开第N个文件
- Shift+右键拖动:光标多不,用来更改或插入列内容
- 鼠标的前进后退键可切换Tab文件
- 按Ctrl,依次点击或选取,可需要编辑的多个位置
- 按Ctrl+Shift+上下键,可替换行
选择类
- Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本。
- Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑。举个栗子:快速选中并更改所有相同的变量名、函数名等。
- Ctrl+L 选中整行,继续操作则继续选择下一行,效果和 Shift+↓ 效果一样。
- Ctrl+Shift+L 先选中多行,再按下快捷键,会在每行行尾插入光标,即可同时编辑这些行。
- Ctrl+Shift+M 选择括号内的内容(继续选择父括号)。举个栗子:快速选中删除函数中的代码,重写函数体代码或重写括号内里的内容。
- Ctrl+M 光标移动至括号内结束或开始的位置。
- Ctrl+Enter 在下一行插入新行。举个栗子:即使光标不在行尾,也能快速向下插入一行。
- Ctrl+Shift+Enter 在上一行插入新行。举个栗子:即使光标不在行首,也能快速向上插入一行。
- Ctrl+Shift+[ 选中代码,按下快捷键,折叠代码。
- Ctrl+Shift+] 选中代码,按下快捷键,展开代码。
- Ctrl+K+0 展开所有折叠代码。
- Ctrl+← 向左单位性地移动光标,快速移动光标。
- Ctrl+→ 向右单位性地移动光标,快速移动光标。
- shift+↑ 向上选中多行。
- shift+↓ 向下选中多行。
- Shift+← 向左选中文本。
- Shift+→ 向右选中文本。
- Ctrl+Shift+← 向左单位性地选中文本。
- Ctrl+Shift+→ 向右单位性地选中文本。
- Ctrl+Shift+↑ 将光标所在行和上一行代码互换(将光标所在行插入到上一行之前)。
- Ctrl+Shift+↓ 将光标所在行和下一行代码互换(将光标所在行插入到下一行之后)。
- Ctrl+Alt+↑ 向上添加多行光标,可同时编辑多行。
- Ctrl+Alt+↓ 向下添加多行光标,可同时编辑多行。
编辑类
- Ctrl+J 合并选中的多行代码为一行。举个栗子:将多行格式的CSS属性合并为一行。
- Ctrl+Shift+D 复制光标所在整行,插入到下一行。
- Tab 向右缩进。
- Shift+Tab 向左缩进。
- Ctrl+K+K 从光标处开始删除代码至行尾。
- Ctrl+Shift+K 删除整行。
- Ctrl+/ 注释单行。
- Ctrl+Shift+/ 注释多行。
- Ctrl+K+U 转换大写。
- Ctrl+K+L 转换小写。
- Ctrl+Z 撤销。
- Ctrl+Y 恢复撤销。
- Ctrl+U 软撤销,感觉和 Gtrl+Z 一样。
- Ctrl+F2 设置书签
- Ctrl+T 左右字母互换。
- F6 单词检测拼写
搜索类
- Ctrl+F 打开底部搜索框,查找关键字。
- Ctrl+shift+F 在文件夹内查找,与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找,略高端,未研究。
- Ctrl+P 打开搜索框。举个栗子:1、输入当前项目中的文件名,快速搜索文件,2、输入@和关键字,查找文件中函数名,3、输入:和数字,跳转到文件中该行代码,4、输入#和关键字,查找变量名。
- Ctrl+G 打开搜索框,自动带:,输入数字跳转到该行代码。举个栗子:在页面代码比较长的文件中快速定位。
- Ctrl+R 打开搜索框,自动带@,输入关键字,查找文件中的函数名。举个栗子:在函数较多的页面快速查找某个函数。
- Ctrl+: 打开搜索框,自动带#,输入关键字,查找文件中的变量名、属性名等。
- Ctrl+Shift+P 打开命令框。场景栗子:打开命名框,输入关键字,调用sublime text或插件的功能,例如使用package安装插件。
- Esc 退出光标多行选择,退出搜索框,命令框等。
显示类
- Ctrl+Tab 按文件浏览过的顺序,切换当前窗口的标签页。
- Ctrl+PageDown 向左切换当前窗口的标签页。
- Ctrl+PageUp 向右切换当前窗口的标签页。
- Alt+Shift+1 窗口分屏,恢复默认1屏(非小键盘的数字)
- Alt+Shift+2 左右分屏-2列
- Alt+Shift+3 左右分屏-3列
- Alt+Shift+4 左右分屏-4列
- Alt+Shift+5 等分4屏
- Alt+Shift+8 垂直分屏-2屏
- Alt+Shift+9 垂直分屏-3屏
- Ctrl+K+B 开启/关闭侧边栏。
- F11 全屏模式
- Shift+F11 免打扰模式
Sublime Text 3 web 开发常用配置的更多相关文章
- sublime text 3 前端开发常用插件
sublime text 3 前端开发常用插件 https://packagecontrol.io/browse 代码对齐: Alignment html代码补全: Emmet CoffeeScri ...
- Sublime Text 3前端开发常用优秀插件介绍
. 首页 博客园 联系我 前言:关于Sublime Text 3. Package Control插件管理. Package Control使用方法/安装Emmet插件. Emmet插件. JsFor ...
- sublime text 3中emmet常用技巧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- web开发常用图片格式
web开发常用图片格式有:gif jpg/jpeg png gif:图片压缩率高,可以显示动画,但是只能显示256色,可能造成颜色丢失. jpg:图片压缩率高(有损压缩),可以用小文件来显示 ...
- java web开发环境配置系列(二)安装tomcat
在今天,读书有时是件“麻烦”事.它需要你付出时间,付出精力,还要付出一份心境.--仅以<java web开发环境配置系列>来祭奠那逝去的…… 1.下载tomcat压缩包,进入官网http: ...
- java web开发环境配置系列(一)安装JDK
在今天,读书有时是件“麻烦”事.它需要你付出时间,付出精力,还要付出一份心境.--仅以<java web开发环境配置系列>来祭奠那逝去的…… 1.下载JDK文件(http://www.or ...
- web.xml常用配置详解
web.xml常用配置详解 context-param 指定 ServletContext(上下文) 配置文件路径,基本配置一般是Spring配置文件,或者是spring-security的配置文件. ...
- Win7 32位系统下Sublime text 3的安装以及配置C/C++、java、python的开发环境方法
本人初学者,此文仅是对这几天鼓捣subime text 3一点微不足道的经验总结,如有明显错误,欢迎指正! 好了,废话少说,进入正题,之前编程java一直用的是eclipse,java的主流IDE,后 ...
- sublime text 3 快捷键大全以及配置编译环境
Sublime text 3是码农最喜欢的代码编辑器,每天和代码打交道,必先利其器,掌握基本的代码编辑器的快捷键,能让你打码更有效率.刚开始可能有些生疏,只要花一两个星期坚持使用并熟悉这些常用的快捷键 ...
随机推荐
- Linux编程中 #define _XOPEN_SOURCE的作用
[误解]#define _XOPEN_SOURCE决不是简单的宏定义它是使程序符合系统环境的不可缺少的部分 [概念]Glibc 所实现全部或部分规范下的功能有:1.ISO C: C语言国际标准. 2. ...
- 单点登录(一)-----理论-----单点登录SSO的介绍和CAS+选型
什么是单点登录(SSO) 单点登录主要用于多系统集成,即在多个系统中,用户只需要到一个中央服务器登录一次即可访问这些系统中的任何一个,无须多次登录. 单点登录(Single Sign On),简称为 ...
- 《剑指offer》— JavaScript(23)二叉搜索树的后序遍历序列
二叉搜索树的后序遍历序列 题目描述 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 相关知识 二叉查找树(B ...
- eclipse 支持 Robot framework 编辑环境
一.配置python 环境 1. 设置pydev库 打开Help -> Install New Software, 点击'Add',设置Name为“Pydev”,Loca ...
- 【位运算】判断一个数是否为2的n次方
import java.util.Scanner; /** * 功能:用位运算,判断一个数是否为2的n次方. * 思路:用1做移位操作,然后判断移位后的值是否与给定的数相同. */ public cl ...
- wepy
npm install -g cnpm --registry=https://registry.npm.taobao.org https://blog.csdn.net/qq_40414159/art ...
- H5离线存储-manifest
起源 html5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐 ...
- python 9*9 乘法表
row = 1 while row <= 9: col = 1 while col <= row: print('%d*%d=%d'%(col, row, row*col), end='\ ...
- Android 实现两个list分别出现(在某一时刻只出现一个控件)
第一种方法: 在.xml文件中将这两个List分别放入不同的布局管理器中,比如说 <RelativeLayout android:layout_width="match_parent& ...
- linux配置网路 设定主机名 ssh bash命令 通配符
临时配置网络(ip,网关,dns) #ifconfig ens33 192.168.185/24 #ens33网卡名称.192.168.185/24是要配置的ip地址/子网掩码 #vim /etc/r ...