Sublime Text 3 插件整理

  Sublime Text作为一个尽为人知的代码编辑器,其优点不用赘述。界面整洁美观、文本功能强大,且运行速度极快,非常适合编写代码,写文章做笔记。Sublime Text还支持Mac、Windows和Linux各大平台,方便用户使用。种类繁多、功能强大的插件更给Sublime Text 3锦上添花。下载Package Control后就可以迅速的开启插件之路。

  这里是我的sublime text 3插件列表,总结一下方便自己在其他环境中直接配置。

1. SideBarEnhancements
  SideBarEnhancements是一款很实用的右键菜单增强插件,有以diff形式显示未保存的修改、在文件管理器中显示该文件、复制文件路径、在侧边栏中定位该文件等功能,也有基础的诸如新建文件/目录,编辑,打开/运行,显示,在选择中/上级目录/项目中查找,剪切,复制,粘贴,重命名,删除,刷新等常见功能。

    配置快捷键
    点击工具栏的Preferences -> Package Settings -> Side Bar -> Key Bindings-User,在打开的配置文件中按如下格式配置即可。

 1 [
 2     // 使用快捷键F12直接在chrome中打开文件
 3     {
 4         "keys": ["f12"],
 5         "command": "side_bar_files_open_with",
 6         "args": {
 7             "paths": [],
 8             "application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
 9             "extensions": ".*"
10         }
11     }
12 ]

    打开其他软件
    sublime text可以直接预览图片等格式的文件,不过有了这个插件,就可以直接在Side Bar中启用Photoshop等工具了。
    使用方法:
      在Side Bar中的一个文件上右键,有个Open With选项,进入Edit Applications就可以配置文件了。
      如下为我配置的Photoshop,主要修改的就是将application中的值改为电脑中软件的路径;
      保存之后就可以在Open With中选择Photoshop,就可以让其打开图片类型的文件了。

 1 //Photoshop
 2 {
 3   "caption": "Photoshop",
 4   "id": "side-bar-files-open-with-photoshop",
 5
 6   "command": "side_bar_files_open_with",
 7   "args": {
 8     "paths": [],
 9     "application": "C:\\Program Files\\Adobe\\Adobe Photoshop CC 2014\\Photoshop.exe", // OSX
10     "extensions": "psd|png|jpg|jpeg", //any file with these extensions
11     "args": []
12   },
13   "open_automatically": false // will close the view/tab and launch the application
14 },

2. Bracket?Highlighter
  Bracket?Highlighter是一个括号、引号、标签高亮插件,支持[]、()、{}、""、‘‘和<tag></tag>等,比Sublime Text自带的高亮要明显得多。
  使用方法:安装即生效
  

3. FileDiffs
  FileDiffs插件可以让开发者比较两个不同文件的差异,比较的对象包括当前文件、另一文件、剪切板中的代码甚至未保存文件等。
  使用方法:
  在打开的文件或选中的文字上右键就有相关的选项,FileDiffs Menu用于显示所有的命令。

4. DocBlockr
  DocBlockr是一个用于生成注释的插件,可以使你很方便地对代码建立文档。
  它会解析函数,变量,和参数,根据它们自动生成文档范式,你的工作就是去填充对应的说明。
  

5. JS Format
  一个JS代码格式化插件。
  使用方法:Ctrl+Alt+F

6. Trimmer
  你知道当你编写代码时,由于错误或别的某些原因,会产生一些不必要的空格。需要注意的是多余的空格有时也会造成错误。
  这个插件会自动删除这些不必要的空格。
  使用方法:
    默认情况下的快捷键是Ctrl+Alt+S,用于清除每行末尾的空格。
    或者输入Ctrl+Shift+P调出命令面板,输入Trimmer,即可显示所有操作。
    

