Sublime Text 3 实用热门插件推荐

SublimeText是一款非常精巧的文本编辑器,适合编写代码、做笔记、写文章。它用户界面十分整洁,功能非同凡响,性能快得出奇。这些非常棒的特性 包括任意跳转(Goto Anything)、多重选择(multiple selections)、指令面板(command palette)、免打扰模式(distraction free mode)、分区编辑(split editing)、快速项目切换(instant project switch),你还可以随意地自定义更多功能。还有,这款编辑器支持Mac、Windows和Linux平台。

SublimeText本身已经非常强大,但是更棒的是有一长串的插件支持它,给它带来更强大的功能。本文将介绍一些 Sublime Text 3 支持的热门插件(Sublime Text 2 的一些插件在 Sublime Text 3 上不支持)。

  • Alignment:代码格式化
  • AllAutocomplete:搜索全部打开的标签页
  • AutoFileName:自动补全文件路径
  • Bracket​Highlighter: 括号、引号、标签高亮
  • Ctags:代码追踪
  • DocBlockr: 注释生成 (强烈推荐)
  • GitGutter: 查看文件之前的改动和差异,提升开发效率
  • Git: 版本控制
  • SVN: 版本控制
  • SideBarEnhancements:侧边栏添加很多额外的功能

面向 Web 开发者的 Sublime Text 插件

  • ColorPicker: 颜色选择器
  • Emmet:html+css快速编写
  • Theme - Spacegray:模版和配色方案
  • Autoprefixer:自动添加 CSS 厂商前缀
  • CanIUse:查看css兼容性
  • jQuery:提示
  • JSHint:JS 代码错误检查
  • JSCS:JS 代码风格检查
  • Less:Less to Css的预处理器
  • SASS Build: CSS的预处理器

  • SublimeREPL:允许你在 Sublime Text 中运行各种语言

  • Blade Snippets:提供 Blade 模板自动补全
  • Laravel 4 Blade Highlighter:提供 Blade 关键字高亮
  • phpfmt:格式化PHP代码,对齐代码
  • SublimeLinter + SublimeLinter-php : PHP错误提示
  • Sublime​Code​Intel:代码提示、补全

  • Markdown Preview: Markdown 文件预览

Package Control (GitHub)

在 Sublime Text 上大家都用 Package Control 来管理安装插件,就像 Linux 下的 apt-get 和 yum 一样,你用它可以轻松地找到你想要的插件和管理已有插件,所以它是我们要安装的第一个插件,安装方法见这里。关于 Package Control 的使用方法这里不再赘述。

安装成功后,在 Sublime Text 中,使用快捷键 Shift + Ctrl + P 调出命令面板,输入 Package Control 可以看到下面的结果:

QQ20161015-1@2x.jpg

Emmet (GitHub)

Emmet 是一个前端开发的利器,其前身是 Zen Coding。它让编写 HTML 代码变得简单。Emmet 的基本用法是:输入简写形式,然后按 Tab 键。

关于 Emmet 的更多用法,请看官方文档,这份速查表可以帮你快速记忆简写形式。

SublimeLinter (GitHub)

注意:此插件需要手动安装并切换到 sublime-text-3 分支。

SublimeLinter 是一个代码校验插件,它可以帮你找出错误或编写不规范的代码,支持 C/C++、CoffeeScript、CSS、Git Commit Messages、Haml、HTML、Java、JavaScript、Lua、Objective-J、Perl、PHP、Puppet、Python、Ruby 和 XML 语言。

在使用 SublimeLinter 之前,你要安装相应的程序,详见README。如果要校验 JavaScript 或 CSS,你还要安装Node.js

SublimeLinter 默认以 background 模式运行,在用户输入的同时即时校验,如果你想要 Sublime Text 运行得更流畅,可以改为 load-save 模式或 save-only 模式,在读取和保存是校验或只在保存时校验。

打开 SublimeLinter 的配置文件:菜单 Preferences -> Package Settings -> SublimeLinter -> Settings - User,加入 "sublimelinter": "load-save" 或 "sublimelinter": "save-only"

SideBarEnhancements (GitHub)

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

SideBarEnhancements 还有一个功能就是自定义打开文件的程序,在侧边栏中右键点击一个文件(夹),选择 Open With -> Edit Applications 就可以修改关联了,配置文件自带示例,可以很方便地套用。

Sublime​Code​Intel (GitHub)

Sublime​Code​Intel 是一个代码提示、补全插件,支持 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 等语言,是 Sublime Text 自带代码提示功能的很好扩展。它还有一个功能就是跳转到变量、函数定义的地方,十分方便。

使用 Sublime​Code​Intel 之前你需要安装相应程序并把路径写入 ~/.codeintel/config 或 project_root/.codeintel/config 中,ReadMe 中有详细的 说明,不再赘述。

