视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript开发者必备的10个SublimeText插件_javascript技巧
2020-11-27 20:51:29 责编:小采
文档
Sublime Text几乎是任何开发者在其工具箱的必备应用程序。Sublime Text是一款跨平台的,高度可定制的,高级的文本编辑器,既适合全功能的IDE(出了名的资源匮乏),又可匹配命令行编辑器,例如Vim和Emacs(具有陡峭的学习曲线)。

Sublime Text如此受欢迎的其中一个原因就是它的可扩展插件架构。这使得开发人员可以轻松使用新功能,例如代码完成,或远程API文档嵌入,来扩展Sublime的核心功能。Sublime Text的插件并不是开箱即用的——通常需要通过一个叫Package Control的第三方软件包管理器来安装。要在Sublime Text中安装Package Control,请遵照其网站上的安装指南。

在这篇文章中,我将介绍10个JavaScript开发人员必备的Sublime插件,每一个都可以帮助你改进工作流程,让你更高效。下面,就让我们开始吧!

1.Babel

第一个当属Babel插件。该插件添加了合适的语法高亮到ES6 / 2015和React JSX代码。安装插件后,你要做的第一件事就是设置默认的语法为.es6,.jsx,以及甚至.js文件。但是,如果你工作于ES3 /5,并且不想使用Babel改变你的代码的话,那么要慎用最后一个。

如果你还没有发现Babel的乐趣,那么我强烈推荐它。它允许你编译ES6 / 2015和JSX代码到ES5。它可以很好地集成到所有流行的构建工具和CLI。虽然它不支持旧版浏览器,但如果你需要支持IE10及以下版本,那么可以按照警告页面上的提示去做。

可惜的是,Babel插件不允许在Sublime中快速编译ES6代码。所以如果你非要这么做,那么我建议你试试Compile Selected ES6。

2. JSHint

接下来是Sublime中的JSHint插件。JSHint是一个JavaScript Linter,可用于查看你的代码并确认它有正确的式样,正确的语法,摆脱常见错误。无论你是一个初学者,还是已经编写了好多年的程序,JSHint都是一个必备品。查看JSHint相关页面以了解更多的信息。

要让JSHint Sublime Text插件工作,你需要通过npm安装好全局性的JSHint:



如果你不知道如何做到这一点,那么请查看我们关于从Node Package管理器开始的教程。

一旦安装好了JSHint npm模块和JSHint Sublime Text插件,你就可以通过打开你的JavaScript文件并按下 Ctrl + J (或 Alt + J on Linux/Windows),来调用JSHint。或者,你还可以通过上下文菜单访问JSHint。

如果你已经安装了这个插件,但想要在发生错误的地方有一个更明确的警告,那么请使用JSHint Gutter。或者,如果你想在安装NPM包或该插件之前试用JSHint的话,JSHint.com也有一个很棒的在线互动工具,你可以使用这个工具粘贴你的代码查看即时反馈。

3. JsFormat

JsFormat基于JS Beautifier,可以自动帮助你格式化JavaScript和JSON。如果你只单独使用它的JSON格式,也是可以的。但对我来说,它的最大优势出现在当我工作于其他开发人员的代码,或我自己在很久以前写的代码的时候。

这样的代码往往是难以阅读,但是遵循一种通用的代码格式样式是有帮助的。虽然格式化可能不适合每一个人,但确实可以通过引入一个共同的结构来帮助开发人员读懂代码。Linter虽然关注到这一点,但不一定全面做到,并且不会自动修复格式。代码格式化节省了大量的时间,避免了大量令人头痛的问题。

安装好了之后,要使用JSFormat,先进入JS文件,然后在Windows / Linux上按Ctrl + Alt + f ,或在Mac上按 Ctrl + a + f 。当然也可以使用上下文菜单。

你也许会想:“要是我不喜欢它们设计JavaScript样式的方式呢?”

别担心! JsFormat不但基于JS Beautifier设置,而且高度可配置。要调整适合于Sublime Text 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

Sublime Text在侧边栏文件树中可用于处理文件的选项非常少。简单地说,SideBar Enhancements可修复这个问题。这款插件特别为文件和文件夹提供了一个“move to trash”的选项,一个“open with..”选项,以及一个剪贴板。它也可以让你在web浏览器中打开文件,复制文件内容作为data:uri base (这在CSS中嵌入图像特别方便),并提供大量的搜索操作。此外,它可以很好地与SideBarGit集成,直接从侧栏提供Git命令。

随着JavaScript代码库规模的不断扩大,于是,找到一种浏览项目并处理项目文件的合理手段迫在眉睫。因此,这个插件就成为了必需品。

6. AngularJS

由Angular-UI团队开发,并且可能是这些SublimeText插件中比较大(但也更有用)的软件包之一。它的主要功能包括:

  • 核心AngularJS指令(ng-model,ng-repeat等)的代码完成
  • 自定义指令的指令完成
  • 指令、控制器和过滤器的快速面板搜索
  • Angular相关的代码片段
  • 核心Angular JS指令的GoToDocs
  • Angular是一个大型的库,AngularJS出乎意料地有用。你可以在项目的主页上阅读它的很多设置。

    要利用这个插件语法高亮的优势,那么你需要到View -> Syntax -> HTML (Angular.js)中改变你的HTML文件的视图类型。

    7.TypeScript

    TypeScript是JavaScript编译为普通JavaScript的一个类型超集。这对于普通开发者而言,可能不知道它也没什么大的关系,但是今年三月出来的小公告——Angular 2将建造在TypeScript上,意味着,如果你工作于Angular的话,并且你打算以后使用Angular2的话,那么这个插件是必备的。

    基于微软的支持,这款插件添加了代码完成,正确的语法高亮,代码格式化和扩展导航功能到TypeScript项目。它还配备了一个构建系统,允许你编译TypeScript文件为JavaScript。

    要访问构建系统可以这么做 Tools -> Build System,然后选择TypeScript 。接着用 .ts 结尾打开一个文件,选择Tools -> Build,或者干脆按 Ctrl + B。你会被要求构建参数,之后插件将在同一目录中输出编译好的JavaScript文件。唯一需要注意的是,它需要Node。

    从插件的角度说,它提供了“工作于TypeScript代码时加强版的Sublime Text体验”。千真万确,从上述臃肿的IDE中,它做了一个令人耳目一新的改变。

    8.Handlebars

    如果你正在使用Ember.js,或只是将Handlebars作为模板语言一种选择,那么你不能没有它。没有它的话,你还不如干脆关掉所有的语法高亮。

    除了语法高亮(在个别模板文件和脚本标签的内联模板中都有这个功能),它还提供了用于触发各种表情的选项卡。例如,键入 x-temp并按 TAB键会产生:

    显示全文
    专题