Sublime Text 已成为了目前最流行的代码编辑器之一。它的反应速度、简单易用性以及丰富的插件生态,让众多前端开发者们为之倾倒。

为了帮助开发者们更便捷地使用 Sublime Text ,我们决定制作一个 Sublime Text 扩展列表,它包含了我们日常使用的一些插件。当然,如果我们所列举的插件中没有你喜欢的,也随时欢迎你在评论中与我们分享它们。

1、插件包管理器

首先,我们将从包管理器开始。Package Control 是 Sublime Text 的插件包管理器,它提供了 Sublime 中插件包的安装与删除。若你没有安装它,那么我们后续推荐的插件,你也就无法尝试咯。

2、JavaScript 与 NodeJS 代码段

一个用于编写常见 JavaScript 代码段的集合插件。为什么要费劲逐个敲下 document.querySelector(‘selector’)文本,你只需要利用快捷键 qs,并按下 Tab 键,剩下的代码,Sublime 将帮你自动补全。

另外前端想学好,想高薪就业,符合企业项目要求的经验至关重要。没项目的话,可以去小编的企鹅学习裙:酒伞留吧务而伞刘酒,翻译成阿拉伯数字就可以找到了、自己去里面下,多操作练习积累项目经验才是王道

3、Emmet

上述的插件类似,Emmet 也是一款让你更快捷编码的插件。但 Emmet 适用于 HTML 与 CSS 代码的编写,它可以让你一次性输入长标签、嵌套元素或者整个页面模板。

如果你觉得 Emmet 有些复杂,那么你可以尝试一个叫做 HTML 代码段的插件。它更简单易用,并且使用文档写的也很直接。

译者注:Emmet 的前身是大名鼎鼎的 Zen coding,相信前端开发者们不会陌生。这里再分享一个使用手册,希望对你有所帮助。

4、 Advanced New File

一款助你在 Sublime 中快速创建新文件的插件。你只需要使用菜单,并利用快捷键 ctrl+alt+n 打开提示框,写入新文件的路径,即可配置新文件。该插件还支持自己编写路径保存,甚至文件夹的名称也可以自动完成。

5. Git

一款可以直接在 Sublime 命令选项面板中工作的 Git 集成插件。该插件提供了一些常用的 Git 命令,你可以在 Sublime 中完成,诸如添加、提交或查看 Git 日志等功能。

6. GitGutter

一个非常实用的 Sublime 扩展。它会告诉你自上次 Git Commit 以来已经改变的代码行,并给出相应的概述。你也可以用它来与你已提交到 Git 上的文件进行详细的对比。

7. Side Bar Enhancements

在 Sublime Text 中,你可以在左侧面板中了解正在进行的项目。虽然,它为你提供了一些使用文件的基本选项,但默认的操作是相当有限的。

当你右键菜单选项的时候,这个插件将会为你提供超过 20 个选项来增强你的可操作性。包括在浏览器中打开、复制以及其他有用的功能。

8、ColorPicker

一个小巧实用的取色器。它可以快速地抓取十六进制的色值,使用非常简单。你可以在单独的窗口打开它,从调色板中取色,或使用滴管在屏幕的任意位置取色。

9、Placeholders

Sublime Text 3 有一个内置的 Lorem Ipsum(占位符) 生成器,你可以使用它来创建虚拟文本。而该插件则扩展了占位符生成器的功能,你就可以通过 Sublime Text 快速地生成占位符图像、表单、列表和表。
10、DocBlockr

个可以向函数添加详细注释的插件。DocBlockr 可以帮助你轻松地为函数添加相应的描述,包括参数、返回的值和变量类型。

11、SublimeCodeIntel

一个智能代码自动补全插件,它能帮你索引你的源文件,并能让你快速地找到并跳转到相应的函数中。

所以,这个扩展适用于流行以及相对冷门的编程语言。

12、Minify

一个代码美化与压缩的插件,适用于 CSS、HTML、JavaScript、JSON 和 SVG.

此包依赖于外部 Node.js 库进行缩小和美化,故你需要单独安装它们。

npm install -g clean-css uglifycss js-beautify html-minifier uglify-js minjson svgo

13、Sublime Linter

此插件能够帮助开发人员检测代码中存在的语法错误,不规范的或者错误的代码写法。它支持各类开发语言。

但 Sublime Linter 本身只是一个基础的框架,所以使用的时候,你还需要安装单独的插件来满足不同语言的使用需求。

14、Color Highlighter

