首先先介绍如何启用插件安装功能:

  1. 打开Sublime 3,然后按 ctrl+` 或者在View → Show Console
  2. 在打开的窗口里黏贴这个网站上的代码(注意: 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)
  3. 安装完成后,按 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+上下键:替换行

sublime3 前端个人常用插件及快捷键的更多相关文章

  1. Notepad++前端开发常用插件介绍

    Notepad++前端开发常用插件介绍 Notepad++除了自身的功能强大之外,更是有许多非常的优秀的插件,下面就总结一下前端开发过程一些比较常用的插件. Emmet Emmet的前身是Zen Co ...

  2. sublime text 3 前端开发常用插件

    sublime text 3 前端开发常用插件 https://packagecontrol.io/browse 代码对齐: Alignment html代码补全:  Emmet CoffeeScri ...

  3. Notepad++前端开发常用插件介绍 - BorisHuai前端修炼 - 博客频道 - CSDN

    Notepad++前端开发常用插件介绍 - BorisHuai前端修炼 - 博客频道 - CSDN.NET http://blog.csdn.net/borishuai/article/details ...

  4. Idea(三)常用插件以及快捷键总结

    idea常用插件以及快捷键 现在开发中和日常自己开发都统一换成了idea进行开发了.现在针对自己常用到的插件和快捷键进行总结记录下. 插件 Alibaba Java Coding Guidelines ...

  5. CDN公共库、前端开发常用插件一览表(VendorPluginLib)

    =======================================================================================前端CDN公共库===== ...

  6. sublime介绍常用插件和快捷键

    简介 Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来的,它最初被设计为一个具有丰富扩展功能的Vim. 是一个跨平台的编辑器,同时支持Windows.Linux.M ...

  7. Eclipse常用插件 + Eclipse快捷键

    J2EE开发IDE,常用的有Eclipse.Myeclipse.Intellij IDEA 版本(Luna):http://www.eclipse.org/downloads/     版本(2015 ...

  8. IDEA 常用插件及快捷键总结

    现在开发中和日常自己开发都统一换成了 IDEA 进行开发了.现在针对自己常用到的插件和快捷键进行总结记录下. 插件 Alibaba Java Coding Guidelines:阿里巴巴编码规约 Gr ...

  9. 转: sublime text常用插件和快捷键

    Sublime Text 2是一个轻量.简洁.高效.跨平台的编辑器.博主之前一直用notepdd++写前端代码,用得也挺顺手了,早就听说sublime的大名,一直也懒得去试试看,认为都是工具用着顺手就 ...

随机推荐

  1. Selenium上机实验

    1.安装SeleniumIDE插件 2.学会使用SeleniumIDE录制脚本和导出脚本 3.访问https://psych.liebes.top/st使用学号登录系统(账户名为学号,密码为学号后6位 ...

  2. zw·10倍速大数据与全内存计算

    zw·10倍速大数据与全内存计算 zw全内存10倍速计算blog,早就在博客园机器视觉栏目发过,大数据版的一直挂着,今天抽空补上. 在<零起点,python大数据与量化交易>目录中 htt ...

  3. Node.js学习准备篇

    这里写个Node.js 准备篇包含内容有node.js 的安装,命令行运行node.js 文件,使用webStrom 编写 node.js 时有提示功能,并用webStrom 运行 Node.js 其 ...

  4. 使用现有的appid和appsecret无法打开二维码

    在微信公众平台申请的现有的appid和appsecret无法打开二维码 因为已有的appid和appsecret是微信公众平台认证的,没有在开放平台认证,所以会显示 "Scope参数错误或者 ...

  5. C语言实例:函数指针

    函数指针:函数指针数组的使用: 不带参数和返回值的函数指针: #include <stdio.h> #include <stdlib.h> //定义一个没有返回值也没有入口参数 ...

  6. 剑指offer(35)数组中的逆序对

    题目描述 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P.并将P对1000000007取模的结果输出. 即输出P%1000 ...

  7. iOS开发 -------- 网络状态监测

    一 示例代码 需要先把第三方Reachability下载导入到工程中  下载网址  https://github.com/tonymillion/Reachability 1 封装网络工具类 Netw ...

  8. git如何撤销git add操作?

    答: 使用git reset <file name>即可撤销

  9. Character Encoding in .NET

    https://docs.microsoft.com/en-us/dotnet/standard/base-types/character-encoding#Encodings Characters ...

  10. Learning-Python【14】:匿名函数与函数递归

    一.什么是匿名函数 匿名函数就是没有名字的函数,又叫lambda表达式.用于一些简单的需要用函数去解决的问题,特点是只能在定义时使用一次,且函数体只有一行 匿名函数的定义就相当于只产生一个变量的值,而 ...