专为前端开发者准备的 15 款优秀的 Sublime Text 插件

article/2025/9/14 5:57:14

640?wx_fmt=jpeg

作者 | IT程序狮
链接 | https://www.jianshu.com/p/87fe1139f668


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

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

1、插件包管理器

640?wx_fmt=other

首先,我们将从包管理器开始。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

640?wx_fmt=other

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

6、 GitGutter

640?wx_fmt=other

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

7、Side Bar Enhancements

640?wx_fmt=other

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

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

8、ColorPicker

640?wx_fmt=other

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

9、 Placeholders

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

10、 DocBlockr

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

11、 SublimeCodeIntel

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

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

12、 Minify

640?wx_fmt=other

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

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

 

640?wx_fmt=other

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

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

14、Color Highlighter

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

15、 Language Packs

640?wx_fmt=other

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

  • AngularJS

  • TypeScript

  • Babel (React)

额外的彩蛋:主题

在 Sublime Text 上安装一个漂亮的主题,势必会使你能够更愉快地编写代码。当然,这里也有一些我们喜欢的主题与你分享:

  • Agila(截图中使用的主题)

  • Material Theme

  • Brogrammer

感谢你的阅读。若你有所收获,欢迎点赞与分享。


640?wx_fmt=jpeg

640?wx_fmt=jpeg


http://chatgpt.dhexx.cn/article/ECKsjMUF.shtml

相关文章

sublime上插件的安装与使用

亲测可用,若有疑问请私信 1.插件安装的方式 插件安装方式一:直接安装 下载插件安装包后,把安装包解压到packages目录(菜单->首选项->浏览插件目录)中,完成安装 插件安装方法二:使用pac…

K-means算法

目录 算法概述算法原理算法推导算法流程K值的确定 算法概述 K-means算法也称为K_均值算法,用于聚类算法。聚类是一种无监督学习,他将相似的对象归于一个簇中,簇中心通过簇中所有点的均值来计算。聚类算法与分类算法的主要区别就是分类的目标…

Warshall 算法

