sublime中常用插件及常规设置
每次换电脑的时候都需要重新找一下sublime的插件及安装方法,所以决定把常用的插件及设置方式总结下。
###一、安装install package
自动安装:
1、通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台
2、粘贴对应版本的代码后回车安装
适用于 Sublime Text 3:
适用于 Sublime Text 2:
###二、安装常用插件 “ctrl+alt+p”调出控制台;输入install package 按下回车,可以进行插件的选择和安装。常用的插件如下:
- Emmet
- Emmet 是一个前端开发的利器,其前身是 Zen Coding。它让编写 HTML 代码变得简单。Emmet 的基本用法是:输入简写形式,然后按 Tab 键。
- BracketHighlighter
- BracketHighlighter 是一个括号、引号、标签高亮插件,支持 []、()、{}、”“、’’ 和
等,比 Sublime Text 自带的高亮要明显得多。
- BracketHighlighter 是一个括号、引号、标签高亮插件,支持 []、()、{}、”“、’’ 和
- SASS Build (GitHub)
- SASS Build 是一个编写CSS的预处理器。这个特别的插件将帮助你妥善构建包括压缩选项在内的SASS文件。一旦你安装了这个插件,你可以很容易地通过按 Ctrl+ B(MAC系统是 Command +B)来启动它。
- PackageResourceViewer
- 通过这个特殊的插件,会给你查看和编辑SublimeText附带的不同的包带来很多方便。您也可以提取任何给定的包。这一行动将其复制到用户文件夹,以便您可以安全地对其进行编辑。(打开包的方式是ctrl+alt+p,输入PackageResourceViewer,然后选择要管理的包)
- CSSComb
- 这是用来给CSS属性进行排序的格式化插件。如果你想保持的代码干净整洁,并且希望按一定的顺序排列,那么这个插件是一种有效解决的方案。特别是当你和其他有自己代码编写风格的开发者一同协作的时候。(需要nodejs支持)
- less
- 系统自带的less2css插件安装比较麻烦,同时,该插件的安装需要nodejs支持,还需要安装lessc。我在git上发现一个比较好的插件,安装也很简单。地址是:https://github.com/yswang0927/lessc
- html/css/js prettify
- 一款格式化的插件。对于代码格式规范化很有帮助。需要设置indent-size:2
- view in browser
- 安装该插件后,用户保存好html页面后。右击选择open in browser
- Autoprefixer
- 这是一款CSS3私有前缀自动补全插件。该插件使用CanIUse资料库,能精准判断哪些属性需要什么前缀与CssComb插件一样,该插件也需要系统已安装Node.js环境 使用方法:在输入CSS3属性后(冒号前)按Tab键
###三、自定义快捷方式
在sublime 中用户可以自定义快捷键。例如,我经常用到在浏览器中打开html页面,我可以为这个操作设置一个快捷键。(首先得安装上插件view in browser) 具体设置方法:
点击 preference-Key Bindings-user,在空白页面输入如下代码:
(这里的快捷键用户可以自己选择)
###四、补充 由于tab键在不同环境下解析结果不同,会让代码结构变乱,一般使用2个空格来代替一个tab。在sublime中设置方式是:点击右下角的spaces,选择Indent Using Spaces和Tab Width:2。或者点击view-indentation进行设置。
在编写的代码的时候需要用到的一些样式我们可以写在preferences-> Setting-User里。 我目前使用的是