7.Emmet
  Emmet(前身是Zen Coding)是一个前端开发不可缺少的插件,它让编写HTML和CSS代码变得简单,节省大量时间。
  Emmet可使开发者用缩写形式书写代码,再用“扩展”功能自动将代码扩展至完整样式。
  早在2009年,Zen Coding作为具有革命性的HTML和CSS代码编辑插件一经问世,直到现在帮助了无数的开发者,减少他们的时间,使得编写代码变得简便有趣。现在,Emmet已经超越了Zen Coding到达了更高层次,普适性的功能将给更多的开发者带来便利。
  基本用法:输入简写形式,然后按 Tab 键。
  详细用法见官方文档

8.SublimeCodeIntel
  SublimeCodeIntel作为一个代码提示和补全插件,支持JavaScript、Mason、XBL、XUL、RHTML、SCSS、Python、HTML、Ruby、Python3、XML、Sass、XSLT、Django、HTML5、Perl、CSS、Twig、Less、Smarty、Node.js、Tcl、TemplateToolkit和PHP等所有语言,是SublimeText自带代码提示功能基础上一个更好的扩展,自带代码提示功能只可提示系统代码,而SublimeCodeIntel则可以提示用户自定义代码。SublimeCodeIntel支持跳转到变量、函数定义的功能,另外还有自动补全的功能,十分方便。

9.SublimeLinter
  SublimeLinter是少数几个能在sublime text 3工作的代码检查插件,SublimeLinter支持JavaScript、CSS、HTML、Java、PHP、Python、Ruby等十多种开发语言,但前提是需要配置相应语言的环境,要检查JavaScript代码需要安装node.js,检查PHP代码需要安装PHP并配置环境等。SublimeLinter可以及时提示编写代码中存在的不规范和错误的写法,并培养我们良好的编码习惯和风格。

10. CSSComb
  CSScomb是CSS的编码风格格式化程序,您可以轻松地编写自己的配置,使您的样式表美观和一致。
  前提是需要安装Node.js。

  自定义配置:
    可以在CSScomb的官网,设置根据自己的需求构建配置,如下为我所用的配置;
    之后将其放入安装目录的.csscomb.json文件中,覆盖默认设置即可;
    或者在sublime text中打开Preferences -> Package Settings -> CSScomb,参考Settings-Default设置自己的Settings-User。

 1 {
 2   "always-semicolon": true,
 3   "color-case": "lower",
 4   "block-indent": "\t",
 5   "color-shorthand": true,
 6   "element-case": "lower",
 7   "leading-zero": false,
 8   "quotes": "double",
 9   "space-before-colon": "",
10   "space-after-colon": " ",
11   "space-before-combinator": " ",
12   "space-after-combinator": " ",
13   "space-between-declarations": "\n",
14   "space-before-opening-brace": " ",
15   "space-after-opening-brace": "\n",
16   "space-after-selector-delimiter": " ",
17   "space-before-selector-delimiter": "",
18   "space-before-closing-brace": "\n",
19   "strip-spaces": true,
20   "tab-size": true,
21   "unitless-zero": true,
22   "vendor-prefix-align": true
23 }

  使用方法:
    1.快捷键:Ctrl+Shift+C
    2.鼠标右键:Run CSScomb
    3.Ctrl+Shift+P调出命令面板,输入Run CSScomb

时间: 2024-10-13 12:31:32

Sublime Text 3 插件整理的相关文章

Sublime Text 3插件安装方法