十分不建议把 Sublime​Code​Intel 与其他单个语言的扩展 package 一同使用,虽然很多语言扩展 package 比 Sublime​Code​Intel 的代码提示功能要完善。如果需要一同使用,请在用户配置文件(菜单Preferences -> Package Settings -> Sublime​Code​Intel -> Settings - User 中加入下面的内容,并去掉要禁用的语言。

"codeintel_enabled_languages":
    [
    "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"
    ],
"codeintel_live_enabled_languages":
    [
    "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"
    ]

Alignment (GitHub)

Alignment 是一个代码格式化插件,它可以使多行代码中的等号对齐,也可以调整多行代码为一个缩进级别,默认快捷键是 ctrl+alt+a(Mac OS 上是 cmd+ctrl+a)。

Bracket​Highlighter (GitHub)

Bracket​Highlighter 是一个括号、引号、标签高亮插件,支持 []、()、{}、""、'' 和 <tag></tag> 等,比 Sublime Text 自带的高亮要明显得多。

Git (GitHub)

Git 插件集成了 git 的常用功能,使用之前需要安装 git 并写入环境变量中。

ColorPicker (GitHub)

在编辑CSS样式的时候,要加个自己喜欢颜色或改改颜色啥的,要到PS里去调色?ColorPicker 可以让 Sublime Text 3内置一个调色盘,调好颜色,点击OK就会在光标处生成十六进制颜色代码。

QQ20161015-2@2x.jpg

SASS Build (GitHub)

SASS Build 是一个编写CSS的预处理器。这个特别的插件将帮助你妥善构建包括压缩选项在内的SASS文件。一旦你安装了这个插件,你可以很容易地通过按 Ctrl+ B(MAC系统是 Command +B)来启动它。

CSSComb (GitHub)

这是用来给CSS属性进行排序的格式化插件。如果你想保持的代码干净整洁,并且希望按一定的顺序排列(是不是有点强迫症了?),那么这个插件是一种有效解决的方案。特别是当你和其他有自己代码编写风格的开发者一同协作的时候。

MarkDown Editing (GitHub)

SublimeText 不仅仅是能够查看和编辑 Markdown 文件,但它会视它们为格式很糟糕的纯文本。这个插件通过适当的颜色高亮和其它功能来更好地完成这些任务。

其他语法支持

如果有一个 SublimeText 本身所带语言包不包含的语言,它就无法显示适当的语法高亮。这些语言包括 LESS,Sass,SCSS,Styls 和 Jade(或其它)。如果您正在使用这些语言,你可能要安装它们的语法插件。

欢迎补充!

via

你用过哪些工具开发网站简单的Notepad ,还是Dreamweaver、FrontPage 。今天我们谈谈 Sublime Text 的 Web 开发插件。其实一个强大的文本编辑器加上一些插件已经足够了。

JSHint

Linter 是帮助你检查代码问题的一类工具,帮你发现潜在的错误或不好的代码习惯。JSHint 是检查 JavaScript 代码的好工具,支持很多编辑器和 IDE 。

JSHint

Sublime 上要使用 JSHint 可以安装:SublimeLinter-JSHint 插件。注意安装这个插件前需要先安装 SublimeLinter 以及 jshint 命令本身,更多信息见 SublimeLinter-JSHint 安装说明。简单地说就是:

  1. 安装 jshint 命令:npm install -g jshint
  2. Package Control 安装:SublimeLinter ,重启 sublime
  3. Package Control 安装:SublimeLinter-jshint

注:JavaScript 有许多 linter 工具,如 JSLint 、JSHint 和 ESLint 。JSLint 是 JavaScript 大师 Douglas Crockford 创作和维护的。JSHint 是 JSLint 的 fork 版,由社区维护,更可扩展、更灵活,使用者也更多,Mozilla、jQuery 都在用 JSHint 。ESLint 是另一位 JavaScript 专家 Nicholas C. Zakas 主导的社区项目。

注:SublimeLinter 是 Sublime 上 linter 类插件的 framework,所以很多 linter 都依赖这个插件。Package Control: Install Package 中输入 SublimeLinter- 会列出大量 SublimeLinter- 开头的 linter 插件,如下图:

SublimeLinter

JSCS

代码中没有错误还不够,好的代码需要遵循一致的代码风格(代码不仅仅给机器用,还是给人看不是吗?)。JSCS 是检查代码风格的工具,可以配置很多代码风格规则,例如空格的要求、括号的位置等,还可以直接使用 jQuery、Google 等代码风格方案。

Sublime 上需要安装 SublimeLinter-JSCS 。这个插件同样依赖 SublimeLinter 以及 jscs 命令本身。简单安装说明如下:

  1. 安装 jscs 命令:npm install jscs -g
  2. Package Control 安装:SublimeLinter ,重启 sublime (如果你还没装 SublimeLinter 的话,否则请跳过)
  3. Package Control 安装:SublimeLinter-jscs

此外,你还可以安装一个 JSCS-Formatter 插件,实现自动代码格式化。

JSCS

ColorHighlighter

Color Highlighter 插件可以自动显示 CSS 或 Sass 中声明的颜色,让你一目了然。默认配置下,当鼠标移到颜色变量上时背景就会变为声明的颜色。

ColorHighlighter

还可以设置多种颜色显示方式,默认配置见: ‘Package Settings’ > ‘Color Highlighter’ > ‘Settings – Default’ 。例如,我们在该插件的 User 设置中做如下设置可以达到下图的显示效果:

{
     "ha_style": "filled"
}

160055i9n66xin4642nndd.png

Gutter ColorColor Picker 是另外两个颜色相关的插件。

AutoFileName

AutoFileName 在你在输入文件名是提供自动提示,减少人为的输入错误。

AutoFileName

Autoprefixer

Autoprefixer 插件让帮你自动添加 CSS 厂商前缀,个人使用比较方便。如果是正式的项目,可以使用其它自动构建工具在构建过程中统一实现。

Autoprefixer

CanIUse

如果您想检查浏览器是否支持你包括在你的代码中的CSS和HTML元素,那么这是你需要的插件。所有您需要做的就是选择有疑问的元素,插件将为你做其余的事情。

CanIUse

定制的主题
拥有不同的主题可以触发创意和想法,你可能想使用这些插件来实现不同的主题,带来更好的和令人兴奋的前景。

SpaceGray

SpaceGray

如需转载,请注明出处: https://www.chadou.me/p/188

最新发布