Sublime Text 3 前端必备插件

来源：互联网发布：aide表白源码编辑：程序博客网时间：2024/05/21 06:52

一、安装Package Control插件

在安装插件之前，需要让sublime安装Package Control。
使用Ctrl+`（Esc键下方）快捷键或者通过View->Show Console菜单打开命令行，将以下代码复制后粘贴到控制台中，然后按Enter(回车)，稍等片刻

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

如果安装成功，就可以在Preferences菜单下看到Package Settings和Package Control两个菜单。

若不能通过以上方式成功安装，可尝试以下方式手动安装：

1.点击Preferences->Browse Packages…菜单

2.进入打开的目录的上层目录（即Sublime Text 3目录）

3.再打开Installed Packages目录

4.点击下载Package Control.sublime-package并复制到Installed Packages目录

5.重启Sublime Text 3

二、安装Emmet（示例）插件

在Sublime Text 3中按下快捷键Ctrl+Shift+P

在出现的文本框中输入Install Package(或直接输入“ip”)选中Install Package并回车（可能需要等待几秒钟，在此过程中不能进行任何鼠标/键盘操作）

这里写图片描述

输入或选择你需要的插件再按Enter（回车）就可以安装插件了（下图以安装Emmet插件为例）

这里写图片描述

在安装过程中，左下角会显示正在安装的提示，静候片刻

这里写图片描述

正在安装的提示
若安装成功，相应的，左下角会出现安装成功的提示

这里写图片描述

三、常用前端插件

emmet

前端神器。一个可以极大提高web开发者HTML和CSS工作效率的工具箱组件。

CSS3

CSS3语法高亮、CSS语法提示，美中不足的是缺少游览器私有属性高亮。

CSS Extended Completions

关联CSS文件，智能提示css文件中的类名，非常好用。

JavaScript Completions

支持javascript原生语法提示，妈妈再也不用担心我输入document.getElementById(id)。

jQuery

为jQuery的大部分方法提供了示例代码段，让jQuery的API更加容易使用。

ColorHighlighter

它可以展示你所选择的颜色代码（像“#FFFFFF”, “rgb(255,255,255)”, “white”）的真正颜色。同时它还包含一个颜色选择器让你可以方便地更改颜色。

BracketHighlighter

括号以及标签层级显示，不用担心选中的代码属于哪个代码块，一目了然。
高亮显示[], (), {}, “”, ”, 符号，便于查看起始和结束标记

HTML-CSS-JS Prettify

THML、CSS、JS代码格式化，压缩过后的代码可以通过该工具复原。

AlignTab

使用正则表达式来帮助代码对齐，比如几行代码以=号对齐。

AutoFileName

快速列出想要引用的文件夹里所有文件的名字。

ColorPicker

如果你经常要查看或设置颜色值，这个插件可以很方便地调用你本机的调色板应用。（译者扩充：）这是一个双向的功能，你既可以在调色板中选择一个颜色，然后按“确定”按钮把该值填写到 SublimeText 中活动文档的当前位置，也可以在活动文档中选择一个颜色的值，按此插件的快捷键就会在显示的调色板中定位到该值所对应的颜色。

JsFormat

可以自动帮助你格式化JavaScript代码，形成一种通用的格式，比如对压缩、空格、换行的js代码进行整理，使得js代码结构清晰，易于观看。在已压缩的JS文件中，右键选择jsFormat或者使用默认快捷键（Ctrl+Alt+F）

DocBlockr

可以快速生成各种注释格式，当需要生成注释符号时，输入/*、/然后回车系统即帮你自动生成，如果/后面刚好是一个函数的定义，注释格式会根据函数的参数生成。

Sidebar Enhancements

增强侧栏文件右键功能。

sublimeCodeIntel

JS代码自动补全，支持多种语言的自动补全。

SideBarEnhancements

一款很实用的右键菜单增强插件

TrailingSpaces

能高亮显示多余的空格和Tab

Terminal

可以允许在Sublime Text 3中打开cmd命令窗口
安装好该插件后即可使用快捷键Ctrl+Shift+T呼出命令行窗口

Autoprefixer

CSS3私有前缀自动补全
在输入CSS3属性后（冒号前）按Tab键即可

注：以上插件能满足绝大多数前端开发需求，欢迎留言补充~

阅读全文

0 0