`

JS开发者常用的10个Sublime Text插件

 
阅读更多

原文http://web.jobbole.com/84167/

作者 伯乐在线

Sublime Text 是每个开发者工具箱中都应该有的一个强大的应用。它是一个跨平台的、高定制化的、高级的文本编辑器,在功能强大的 集成开发环境(众所周知地消耗资源)和类似于 Vim 或 Emacs 的命令行编辑器(学习成本非常高)之间取得了很好的平衡。

使得 Sublime 如此强大的原因之一就是其可扩展的插件架构。开发者可以很容易地扩展 Sublime 的核心功能,添加一些新特性,比如补全代码、嵌入远程接口文档。Sublime Text 不带有可以启用的插件 – 它们通常通过第三方包管理器安装,简称为 包管理器。安装 Sublime Text 的包管理器,请按照 官网的安装教程 进行安装。

本文针对 JavaScript 开发者,简要介绍了十个 Sublime 插件,每一个都能够帮助你改善工作流,并且提高工作效率。那么,就让我们一起来看看吧!

1. Babel

我首先要介绍的就是 Babel 插件。这个插件可以在你的 ES6/2015 和 React JSX 代码上添加语法高亮。安装插件之后,第一件要做的事就是把它设置为 .es6.jsx、 以及 .js 文件的默认语法。然而,如果你正在使用 ES3/5 工作,那你要注意最后一种文件,不要使用 Babel 编译你的代码。

如果你还没有享受过 Babel 的乐趣,我强烈建议你去尝试它。它允许你将 ES6/2015 和 JSX 代码编译成 ES5。并且它很好的整合了目前流行的构建工具和命令行工具。当然,它不支持传统浏览器,但是如果你想支持 IE10 或者更低版本可以在他们的 附加文档页面 查看相关说明。

不幸的是, Babel 插件不允许在 Sublime 内编译 ES6 代码。对于那些想实现此功能的人,我建议你查看 Compile Selected ES6

Babel

2. JSHint

下一个就是 Sublime 的 JSHint 插件。JSHint 是一个 JavaScript 检测器,它会查看你的代码,并验证其是否具有正确的样式和语法,避免犯相关的常见错误。无论你是个新手还是老手,JSHint 都是必不可少的。查看 JSHint 的「关于页面」,可了解更多信息。

为了 JSHint 插件能够在 SublimeText 中正常工作,你需要通过 npm 全局安装 JSHint:

如果你不确定应该如何做这一步,请浏览《getting started with the Node Package manager》这里的教程。

一旦 npm 的 JSHint 模块和 SublimeText 的 JSHint 的插件安装好了,你就能够简便地使用 JSHint 了,只要打开 JavaScript 文件,然后按下 Ctrl + J (在 Linux/Windows 上是Alt + J )。或者,你可以通过菜单打开 JSHint 功能。

如果你已经安装了插件,但是想要在有错误的地方有更明显的提示,请浏览 JSHint Gutter。或者,你想在安装 NPM 包和插件之前试一试 JSHint,JSHint.com 有一个很棒的在线交互工具,你可以把代码粘贴到里面得到实时的反馈。

3. JsFormat

JsFormat 基于 JS Beautifier,可以帮助你自动格式化 JavaScript 和 JSON。如果你只想用它格式化 JSON 字符串,那它值得你拥有。但是对于我来说,最大的优势是,当我需要读其他开发人员的代码,甚至于是我很久以前写的代码。

这种代码通常可读性差,统一的格式化代码样式会非常有帮助。尽管格式化工 具并不适合每个人,但它们在代码中使用统一的结构,这对开发者阅读代码是非常有用的。检查器会注意到这些,但是他们不需要做好每件事,不会自动格式化代 码。代码格式化工具可以节约很多时间,解决很多令人头痛的问题。

安装好就要使用 JSFormat ,打开你的 JS 文件,然后在 Windows/Linux 上按下 Ctrl + Alt + f 或者在 Mac 上按下 Ctrl + ⌥ + f。或者,你也可以使用菜单栏。

你可能会想:“但是如果我不喜欢它格式化 JavaScript 的样式怎么办?”

好消息!JsFormat 是基于 JS Beautifier settings 高度配置化的。在 SublimeText 3 中 Preferences -> Package Settings -> JsFormat -> Settings - Default 可以调整这些配置。

然后可以设置你喜欢的 JSON 格式。

4. DocBlockr

给代码添加注释有时候真是件痛苦地事情。我几乎不认识任何人会享受添加注释,但是这确实是非常必要的。DocBlockr 通过添加简洁的评论帮助我们减轻了痛苦。安装 DocBlockr 之后,你只需要在一行的开始输入 /* 或者 /** ,剩下的事情它会为你做好。如果你在一个方法上面使用 /**,它会生成 JSDoc 格式的注释。如果你从没有使用过类似的工具,DocBlockr 会让你觉得以前没有它是如何写代码的。

DocBlockr 也支持许多其他的语言,包括:CoffeeScript、 TypeScript、 PHP、 ActionScript、 Haxe、 Java、 Apex、 Groovy、 Objective C、 C、 C++ 和 Rust。

5. SideBar Enhancements

客观来说,SublimeText 在侧边文件树的位置只有很少的几个操作选项。简单来说,SideBarEnhancements 解决了这个问题。显然,这个插件提供了为文件和文件夹提供了 “移到垃圾箱” 选项、“用…打开” 选项以及剪贴板相关选项。它还可以让你用浏览器里打开文件,以 data:uri base64(可以方便地在CSS中嵌入图片) 格式拷贝文件,提供一系列的搜索操作。它很好地整合了 SideBarGit 可以在侧边栏直接提供 Git 命令,这是一个额外的功能。

随着 JavaScript 代码库的不断增大,以一种明智的方式浏览你的项目和操纵项目中的文件是很有必要的。因此这个插件必不可少。

6. AngularJS

由 Angular-UI 团队开发,它可能是所有推荐插件列表上比较大的一个(但是也非常有用)。它的只要特征包括:

  • 自动完成 AngularJS 指令(ng-model, ng-repeat等)
  • 自动完成你的自定义指令
  • 快速查看 directives, controllers 和 filters 的面板
  • 相关的片段
  • 核心的指令文档

Angular 是一个如此大的库,我发现它非常有用。它有很多设置选项,可以在 项目首页 浏览。

为了利用这个插件的语法高亮特性,你可以给你的 HTML 文件更改视图类型:View -> Syntax -> HTML (Angular.js)

7. TypeScript

TypeScript 是 JavaScript 的超集,可以编译成普通的 JavaScript。这可能对普通开发者来说并不重要,除了今年三月的一个小公告,Angular 2 将基于 typescript 构建。这意味着如果你使用 Angular 并打算以后继续使用 Angular2 ,这个插件必须安装。

这个插件由微软支持,添加了代码自动补全、适当的语法高亮、代码格式化和扩展 TypeScript 项目的导航能力。它还带有一个构建系统允许你将 TypeScript 编译成 JavaScript。

要进行编译,可以去 Tools -> Build System 选择 TypeScript。然后打开后缀名为 .ts 的文件,选择 Tools -> Build,或者按下 Ctrl + B。你可能会问构建的参数,之后插件会将编译后的 JavaScript 文件输出在相同的目录下。唯一要说明的就是需要安装 Node。

用插件自己的话说,它提供了“在 Sublime Text 下使用 TypeScript 编程的增强的体验”。这是确实是真的,它是的在前面提到的臃肿的 IDEs 上开发的人员眼前一亮。

8. Handlebars

如果你正在使用 Ember.js 或者仅仅是使用 Handlebars 作为你的模板语言的选择,那么你绝对不能缺少它。没有它,你可能会把所有的语法高亮去掉。

除了语法高亮(它作用于单独的模板文件以及脚本标签中的内联模板)之外,它还提供了使用 tab 键转换变量为表达式。例如,输入 x-temp 并按下 TAB 键就会生成:

或者,输入 ifel 然后按下 TAB 键,你就会得到:

相当的方便,对吗?

项目首页 有一个完整地代码片段列表。

9. Better CoffeeScript

Better CoffeeScript 是原始插件 CoffeeScript-Sublime-Plugin (很不幸似乎它的开发者放弃了它,只在 SublimeText 2 上工作)的一个分支

这个插件提供了 CoffeeScript 开发人员急需的语法高亮功能,而且不止于此。它在 Sublime 里提供了一些命令(通过命令面板或者各种快捷键),比如进行语法检查、编译文件和显示编译后的文件。它还提供了大量的代码片段和可是使用 cake 的编译系统(CoffeeScript 中 Make 的简化版)。

你可以在 项目首页 仔细浏览插件的更多设置和选项。

10. jQuery

我知道目前在很多地方 jQuery 看似已经落伍了,但是如果你不是建立一个交互性很强的网站或者你只是想在已有应用上添加功能,它仍然是非常有用的。

这个插件提供了额外的语法高亮功能和几乎所有的 jquery 方法作为代码片段。输入方法名字就可以选择匹配的代码片段 - 就是这么简单!我十分喜欢这个功能,因为它让我免于记忆所有方法的签名和不断查看 jQuery 的 API 文档。

比如,输入 $.a 就可以让我选择 $.ajax(),然后自动扩展成以下代码:

Very nice! 太棒了!

分享到:
评论

相关推荐

    sublime text2 插件包

    3. JsFormat:对于JavaScript开发者来说,JsFormat插件非常有用。它可以自动格式化你的JavaScript代码,使其遵循特定的代码风格规则,如缩进、空格、换行等。这样不仅使代码更易读,还能减少因样式不一致引发的团队...

    Sublime_Text3_64位集成常用插件

    总之,Sublime Text 3 64位版本预装了一些前端开发必备的插件,结合其本身强大的编辑功能,为开发者提供了一个高效、便捷的开发环境。无论是初学者还是经验丰富的专业人士,都能从中受益。如果你是Windows用户并且对...

    Sublime Text 3(40多插件+4主题)

    对于JavaScript开发者,"jsFormat"插件可以帮助整理和格式化代码,保持代码风格的一致性。"git"插件则集成了版本控制工具Git,可以直接在Sublime Text中进行提交、拉取和合并操作,大大提升了开发效率。 "css"和...

    sublime text3常用插件

    12. **SublimeLinter-eslint**:对于JavaScript开发者,此插件与ESLint集成,确保你的代码符合最佳实践和约定。 13. **SFTP/FTP Sync**:这款插件实现了本地与远程服务器之间的文件同步,尤其适合需要频繁上传代码...

    Sublime Text 3完美中文版含常用插件

    这个"Sublime Text 3完美中文版含常用插件"的压缩包提供了一个已经汉化的版本,解决了中文用户在使用英文原版时可能遇到的语言障碍。 1. **Sublime Text 3**:Sublime Text 是由程序员 Jon Skinner 开发的一款跨...

    Sublime Text 2 的javascript代码格式化插件JsFormat

    总的来说,JsFormat是Sublime Text 2中一款强大且实用的JavaScript代码格式化插件,通过其简洁的操作和灵活的配置,能够极大地提高JavaScript开发者的生产力。无论是初学者还是经验丰富的开发者,都应该考虑将其纳入...

    现代SublimeText3和2主题

    因此,选择一个适合JavaScript的Sublime Text主题,可以帮助开发者更快速地定位变量、函数、字符串等关键元素,提升开发效率。 Sublime Text支持自定义主题,用户可以通过安装Package Control插件管理器来下载和...

    sublime Text3绿色版(已配置好常用js、jquery、python等插件)

    这个绿色版已经预配置了常用的JavaScript、jQuery、Python等插件,使得开发环境的搭建变得快速而简单。下面我们将详细探讨Sublime Text 3的特点、功能以及如何利用其提升前端开发效率。 1. **特点与优势** - **跨...

    Sublime Text 3 x64 集成插件(Sublime Text 2)

    Sublime Text 3是一款广受开发者喜爱的轻量级、高度可定制的文本编辑器,尤其在HTML和PHP开发领域中...如果你是一位前端或PHP开发者,或者是正在学习Go的新手,Sublime Text 3 x64集成插件无疑是一个值得尝试的选择。

    SublimeText3插件合集.rar

    本压缩包"SublimeText3插件合集.rar"包含了两个重要的插件:AFileIcon-master和pyv8-win64-p3,这些插件对于提升SublimeText3的使用体验具有重要意义。 AFileIcon-master是一款SublimeText3的文件图标增强插件。在...

    sublime text3插件大全安装包

    1. **SublimeCodeIntel-master.zip**:SublimeCodeIntel是一个代码智能感知插件,它提供了强大的代码补全、跳转到定义、查看文档等功能,支持多种编程语言如JavaScript、Python、PHP等。对于提高开发效率和理解代码...

    全栈开发必备的10款 Sublime Text 插件 - WEB开发者1

    为了进一步提升开发效率和工作体验,本文将介绍10款必备的Sublime Text插件,这些插件对于全栈开发者来说至关重要。 1. **Package Control**:Package Control 是 Sublime Text 的一个核心插件,它提供了方便快捷的...

    Sublime Text3 最新版本SFTP插件等

    SFTP(Secure File Transfer Protocol)插件是Sublime Text3的一个重要扩展,它允许用户通过安全的SSH协议远程访问和管理服务器上的文件。安装这个插件后,开发者可以直接在编辑器内浏览、编辑、上传或下载服务器上...

    sublimeText3插件安装

    Package Control 是 Sublime Text 3 中最常用的插件管理工具之一,它可以帮助用户方便地安装、更新和管理各种插件。 #### 二、Package Control 安装方法 Package Control 的安装分为两个步骤:首先需要安装 ...

    sublime text3常用插件集合包

    本压缩包"sublime text3常用插件集合包"提供了一些常用插件的集成,便于用户快速安装和使用。 SublimeTmpl-master是其中的一个子目录,可能包含了模板相关的插件。模板功能在编程中非常实用,它能帮助开发者快速...

    ionic sublime 2/3 提示插件 ionic-sublime-plugin

    该插件是专为Sublime Text 2和3设计的,意味着无论你使用的是哪个版本的Sublime,都可以无缝地集成此插件,享受其带来的便利。"ionic-sublime-plugin"的主要功能是提供对Ionic框架的智能提示和代码补全,它极大地...

    Sublime Text 3 插件版

    "Sublime Text 3 插件版"意味着这个版本已经预装了一些常用的插件,让开发者可以直接使用,无需单独安装。 在Sublime Text 3中,插件通常通过Package Control来管理和安装。Package Control 是一个非常重要的插件,...

    JavaScript开发者必备的10个Sublime Text插件

    对于JavaScript开发者而言,利用Sublime Text的插件能够极大地提高编码效率和开发体验。以下是针对JavaScript开发者,尤其是那些在使用Sublime Text进行开发的开发者们,一些必备的插件知识点。 首先,Sublime Text...

    Prettier的一个SublimeText3插件

    标题提到的"Prettier的一个SublimeText3插件"是指在Sublime Text 3这个流行的文本编辑器中使用的Prettier扩展。Prettier是一款强大的代码格式化工具,它能自动按照预设的规则对JavaScript(以及许多其他语言)代码...

    Sublime Text3多插件版本

    10. **Multiple Selections**:Sublime Text3内置的多选功能,允许用户同时编辑多个位置,提升编辑效率。 除了内置插件,Sublime Text3的社区还开发了数千个第三方插件,涵盖了几乎所有的编程需求。例如,对于...

Global site tag (gtag.js) - Google Analytics