Sublime Text 插件介绍合集

转战vscode 20170829


Sublime Text  插件介绍合集

1 Emmet

功能:编码快捷键,前端必备

简介:Emmet作为zen coding的升级版,对于前端来说,可是必备插件,如果你对它还不太熟悉,可以在其官网上看下具体的演示视频。

使用教程:http://docs.emmet.io/cheat-sheet/

http://www.w3cplus.com/tools/emmet-cheat-sheet.html

2 html-css-jsprettify

功能:对Html,css,js文件进行格式化

简介:代替了JsFormat和CSSFormat

使用:快捷键Windows: ctrl+shift+i

快捷键配置:在Preferences / Key Bindings – User加上代码(数组内)

{"keys": ["ctrl+shift+i"],"command": "htmlprettify"},

3 CSSComb

功能:用来给CSS属性进行排序的格式化(处女座必备)

简介:按一定的顺序排列

使用:选中要排序的CSS代码,右键菜单选择Run CSScomb。

使用:到https://github.com/csscomb/sublime-csscomb下载插件包,放到sublime text文件夹的\Data\Packages\User目录里

快捷键:ctrl+shift+c

4 ColorHighlighter

功能:方便调色

简介:它可以展示你所选择的颜色代码(像“#FFFFFF”, “rgb(255,255,255)”, “white”)的真正颜色。同时它还包含一个颜色选择器让你可以方便地更改颜色。

使用:快捷键Windows: ctrl+shift+w

快捷键配置:在Preferences / Key Bindings – User加上代码(数组内)

{ "keys": ["ctrl+shift+w"],"command": "color_picker","context": [{"key": "color_highlighter.color_picker"}]},

5 Trailing spaces

功能:检测并一键去除代码中多余的空格

简介:还在纠结代码中有多余的空格而显得代码不规范?或是有处女座情节?次插件帮你实现发现多余空格、一键删除空格、保存时自动删除多余空格,让你的代码规范清爽起来

使用:安装插件并重启,即可自动提示多余空格。一键删除多余空格:CTRL+SHITF+T(需配置),更多配置请点击标题。

快捷键配置:在Preferences / Key Bindings – User加上代码(数组内){ "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" },

6 auto-save

功能:自动保存文件

简介:为保存提供了方便

使用:默认是不会自动保存,按快捷键Ctrl+Shift+S开启。

快捷键配置方法:首选项-快捷键设置,在数组内添加{ "keys": ["ctrl+shift+s"], "command": "auto_save" },如需自动启用,首选项-插件-auto-save---settings-usre粘帖一下配置

{

"auto_save_on_modified": true,

"auto_save_delay_in_seconds": 10,

"auto_save_all_files": true,

"auto_save_current_file": "",

"auto_save_backup": false,

"auto_save_backup_suffix": "autosave"

}

7 view in browser

功能:通过默认浏览器打开文件

简介:方便打开浏览器检查编译效果

使用:快捷键配置方法:首选项-快捷键设置,在数组内添加快捷键:F12{ "keys": ["f12"], "command": "open_in_browser" },

8 AutoPrefixer

功能:CSS添加私有前缀

简介:CSS还未标准化,所以要给各大浏览器一个前缀以解决兼容问题

这个插件主要应用css的浏览器兼容书写,自动分析你的css文件,解析出新的css文件,可以配置你要兼容的浏览器,不过这个插件要在之前安装nodejs

使用:在输入CSS3属性后(冒号前)按Tab键

配置:Preferences>package setting>AutoPrefixer>Setting-User

{

"browsers": ["last 7 versions"],

"cascade": true,

"remove": true

}

或者

{

"browsers": ["last 2 versions","last 2 Chrome versions",">5%","Firefox >= 20","ie 6-8","iOS 7"]

}

快捷键绑定:Preferences>Key Bindings-User:

[

{ "keys": ["ctrl+alt+shift+p"], "command": "autoprefixer" }

]

9 CSS Extended Completions:

功能:关联CSS文件,智能提示css文件中的类名,非常好用

10 JavaScript Completions

功能:支持javascript原生语法提示,妈妈再也不用担心我输入document.getElementById(id)

11 jQuery

功能:jQ函数提示

简介:快捷输入jQ函数,是偷懒的好方法

12 AutoFileName

功能:快捷输入文件名

简介:自动完成文件名的输入,如图片选取

使用:输入”/”即可看到相对于本项目文件夹的其他文件

13 SublimeLinter

  功能:代码检查

简介:支持JavaScript、CSS、HTML、Java、PHP、Python、Ruby等十多种开发语言

使用:需要配置相应语言的环境,要检查JavaScript代码需要安装node.js,检查PHP代码需要安装PHP并配置环境等。

14 SideBarEnhancements

功能:扩充边栏菜单的功能

简介:包括在当前工程文件夹中新建文件,移动文件或文件夹,产生文件或文件夹的副本,在新窗口或浏览器中打开,刷新等。

15 Bracket Highlighter

功能:代码匹配

简介:可匹配[], (), {}, “”, ”, ,高亮标记,便于查看起始和结束标记

16 Monokai Extended

功能:主题

简介:如果你喜欢Soda Dark和Monokai,我建议你使用Monokai Extended

使用:首选项->配色方案-> User -> Monokai Extended

17 Align Arguments

代码对齐

18 Alignment

代码对齐

19 All Autocomeplete

Sublime Text默认的Autocomplete功能只考虑当前的文件,而AllAutocomplete插件会搜索所有打开的文件来寻找匹配的提示词。

20 ColorPicker

全屏取色器

通常,如果你想使用一个颜色选择器则可能打开Photoshop或GIMP。而在Sublime Text中,你可以使用内置的颜色选择器。安装完成后,只要按下Ctrl / Cmd + Shift + C快捷键。

21 Git

在工作中,版本控制软件最常用的软件之一,而最流行的VCS是Git。你是否厌倦了保存文本文件,并切换回终端运行一些Git命令。如果你能从文本编辑器本身执行Git命令,岂不是很好?

快捷键Ctrl+Shift+P,输入Git命令,在下拉框中选择即可。

特别的,输入git diff,还可以比较文件差异。

22 GitGutter

Sublime Text有了Git插件之后,GitGutter更好的帮助开发者查看文件之前的改动和差异,提升开发效率.

23 SublimeREPL

这可能是对程序员最有用的插件。SublimeREPL允许你在Sublime Texxt中运行各种语言(NodeJS,Python,Ruby,Scala和Haskell等等)。

23 DocBlockr

如果你遵循的编码的风格很严格,这款插件能够使你的任务更容易。DocBlokr帮助你创造你的代码注释,通过解析功能,参数,变量,并且自动添加基本项目。

DocBlocker是在Sublime平台上开发一款自动补全代码插件,支持JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++ and Rust.等众多语言

24 OmniMarkupPreviwer

实时在浏览器中预,而MarkdownPreview是需要手动生成的和F5的。览如果双屏的话,应该具有不错的体验。快捷键如下:

Ctrl+Alt+O: Preview Markup in Browser.

Ctrl+Alt+X: Export Markup as HTML.

Ctrl+Alt+C: Copy Markup as HTML.

25 SublimeCodeIntel

一个全功能的Sublime Text代码自动完成引擎,本人做过对比,但是如果和webstorm的自动寻找还是稍逊一筹,不过对于大部分人来说够用了,能很方便跳到你想要的方法

支持的语言挺多的(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.)

点击Preferences->Browse Packages->SublimeCodeIntel

添加一个.codeintel文件夹(Windows创建.codeintel文件夹需要输入.codeintel.)

在文件夹里面添加一个config文件:

{

"PHP": {

"php": '/usr/bin/php',

"phpExtraPaths": [],

"phpConfigFile": 'php.ini'

},

"JavaScript": {

"javascriptExtraPaths": []

},

"Perl": {

"perl": "/usr/bin/perl",

"perlExtraPaths": []

},

"Ruby": {

"ruby": "/usr/bin/ruby",

"rubyExtraPaths": []

},

"Python": {

"python": '/usr/bin/python',

"pythonExtraPaths": []

},

"Python3": {

"python": '/usr/bin/python3',

"pythonExtraPaths": []

}

}

26 CSS Comments

该有的都有,不该有的也有了

27 HTML-CSS-JS Prettify

全能序列化

29 JavaScript Completions

js最基本的api快查片段

30 JsFormat

js序列化,能排在下载插件前25位,好的话就不用说了

31 Keymaps

快速查找所有插件的快捷键

32 LiveStyle

LiveStyle是Chrome中提高开发效率的一款CSS编辑器插件。利用LiveStyle和Sublime Text3编辑器结合可实现可视化开发,一次配置,简单易用!

你本地css文件可以和浏览器的css文件映射,同步到本地,但是必须在chrome上运行,chrome必须安装相应的插件

33 SideBarEnhancements

增强右键菜单文件操作功能

34 SublimeLinter

代码校验插件,支持多种语言,这个是主插件,如果想检测特定的文件需要单独下载

35 SublimeLinter-jshint

这个就是单独的插件,上面的一个分支

36 SublimeTmpl

创建常用文件初始模板,必须html,css,js模板

37 Tag

HTML/XML标签缩进、补全和校验

38 Sublime APICloud

让HTML5前端开发者使用Sublime快速开发原生苹果与安卓APP。Sublime APICloud Plugins是为HTML5前端开发者提供的一套开源的Sublime Text扩展插件,包括:应用管理、应用框架、页面模板、代码提示、代码管理、Widget打包、真机同步、日志输出、管理自定义AppLoader等功能,其他的功能插件也在不断增加,这些插件已被Package Control成功收录,开发者可以直接在Sublime Text3中下载安装;所有插件都已开源,开发者也可以在此基础上按需求扩展自己的插件。

39 Bootstrap 3 Aotocomplete

Bootstrap 3代码片段

配置:Preferences->Settings-User:

"auto_complete_triggers": [{"selector": "text.html", "characters": "<"},{"selector": "text.html", "characters": "bs3"}]

使用:代码片段触发字符为bs3

40 Browser Refresh

保存文件自动刷新浏览器。

配置:Preferences > Package Settings > Browser Refresh > Key Bindings – Users

{

"keys": ["ctrl+s"], "command": "browser_refresh", "args": {

"auto_save": true,

"delay": 0.0,

"activate": true,

"browsers" : ["chrome"]

}

}

41 SVN

快捷键Ctrl+Shift+P,输入Git命令,在下拉框中选择即可

或者在相应文件上右键,选择SVN命令

或者在侧边栏的文件、文件夹上右键,选择SVN命令

42 IconFont

字体图标补全。

为许多流行的图标字体提供了snippet(代码片段),比如FontAwesome, PaymentFont,Typicons和Github Octicons。

它的工作原理类似于常规的HTML代码段,每个图标的缩写将扩展成完整的class和HTML代码。

43 MarkDown Editing

Markdonw最好的插件了:语法高亮,缩略词,自动补全,配色方案。

44 MarkDown Preview

以用浏览器浏览Sublime Text中编写的markdown文件。

配置浏览器路径:* Preferences->Package Settings->Markdown Preview->Setting User*

{

"browser" : "C:\\Users\\gymmer\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe"

}

设置快捷键:Preferences->Key Binding User

{

"keys": ["f3"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"}

}

使用:在Markdown文件页面按下快捷键

45 Inc Dec Value

调整数字、日期、十六进制颜色。

将光标放在数字的右边,然后按Alt +↑增加或Alt +↓减少。也可以使用鼠标滚轮。

允许你同时增加或减少数字,即使他们在不同的行。

46 Less2css

自动编译less文件为CSS文件

需依赖Node.js环境

npm install -g less

npm install -g less-plugin-clean-css

npm install -g less-plugin-autoprefix

配置:可参考https://github.com/timdouglas/sublime-less2css

47 jQuery

jQuery的API代码片段。

48 JavaScript Completions

JS最基本的API快查片段。

49 Nodejs

node代码提示。

50 Minify

HTML、CSS、JS压缩

需依赖Node.js环境

npm install -g clean-css uglifycss js-beautify html-minifier uglify-js minjson svgo

使用:在相应文件上右键,选择Minify。会自动生成一个同名的.min文件

51 ChineseLocalization

Sublime中文汉化包。

52 ConvertToUTF8

GBK编码兼容。文件转码成utf-8.

可以编辑并保存目前编码不被Sublime Text支持的文件。

使用:安装插件后自动转换为utf-8格式。

IMESupport

输入中文时,候选词跟随鼠标.

53 GBK Encoding Support

中文识别

Sublime Text可识别UTF-8格式的中文,不识别GBK和ANSI,因此打开很多含中文的文档都会出现乱码。

通过安装插件GBK Support,来识别GBK和ANSI。

54 安装主题Brogrammer

下载压缩包,解压缩

重命名为Theme - Brogrammer

打开Sublime包目录:Preferences -> Browse Packages

将Theme - Brogrammer复制到包目录下

配置:Preferences -> Settings - User

{

"theme": "Brogrammer.sublime-theme",

"color_scheme": "Packages/Theme - Brogrammer/brogrammer.tmTheme"

}

55 Sidebar Enhancements.

用浏览器快速打开页面

需先安装Sidebar Enhancements.

-设置快捷键:Preferences->Key Bindings - User

//chorme

{

"keys": ["f1"],

"command": "side_bar_files_open_with",

"args": {

"paths": [],

"application": "C:\\Users\\gymmer\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",

"extensions": ".*"

}

},

//IE

{

"keys": ["f2"],

"command": "side_bar_files_open_with",

"args": {

"paths": [],

"application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",

"extensions": ".*"

}

}

其中:

keys是按键。

application是浏览器应用程序路径,注意反斜杠的要转义。

extensions是匹配所有的文件后缀格式。

直接按下快捷键即可

56 Can I Use

可以直接调整到caniuse看到当前属性的浏览器支持情况。快捷键

57 CSS Extended Completions:

关联CSS文件,智能提示css文件中的类名,非常好用。

58 Emmet Css Snippets

是可以自动提示CSS、LESS和SASS语法的sublime text插件。

它的特点有:

可以自动提示CSS、LESS和SASS语法。

有两个版本:has-Prefix或no-Prefix。

智能自动完成。

可以提示伪元素。

可以提示扩展属性

语法参考http://peiwen.lu/Emmet-Css-Snippets-for-Sublime-Text-2/

59 DeleteBlankLines

功能:删除多余空行

相关快捷键如下:

Ctrl+Alt+Backspace -->删除所有空行

Ctrl+Alt+Shift+Backspace -->删除多余空行

删除所有空行:删除所有空行

删除多余空行:将两个及两个以上的连续空行替换成一个空行

注意:如果行中带有tab或空格字符则不会被删除,只删除只含有\n或\r的空行

60 FileDiffs

这个插件允许你看到SublimeText中两个不同文件的差异。你可以比较的对象可以是从剪贴板中复制的数据,或工程中的文件,当前打开的文件等。

分别是:在目录下找文件对比//在剪切板中对比//在前一个对比;

目前我只用到第二个,Cilpboard对比,方法:先把先前的代码右键-复制,然后在需要对比的代码右键-Clipboard(建议在sublime开双窗口:ctrl+alt+2,因为好像编辑的代码不保存),色块说明(自己探索,不保证正确):红色是原代码有,而粘贴板代码没有的,绿色发过来,@@表示里面一大段都一样。这个真心不好用,不知道其他网友有什么推荐

61 HTML-snippets

hTML代码片段

62 HTML-CSS-JS Prettify

这是一款集成了格式化(美化)html、css、js三种文件类型的插件。插件依赖于nodejs,因此需要事先安装nodejs,然后才可以正常运行

插件安装完成后,快捷键ctrl+shift+H完成当前文件的美化操作。插件对html、css文件的美化不是非常满意,但还可以,后面将说明如何修改css美化脚本,此为后话。

详解http://frontenddev.org/article/sublime-does-text-three-plug-ins-html-and-css-js-prettify.html

63 idiomatic css comments snippets

有不同的注释块的几个快捷方式。

64 Sublime-snippet 简介

在Sublime中,可以通过Sublime-snippet来快速补全代码。

65 JSdebugger

调试是一个用于记录调试消息的小库。因为它只是一个包裹console.log,在节点和浏览器的工作原理。它允许您在不改变源的情况下过滤日志输出,并输出时间差异,使您可以轻松地知道日志信息之间的时间间隔。







http://blog.jobbole.com/79929/

http://www.jianshu.com/p/aa30cc25c91b

http://www.tuicool.com/articles/im2y6f

http://www.oschina.net/translate/20-powerful-sublimetext-plugins

http://caibaojian.com/grunt.html

GRUNT:任务运行管理器

http://blog.csdn.net/sunny_girls/article/category/2920281

插件详解

https://github.com/JacksonTian/fks

前端技能总汇

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    xiaotao123阅读 9,416评论 0 27
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    追風逸少丶阅读 11,252评论 1 34
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    晚晴幽草阅读 710,256评论 149 1,114
  • 下载地址:Sublime Text 原则上收费的,但可以试用,试用期是免费的,在试用期间会提示你购买. packa...
    万物皆可搬阅读 9,463评论 2 9
  • 1 林场出了血案,在这偏僻至极的山村里简直是惊涛骇浪。 几里外的邻村村名都闻讯赶到了事发现场。现场已经被封锁,镇里...
    六一说阅读 533评论 4 2