前端开发的几个必备SUBLIME3插件及常用快捷键大全
首先先介绍如何启用插件安装功能:
- 打开Sublime 3,然后按 ctrl+` 或者在View → Show Console
- 在打开的窗口里黏贴这个网站上的代码(注意: Sublime 2和3所黏贴的代码不一样,注意选择):import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; 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://packagecontrol.io/' + 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)
- 安装完成后,按 Ctrl+Shift+p (Windows) / Command+Shift+p (Mac), 输入'Install Packages',之后Sublime会自动下载插件列表,然后弹出一个小的下拉菜单让你填写想要下载的插件名称。
接下来是本文重点,前端开发的几个必备插件(越靠后的几个越实用):
CSS3
链接: https://github.com/y0ssar1an/CSS3
简介: 支持CSS3里的语法高亮。(Sublime3里自带的CSS高亮不够用)。安装后, 打开一个CSS文件,然后按照下面GIF操作,将CSS3高亮作为CSS文件的默认高亮:
安装: Ctrl+Shift+P → Package Control: Install Package → CSS3
Sidebar Enhancement
链接: https://github.com/titoBouzout/SideBarEnhancements
简介: 让Sublime的侧边栏多出许多必备功能,如在浏览器中打开,改名,复制文件链接等等
安装: Ctrl+Shift+P → Package Control: Install Package → SideBarEnhancements
Git Gutter
链接: https://github.com/jisaacks/GitGutter
简介: 如果你使用Git做版本控制的话,这个插件可以在行号前标记处哪些行是新加的,删除的和修改过的。
安装: Ctrl+Shift+P → Package Control: Install Package → GitGutter
Bracket Highlighter
链接: https://github.com/facelessuser/BracketHighlighter
简介: 高亮各种括号的起始和结尾
安装: Ctrl+Shift+P → Package Control: Install Package → BracketHighlighter
HTML-CSS-JS Prettify
链接: https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify
简介: 编辑HTML, CSS, JS时,经常会出现缩进不对,代码行不对其的情况。装了这个插件之后,只要按下Ctrl+Shift+h (Windows), Command+Shift+h (Mac), 你的文档就会被整理干净。
安装: Ctrl+Shift+P → Package Control: Install Package → HTML-CSS-JS Prettify
livestyle
链接: http://livestyle.emmet.io/
简介: 这货太神奇了。在调试页面的样式时,经常会打开Chrome自带的开发者工具,然后编辑CSS,等满意了再把CSS代码黏贴回Sublime里。这货允许你在Chrome里修改CSS,然后相对应的在Sublime里的CSS文件就自动更新了!(你更新Sublime里的CSS并保存,打开的网页也会自动更新)
安装: 需要安装两个插件,一个是Sublime的插件,一个是Chrome的插件。
Sublime插件: Ctrl+Shift+P → Package Control: Install Package → LiveStyle
Chrome插件: https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg
用法: 先重启你的Sublime,然后打开一个CSS文件。然后在Chrome里打开包含这个CSS的HTML页面 → 打开Chrome的开发者工具,工具栏的最后会多出一个 LiveStyle选项:
看下方File mapping里被HTML页面引用的CSS文件会自动和Sublime里打开的同名CSS文件关联起来。如果名字都对的话你就可以在Elements里开始编辑CSS了。编辑好后看下Sublime,该CSS文件会被自动更新。
Emmet
链接: http://docs.emmet.io/abbreviations/syntax/
简介: 通过一套简单的语法让你快速生成大量的HTML代码,比如输入:
div.row>ul>li
然后按TAB会生成:
<div class="row"> <ul> <li></li> </ul> </div>
虽然要背一下语法,但是只需要记忆最常用的几个就好。效率提升杠杠的。
安装:Ctrl+Shift+P → Package Control: Install Package → Emmet
JsFormat
JavaScript格式化
按快捷键 Ctrl+Alt+F 即可格式化当前的 js 文件。平时书写代码用的非常多,或者下载格式化别人压缩过的代码。
插件下载:https://github.com/jdc0589/JsFormat
SublimeTmpl
快速生成文件模板
SublimeTmpl 能新建 html、css、javascript、php、python、ruby 六种类型的文件模板,所有的文件模板都在插件目录的templates文件夹里,可以自定义编辑文件模板。
SublimeTmpl默认的快捷键
ctrl+alt+h → html
ctrl+alt+j → javascript
ctrl+alt+c → css
ctrl+alt+p → php
ctrl+alt+r → ruby
ctrl+alt+shift+p → python
如果想要新建其他类型的文件模板的话,先自定义文件模板方在 templates 文件夹里,再分别打开 Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings 这四个文件照着里面的格式自定义想要新建的类
插件下载:https://github.com/kairyou/SublimeTmpl
ConvertToUTF8
支持 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的插件
CSScomb
CSS属性排序
sublime常用快捷键
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+右键拖动:光标多不,用来更改或插入列内容
Ctrl+依次左键点击或选取,可需要编辑的多个位置
Ctrl+Shift+上下键:替换行
- 博客群发(2)--实现登陆
- 算法——递推算法
- 算法——贝叶斯
- 机器学习算法实现解析——liblbfgs之L-BFGS算法
- 机器学习算法实现解析——libFM之libFM的训练过程之Adaptive Regularization
- 虚拟化平台cloudstack(2)——安装(上)
- 机器学习算法实现解析——libFM之libFM的训练过程之SGD的方法
- 虚拟化平台cloudstack(3)——安装(下)
- 机器学习算法实现解析——libFM之libFM的训练过程概述
- 虚拟化平台cloudstack(4)——几个异常
- Golang语言 xml解析实例
- 机器学习算法实现解析——libFM之libFM的模型处理部分
- Go语言使用protobuf数据通信--师出同门,懂的人理解吧
- 虚拟化平台cloudstack(6)——使用maven:jetty调试
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- shell tcping 端口,ping网段所有ip端口或tcping指定IP端口
- Redis | 源码阅读 —— 链表
- Python从入门到熟练(4):基础数据类型
- 【MaskTheFace】给人脸图片戴口罩!
- Python从入门到熟练(5): 数据类型进阶
- Python从入门到熟练(6): 流程控制
- Python包:json扩展包demjson使用
- 【论文解读】无需额外数据、Tricks、架构调整,CMU开源首个将ResNet50精度提升至80%+新方法
- 机器学习模型调参指南(附代码)
- Flink SQL 自定义函数指南 - 以读取 GBK 编码的数据库为例
- 光照不均匀图像分割技巧1——分块阈值
- MySQL 8.0新特性 — 不可见索引
- 【小白学PyTorch】9.tensor数据结构与存储结构
- 【Python相关】jupyter平台最强插件没有之一
- 基于 OpenCV 的图像分割