可以在许多 IDE 和文本编辑器中看到颜色高亮功能,而 Sublime 中是不支持颜色预览的。但是,有了这款插件,在你使用 Sublime 时就能够帮你检测出 CSS 文件中的颜色码。无论是 Hex 码,或是 RGB 码都能很好的显示。

15、Language Packs

虽然 Sublime Text 具有超过 50 种编程语言代码的高亮显示。但是,仍然有部分框架和 Web 开发语言,目前还不支持。不过,由于编辑器插件的性质,社区也能够为任何编程语言创建和提供相应的包。
AngularJS
TypeScript
Babel (React)

专为前端开发者准备的15款优秀的Sublime Text插件的更多相关文章

  1. 前端开发必备! 20 个强大的 Sublime Text 插件

    http://www.oschina.net/translate/20-powerful-sublimetext-plugins http://www.w3cplus.com/tools/emmet- ...

  2. 全栈开发必备的10款Sublime Text 插件

    Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等.Sublime Text 更妙的是它的可扩展性.所以,这里挑选了全栈开发必备的10款 Sublime T ...

  3. 全栈开发必备的10款 Sublime Text 插件

    Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等.Sublime Text 更妙的是它的可扩展性.所以,这里挑选了全栈开发必备的10款 Sublime T ...

  4. 让网站动起来!12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

  5. 12款优秀 jQuery Ajax 分页插件和教程

    12款优秀 jQuery Ajax 分页插件和教程 在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...

  6. 15款优秀移动APP产品原型设计工具

    一新来小盆友问:“移动产品原型设计都用啥工具?” 答:“@#¥……&%*” 又问:“能详细说下各个工具吗?我比较一下” “……” 好吧,谁让我那么的爱分享而你又是小美女呢 ———————正文开 ...

  7. sublime text 插件(前端自用)

    一.软件安装 ST中文论坛:http://sublimetext.iaixue.com/  或者 http://sublimetext.iaixue.com/dl/#sublime_text_3103 ...

  8. 面向 Web 开发者的 Sublime Text 插件

    Package Control 在 Sublime Text 上大家都用 Package Control 来管理安装插件,所以它是我们要安装的第一个插件,安装方法见这里.关于 Package Cont ...

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

    Sublime Text 是每个开发者工具箱中都应该有的一个强大的应用.它是一个跨平台的.高定制化的.高级的文本编辑器,在功能强大的 集成开发环境(众所周知地消耗资源)和类似于 Vim 或 Emacs ...

随机推荐

  1. Apache http 包中的常量

    org.apache.* org.apache.http.Consts public static final int CR 13 public static final int HT 9 publi ...

  2. mybatis-generator-plugin

    1.背景 这篇文章刚开始想着哪个分类呢?mybatis.idea或是maven呢,最后还是选择了mybatis.最初使用这个逆向工具是在eclipse上,使用的是eclispe上mbg插件执行配置ge ...

  3. leetcode617 Merge Two Binary Trees

    """ Given two binary trees and imagine that when you put one of them to cover the oth ...

  4. edge浏览器两个标签页localStorage不同步,解决办法

    今天遇到个奇怪的问题,edge两个标签页之间的localStorage值不同步,网上说ie和edge如果想让localStorage值同步,需要主动出发localStorage的change事件 wi ...

  5. ROM与RAM

    今天小姐姐来问我关于ROM.RAM和Flash的区别,我给她大致的说了一下名称和作用.可人家说她知道这玩意的名字,希望我能够接地气的解释一下什么是ROM.RAM.FLASH…… 这就把我难住了 ≧ ﹏ ...

  6. GNS3 模拟icmp分片不可达

    R1 : conf t int f0/0 no shutdown ip add 192.168.1.1 255.255.255.0 no ip routing end R2 f0/0: conf t ...

  7. 一百零六、SAP的OOP面向对象编程,OO-ALV的简介

    面向对象编程,如图 基本概念: 1.对象(Object)是一个现实实体的抽象.一个对象可被认为是一个把数据(属性)和程序(方法)封装在一起的实体,这个程序产生该对象的动作或对它接受到的外界信号的反应. ...

  8. 161-PHP 文本替换函数str_replace(二)

    <?php $str='Hello world!'; //定义源字符串 $search='o'; //定义将被替换的字符 $replace='O'; //定义替换的字符串 $res=str_re ...

  9. 联系我们地图坐标展示js

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6d88 ...

  10. java基础源码 (5)--reflect包-AccessibleObject类

    学习参考博客:https://blog.csdn.net/benjaminzhang666/article/details/9664585AccessibleObject类基本作用 1.将反射的对象标 ...