Warshall算法 介绍: Warshall在1962年提出了一个求关系的传递闭包的有效算法。其具体过程如下: N—S图 代码实现: import java.util.Scanner;public class Warshall {public static void main(String[] args) {System.out.println("…

基于BINN算法的CCPP全路径覆盖算法

1.CCPP整体算法文档 1.1 ccpp基础介绍 全路径覆盖算法(CCPP: Complete Coverage Path Planning)作为扫地机器人较为关键的组成部分,其问题的本质是:在栅格地图中,全覆盖路径规划问题就演变为寻找机器人的下一个移动位置,只有准确…

差分进化算法

文章目录 前言一、差分进化算法描述二、差分进化算法流程1.初始化2.变异3.交叉4.选择5。终结条件 2.流程图 总结 前言 差分进化算法(Differential Evolution Algorithm,DE)是一种高效的全局优化算法。它也是基于群体的启发式搜索算法,群中的每个个体对应…

进化算法简单介绍

进化算法又称启发式算法,是利用经验法则或者常识来解决问题的方法。 图片来自参考文献(1)。 1. 元启发式算法和启发式算法有什么区别? 启发式策略(heuristic) 启发式算法(Heuristic Algorigthm)是一种基于…

EM算法

一、EM算法介绍 我们经常会从样本观察数据中,找出样本的模型参数。 最常用的方法就是极大化模型分布的对数似然函数。(最大似然估计:利用已知的样本结果,反推最有可能导致这样结果的一组参数)但是在一些情况下&#x…

TDOA算法

1.TDOA: TDOA:全称为Time Difference Of Arrival 到达时间差 距离差时间差*电磁波速度 TA-TBCONSTANT 2:TDOA定位基本原理 通过测量无线电信号到达不用监测地点的天线单元时间差,来对发射无线电信号的发射源进行定位 TDOA定位流程 从监测站将…

SM2算法概述

2021SCSDUSC SM2算法概述 SM2椭圆曲线公钥密码算法是我国自主设计的公钥密码算法,包括SM2-1椭圆曲线数字签名算法,SM2-2椭圆曲线密钥交换协议,SM2-3椭圆曲线公钥加密算法,分别用于实现数字签名密钥协商和数据加密等功能。 SM2标…

银行家算法

一 银行家算法作用&#xff1a; 动态防止进程死锁的算法 二 银行家算法步骤 第一步 判断是否存在一个安全序列&#xff0c;若存在一个安全序列则系统为安全的。 第二步1请求资源 判断 Request < Need Request < Available 第三步 假定可以分配资源 并修改 Availabl…

Newton牛顿法(一)| 基本思想+迭代公式

基本思想与迭代公式 通常对已知方程 f ( x ) 0 f(x)0 f(x)0进行变形而构造的迭代函数 φ ( x ) \varphi(x) φ(x)不是惟一的。在实际作用中&#xff0c;如果希望迭代函数 φ ( x ) \varphi(x) φ(x)有一种固定格式的构造方法&#xff0c;就可以采用Newton迭代法。 Newton迭代…

理解牛顿法

原创声明:本文为 SIGAI 原创文章,仅供个人学习使用,未经允许,不能用于商业目的。 其它机器学习、深度学习算法的全面系统讲解可以阅读《机器学习-原理、算法与应用》,清华大学出版社,雷明著,由SIGAI公众号作者倾力打造。 书的购买链接书的勘误,优化,源代码资源导言 …

机器学习——牛顿法详解

我们现在学习的机器学习算法&#xff0c;大部分算法的本质都是建立优化模型&#xff0c;通过特定的最优化算法对目标函数&#xff08;或损失函数&#xff09;进行优化&#xff0c;通过训练集和测试集选择出最好的模型&#xff0c;所以&#xff0c;选择合适的最优化算法是非常重…

牛顿法的简单介绍及Matlab实现

目录 牛顿法原理简介使用牛顿法求解一元方程使用牛顿法求解平面定位问题参考文献 牛顿法原理简介 牛顿法的原理是利用函数 f ( x ) f(x) f(x) 的泰勒级数的前几项来寻找方程 f ( x ) 0 f(x)0 f(x)0 的根。 f ( x ) f(x) f(x)在 x 0 x_0 x0​处的一阶泰勒展开 f ( x ) f ( x…

牛顿法介绍

目录 牛顿法介绍推导海森矩阵、泰勒公式、梯度下降法牛顿法特点 牛顿法介绍 首先牛顿法是求解函数值为0时的自变量取值的方法。如果你看不懂这句没关系&#xff0c;继续往下看就好。利用牛顿法求解目标函数的最小值其实是转化成求使目标函数的一阶导为0的参数值。这一转换的理…

牛顿法,障碍法,内点法

基于对数障碍函数法的内点法 牛顿法&#xff08;Newton Method&#xff09;对数障碍函数方法一个简单的例子python代码 牛顿法&#xff08;Newton Method&#xff09; 牛顿法与梯度下降法&#xff0c;最速下降法等优化算法类似&#xff0c;是基于梯度的方法。给定一个二次可微的…

牛顿法python 实现

有用请点赞&#xff0c;没用请差评。 欢迎分享本文&#xff0c;转载请保留出处。 牛顿法也是求解无约束最优化问题的常用方法&#xff0c;有收敛速度快的优点。牛顿法是迭代算法&#xff0c;每一步需要求解目标函数的海赛矩阵的逆矩阵。同时还有拟牛顿法、阻尼牛顿法、修正牛顿…

牛顿法及牛顿法求解优化问题

牛顿法及牛顿法求解优化问题 牛顿法 1. 由来和基本思想 牛顿法也叫牛顿迭代法和牛顿-拉夫森法 1. 牛顿迭代法&#xff1a;因为牛顿法的是通过迭代来实现的&#xff0c;每次运算都让结果比之前好一点。哪怕只好一点点&#xff0c;在很多次迭代之后也可以得到一个很好的结果甚…

最优化-牛顿法(Newton)

转&#xff1a;https://blog.csdn.net/qq_36330643/article/details/78003952 平时经常看到牛顿法怎样怎样&#xff0c;一直不得要领&#xff0c;今天下午查了一下维基百科&#xff0c;写写我的认识&#xff0c;很多地方是直观理解&#xff0c;并没有严谨的证明。在我看来&…

高斯牛顿法详解

一、高斯牛顿法发展历程 1、从上倒下为高斯牛顿法的前世今生已经未来的演化&#xff1a; 最速下降法&#xff08;一阶梯度法&#xff09; 牛顿法&#xff08;二阶梯度法&#xff09; 高斯牛顿法 列文伯格法 马夸尔特法 二、问题的引出 1、考虑如下优化目标函数&#xff1a;…