sublime常用插件

逃离我推掉我的手 2024-02-19 13:55 52阅读 0赞

sublime插件：[https://github.com/jikeytang/sublime-text][https_github.com_jikeytang_sublime-text]

### [Package Control][] ###

作为安装 Sublime Text 插件的必备利器，Package Control 是这款编辑器的标配，可以方便开发人员快速安装需要的插件。

### [Git][] ###

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

### [GitGutter][] ###

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

### [Emmet][] ###

Emmet 项目的前身是前端开发人员熟知的 [**Zen Coding**][Zen Coding]（快速编写 HTML/CSS 代码的方案）。在 Sublime Text 编辑器中搭配 Emmet 插件真的是让你编码快上加快。

### [AllAutocomplete][](自动完成插件) ###

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

### [SublimeREPL][] ###

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

### [ColorPicker][] ###

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

### [markdownPreview][] ###

虽然许多开发人员更喜欢在云端（GitHub Gists，StackEdit，Markable）创建 [**Markdown**][Zen Coding] 文件 。不过另外一些喜欢在本地编写 Markdown 文件的开发者， MarkdownPreview 很有用，可以预览文件，还有颜色高亮显示。

### [DocBlockr][] ###

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

### [SideBarEnhancements][] ###

增强的侧边栏

### [Sublime-HTMLPrettify][](代码排版插件`ctrl+shift+h` 一键格式化代码) ###

以前用的是什么TAG，CssComb和JSFormat，但是某一天发现这款集成prettify的插件后就一直没换过了,不要被插件的HTML迷惑，这是一款可以用于HTML，CSS，Javascript的集成排版插件.

### [JsFormat][](javascript格式化) ###

###  ###

### [Trailing Spaces][]( 高亮显示多余的空格和Tab和空白结尾并快速删除它们) ###

#### BracketHighlighter(高亮显示匹配的括号、引号和标签) ####

### LESS（LESS语法识别） ###

这是一个非常棒的插件，可以让sublime支持less的语法高亮和语法提示，对于搞less的同学灰常重要，不过多解释。

### SCSS（SCSS语法识别） ###

支持scss的语法高亮，里面附带了好多CSS Snippet，无论现用或者改造成，都可节省不少时间。

### SublimeLinter（代码错误提示） ###

### Trmmer(自动删除这些不必要的空格)   \#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\# ###

### 保存文件时自动去掉每行结束后多余的空格 ###

在Sublime菜单栏中找到preferences，选择"settings-user"

在窗口中最后一个"\}"前输入"trim\_trailing\_white\_space\_on\_save": true(包含引号内容)

\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#

1、配置快捷键Ctrl+s保存时，自动格式化。

打开菜单栏Perferences->Package Settings->HTML/CSS/JS Prettify->Plugin Options - Defalut打开配置文件，找到如下配置项："format\_on\_save": false，改为： "format\_on\_save": true保存。

2、缩进大小

“indent\_size”：2，//缩进大小

3、缩进tab

“indent\_with\_tabs”：true，//缩进tab，覆盖indent\_size和indent\_char\`

**推荐安装的插件列表**

易用性：

ChineseLocalization , 完全汉化插件  
Monokai Extended 主题，推荐使用  
HTML5，HTML5标签拓展  
JsFormat，javascript格式化  
CSS Format，CSS格式化  
Tag，HTML格式化  
Brackethighlighter，标签对标记  
SideBarEnhancements ，增强型侧边栏  
BufferScroll，代码折叠状态保留  
StyleToken , 标记颜色代码

功能：  
TortoiseSVN，SVN你懂的  
QuoteHTML，把HTML拼接成js插入字符串，神器  
FileHeader，文件模板 , 可自动更新修改时间  
AutoPrefixer，浏览器私有属性前缀补全 (Node.js依赖)  
ColorConvert，RGBA颜色转换，十六进制颜色转换为RGBA颜色  
Better Completion，全能代码提示  
LiveStyle，双向更改无刷新实时预览 , 包含chrome插件 Emmet LiveStyle  
SFTP , 需要激活 ，看这里 [Sublime Text SVN/SFTP 插件序列号通过微信自动获取][Sublime Text SVN_SFTP]  
\*jQuery，jQuery 代码提示（Better Completion 已可替代此插件）  
\*Sass以及SASS Build，使用Sass必备，ctrl+b执行编译  
\*yui compressor，JS和CSS压缩 (JRE依赖)，ctrl+b执行编译

推荐使用面向未来的前端自动化工具（相对成熟的Grunt，以及后起之秀 Gulp ，还有百度 FIE），以上两个星标插件都可被自动化工具所取代。

Gulp教程移步这里：[Gulp 自动化你的前端][Gulp]

其他：  
ConvertToUTF8，GBK编码兼容  
IMESupport，输入法不跟随时安装  
TrailingSpaces，多余空格标记，强迫症患者福音  
Hasher，符号转义，ctrl+shift+p 选择 Entity Encode  
PackageResourceViewer，插件修改必备，ctrl+shift+p 调用 Open Resource

\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#

**基础用户设置：**

工具栏 Preferences – Settings-User 加入下面的代码：

"trim\_trailing\_white\_space\_on\_save": true,  
"ensure\_newline\_at\_eof\_on\_save": true,  
"font\_face": "Microsoft YaHei Mono",  
"disable\_tab\_abbreviations": true,  
"translate\_tabs\_to\_spaces": true,  
"tab\_size": 2,  
"draw\_minimap\_border": true,  
"save\_on\_focus\_lost": true,  
"highlight\_line": true,  
"word\_wrap": "true",  
"fade\_fold\_buttons": false,  
"bold\_folder\_labels": true,  
"highlight\_modified\_tabs": true,  
"default\_line\_ending": "unix",  
"auto\_find\_in\_selection": true  
说明：

trim\_trailing\_white\_space\_on\_save，自动移除行尾多余空格，处女座更安心了。

ensure\_newline\_at\_eof\_on\_save，文件末尾自动保留一个空行，懂的人自然知道它的用处。

font\_face 设置字体。Microsoft YaHei Mono 是一款混合字体，专为代码优化，看起来很舒服。当然你也可以使用你自己喜欢的字体，或者删掉本行，使用默认字体。

disable\_tab\_abbreviations 设置为 true ，禁用 Emmet 的 tab 键功能（请使用 ctrl+e），系统自带的 tab 功能还是可圈可点的。当然你也可以不设置它，以完全使用 Emmet 的 tab 补全功能。

translate\_tabs\_to\_spaces 很明白就是把代码 tab 对齐转换为空格对齐，tab\_size 配合设置空格数。这个需求因人而异了，不喜欢可以去掉。

draw\_minimap\_border，用于右侧代码预览时给所在区域加上边框，方便识别。

save\_on\_focus\_lost，窗口失焦立即保存文件，嘛嘛再也不用担心你忘记保存了。

highlight\_line，当前行高亮。word\_wrap，设置自动换行。

fade\_fold\_buttons，默认显示行号右侧的代码段闭合展开三角号。

bold\_folder\_labels，侧边栏文件夹显示加粗，区别于文件。

highlight\_modified\_tabs，高亮未保存文件。

default\_line\_ending: “unix”, 使用 unix 风格的换行符。

auto\_find\_in\_selection: true ，开启选中范围内搜索（而不是整个文档

[https_github.com_jikeytang_sublime-text]: https://github.com/jikeytang/sublime-text
[Package Control]: http://www.yyyweb.com/demo/inner-show/wbond.html
[Git]: https://github.com/kemayo/sublime-text-git
[Git 1]: http://www.yyyweb.com/?s=git
[GitGutter]: https://github.com/jisaacks/GitGutter
[Emmet]: http://emmet.io/
[Zen Coding]: http://www.yyyweb.com/front
[AllAutocomplete]: https://github.com/alienhard/SublimeAllAutocomplete
[SublimeREPL]: https://github.com/wuub/SublimeREPL
[ColorPicker]: http://weslly.github.io/ColorPicker/
[markdownPreview]: https://github.com/revolunet/sublimetext-markdown-preview
[DocBlockr]: https://github.com/spadgos/sublime-jsdocs
[SideBarEnhancements]: https://github.com/titoBouzout/SideBarEnhancements
[Sublime-HTMLPrettify]: https://github.com/victorporof/Sublime-HTMLPrettify
[JsFormat]: https://github.com/jdc0589/JsFormat
[Trailing Spaces]: https://github.com/SublimeText/TrailingSpaces
[Sublime Text SVN_SFTP]: https://link.zhihu.com/?target=http%3A//mooring.iteye.com/blog/2067269
[Gulp]: https://link.zhihu.com/?target=http%3A//www.sheyilin.com/2016/02/gulp_introduce/