转战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

前端技能总汇