介绍几款Sublime Text的常用插件及用法（前端）

最新推荐文章于 2023-10-09 13:13:51 发布

dengdengda

最新推荐文章于 2023-10-09 13:13:51 发布

阅读量4.5k

点赞数

文章标签： sublime text3 插件 Emmet autoprefixer

本文链接：https://blog.csdn.net/dengdengda/article/details/50588279

版权

我上一篇介绍了Sublime Text插件的安装方法，今天想介绍我在用的几款插件，当然Sublime的插件是非常非常多的，我介绍的肯定不会那么多，因为今天我主要是介绍我用的插件的使用方法，有的安装上就可以用，有的需要一点小小的配置，还是超简单的啦。

我也不贴每个插件的下载链接地址了，因为照我上篇讲的方法1是完全不需要我们去下载这些插件的。

（1）Emmet

Emmet是快速编写 HTML/CSS 代码，据说它的前身是Zen Coding（不好意思没有用过）。快捷键ctrl+shift+p调出窗口输入install package回车后等待它弹出窗口然后搜索Emmet安装就可以了。Emmet的使用教程比较多，语法也比较多，很难记，对我来说我只是记住一些基础的，太复杂的感觉就是虽然你快速但是我脑容量不够啊。如何生成呢？Ctrl+e

比如输入“！”然后ctrl+e就会生成

<span style="font-size:18px;"><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html></span>

是不是很快速？再比如输入ul>li*5然后ctrl+e生成

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

还有很多语法，请参照http://docs.emmet.io/cheat-sheet/

（2）LESS

稍微普及一下LESS,一种动态样式语言，LESS 将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。（摘自一个神奇网站）然后其实很多人在说Sass，我只觉得它们两个一毛一样毫无差别，唯一的差别就是名字不一样。想学习less的人可以去http://www.bootcss.com/p/lesscss/学习。

用过less的人应该知道，sublime是不支持对less格式的代码高亮显示的，不高亮显示代码是件很不好的事情，满眼过去一片黑白，所以只要你安装了这个插件，写less代码就不再是问题，据说sublime还有一个插件是将less代码编译成css代码的，不过我没有用，因为我用的是koala，关于这个软件。。。扩展太多再讲下去天都黑了，有兴趣的人可以留言哦。

（3）ColorPicker

一看名字就知道这是个跟颜色有关的插件，也确实是这样的，安装好以后使用快捷键ctrl+shift+c就可以调出调色板选取颜色了。

（4）SublimeCodeIntel

这个是代码提示插件，它支持的语种还是很多的，反正我感觉安装上以后提示功能比以前丰富了，还挺好用的。

（5）Autoprefixer

这个插件就是用来专门解决浏览器前缀的问题的，曾经我写CSS3的时候，某些1行代码得写5行，其实我是拒绝的，不过现在关于前缀问题已经没有以前那么严重了，这些主流浏览器都在趋于一个统一。对了，安装这个插件前必须要安装node.js，然后其实用它有一点复杂，毕竟它很智能，安装好以后，使用它就有两个方法了。

方法1：设置快捷键在preferences-->key Bandings--user里添加一句：

<span style="font-size:18px;">{ "keys": ["ctrl+alt+shift+p"], "command": "autoprefixer" }
</span>

大家可以根据自己的喜好设置这个快捷键的哈。

方法2：Gulp中配置Autoprefixer

说实话这个方法很麻烦，但是作为一个有为青年，I CAN I UP，所以我还是试了一下。

首先我要假设大家已经配置好了gulp的运行环境，然后我们要安装autoprefixer

输入命令 npm intall gulp-autoprefixer --save-dev

然后我们要去配置它的gulpfile.js文件，

<span style="font-size:18px;"><span style="font-family:Microsoft YaHei;">var gulp = require('gulp'); 
var autoprefix = require('gulp-autoprefixer');
gulp.task('<span style="font-family:Microsoft YaHei;">autoprefix</span>', function() {
  gulp.src(['./src/<span style="font-family:Microsoft YaHei;">css</span>/*.css'])
    .pipe(autoprefix('last 2 versions'))
    .pipe(gulp.dest('./build/<span style="font-family:Microsoft YaHei;">css</span>'));
});
</span></span>

然后我们在src/css目录下创建一个文件example.css

<span style="font-family:Microsoft YaHei;">div</span>{
  transform: translateY(20px) rotate(45deg);
}

然后在终端输入命令gulp autoprefix等待成功后，去build/css目录下查看生成的文件：

<span style="font-family:Microsoft YaHei;">div</span>{
  -webkit-transform: translateY(20px) rotate(45deg);
          transform: translateY(20px) rotate(45deg);
}

dengdengda

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
介绍几款Sublime Text的常用插件及用法（前端）

我上一篇介绍了Sublime Text插件的安装方法，今天想介绍我在用的几款插件，当然Sublime的插件是非常非常多的，我介绍的肯定不会那么多，因为今天我主要是介绍我用的插件的使用方法，有的安装上就可以用，有的需要一点小小的配置，还是超简单的啦。我也不贴每个插件的下载链接地址了，因为照我上篇讲的方法1是完全不需要我们去下载这些插件的。（1）EmmetEmmet是快速编写
复制链接

扫一扫