一:安装Sublime Text 3插件的方法 安装package control组件,然后直接在线安装: 1.按Ctrl+`调出console(注:安装有QQ输入法的这个快捷键会有冲突的.输入法属性设置-输入法管理-取消热键切换至QQ拼音) 2.粘贴下面代码究竟部命令行并回车: import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); ur

开发者最常用的 8 款 Sublime Text 3 插件

转载于:http://www.itxuexiwang.com/a/liunxjishu/2016/0228/177.html?1456925631Sublime Text作为一个尽为人知的代码编辑器,其优点不用赘述.界面整洁美观.文本功能强大,且运行速度极快,非常适合编写代码,写文章做笔记.Sublime Text还支持Mac.Windows和Linux各大平台,方便用户使用.种类繁多.功能强大的插件更给Sublime Text 3锦上添花.下载Package Control后就可以迅速的开启插

推荐!Sublime Text 最佳插件列表

推荐!Sublime Text 最佳插件列表 朋友们你们好!我尝试着收集了最佳的ST插件,这些插件真的会改善你的工作流程.我搜索了很多网站,下面是我的成果. 原文链接:http://blog.jobbole.com/79326/ WebInspector 在 JavaScript调试方面,这是一个令人惊讶的工具,Sublime上的完整的代码检查工具.功能:使用绝对路径储存在用户设置中的项目断点,控制台,分步和断点调试器,栈追踪.这些都能够很棒的工作!而且Mozilla还提供了一个插件Firepl

安装Sublime Text 2插件的方法

1.直接安装 安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages). 2.使用Package Control组件安装 也可以安装package control组件,然后直接在线安装: 按Ctrl+`调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入法属性设置-输入法管理-取消热键切换至QQ拼音) 粘贴以下代码到底部命令行并回车:import urllib2,os;pf='Package

安装Sublime Text 3插件的方法

安装Sublime Text 3插件的方法: 朋友们,小站活着不容易,全靠广告费养着了,如果本文对你有帮助.麻烦动下手点下页面的广告吧,谢谢! 直接安装 安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages). 使用Package Control组件安装 也可以安装package control组件,然后直接在线安装: 按Ctrl+`调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入法属

Sublime Text 2 插件

之前做android开发一直用eclipse做编辑器,之后接触ruby之后便开始用Sublime Text 2,渐渐的才发现此等编辑器的好处,也越来越依赖它. Sublime Text 2是一个轻量.简洁.高效.跨平台的编辑器,方便的配色以及兼容vim快捷键等各种优点博得了很多前端开发人员的喜爱.之前也不并知道它有这么多插件的扩展与支持,直到vincent问到有没有在用cTags插件,才知道原来Sublime通过插件也可以实现一些大型IDE的功能,遂google一下,本篇Blog就来介绍下Sub

写一个Sublime Text 2插件(CSS文件里px单位替换成rem单位)

三年前我就知道了sublime text 不过那时候用DW还是很爽的样子,后来有天想为难自己了,于是用了两年的vim和五笔,最近又觉得这么好编辑器也可以试试,改变一下自己,用一下的,不过由于工作的原因,没有坚持下来,有时候顺手似乎比先进更重要一些. 最近工作都是做一些移动端的页面,而微信的长按出现二维码有个bug,在ios里缩放的页面长按是不会出现"识别二维码"的.所以需要转换一下,不要让页面缩放,要自适应,这个时候就用rem单位来做的会比较好一些,而我的同事之前开发了一个px to

Sublime Text 3118 插件集成定制汉化方案--赵亮(碧海情天)

Sublime Text 3118 插件集成定制汉化方案–赵亮(碧海情天) 原创内容,转载请保留原作者完整姓名信息 前言 一晃,离最开始为Sublime Text写汉化和插件开发与发布的教程 http://blog.csdn.net/theforever/article/details/8962727,都已经过去三年了.这其间,我又写过几篇具体介绍自己汉化定制的Sublime Text从3056到3061的递进式方案,大家可以参考: http://my.oschina.net/theforeve

前端工程师养成记:开发环境搭建(Sublime Text必备插件推荐)

为了让自己更像一个前端工程师,决定从开发环境开始武装自己.本文将介绍前段工程师开发的一些利器的安装步骤,主要包括了: 1.Node.js的安装 2.Grunt的安装及常用插件 3.Sublime Text的安装及必备插件 一.Node.js的安装 Node.js就是一堆前端工程师捧红的,所以装上这个嘛,主要不是自己需要使用Node.js而是一堆工具对他的依赖. Windows下安装步骤很简单: 1.去到http://nodejs.org/下载最新的安装包,安装. 2.在CMD下运行,node和n